@x-plat/design-system 0.1.5 → 0.2.0

package/dist/index.js

@@ -1,3 +1,6 @@
+// src/index.ts
+import "@x-plat/tokens-default/tokens.css";
+
 // src/components/Accordion/Accordion.tsx
 import React from "react";
 
@@ -5469,7 +5472,7 @@ var SuccessIcon = () => /* @__PURE__ */ jsx294(
 );
 var SuccessIcon_default = SuccessIcon;
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -5520,26 +5523,37 @@ var AccordionItem = ({ item, isOpen, onToggle }) => {
   ] });
 };
 var Accordion = (props) => {
-  const { items, multiple = false, defaultActiveKeys = [], className } = props;
-  const [activeKeys, setActiveKeys] = React.useState(
-    new Set(defaultActiveKeys)
+  const { items, className } = props;
+  const isMultiple = props.multiple === true;
+  const controlledKeys = isMultiple ? props.activeKeys : props.activeKey !== void 0 ? props.activeKey !== null ? [props.activeKey] : [] : void 0;
+  const defaultKeys = isMultiple ? props.defaultActiveKeys ?? [] : props.defaultActiveKey ? [props.defaultActiveKey] : [];
+  const isControlled = controlledKeys !== void 0;
+  const [uncontrolledKeys, setUncontrolledKeys] = React.useState(
+    new Set(defaultKeys)
   );
+  const currentKeys = isControlled ? new Set(controlledKeys) : uncontrolledKeys;
   const toggle = (key) => {
-    setActiveKeys((prev) => {
-      const next = new Set(multiple ? prev : []);
-      if (prev.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
+    const next = new Set(isMultiple ? currentKeys : []);
+    if (currentKeys.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    if (!isControlled) {
+      setUncontrolledKeys(next);
+    }
+    if (isMultiple) {
+      props.onChange?.([...next]);
+    } else {
+      const first = [...next][0] ?? null;
+      props.onChange?.(first);
+    }
   };
   return /* @__PURE__ */ jsx295("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ jsx295(
     AccordionItem,
     {
       item,
-      isOpen: activeKeys.has(item.key),
+      isOpen: currentKeys.has(item.key),
       onToggle: () => toggle(item.key)
     },
     item.key
@@ -5734,6 +5748,7 @@ var Badge = (props) => {
     count,
     maxCount = 99,
     dot = false,
+    size = "md",
     colorNamespace = "xplat",
     color = "red",
     colorDepth,
@@ -5746,7 +5761,7 @@ var Badge = (props) => {
   );
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
-  return /* @__PURE__ */ jsxs191("div", { className: clsx_default("lib-xplat-badge", className), children: [
+  return /* @__PURE__ */ jsxs191("div", { className: clsx_default("lib-xplat-badge", size, className), children: [
     children,
     showBadge && /* @__PURE__ */ jsx298("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
   ] });
@@ -5775,6 +5790,7 @@ var Button = (props) => {
   const {
     children,
     type = "primary",
+    size = "md",
     colorNamespace = "xplat",
     color = "black",
     colorDepth,
@@ -5790,7 +5806,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx300(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, colorClass, className),
+      className: clsx_default("lib-xplat-button", type, size, colorClass, className),
       disabled,
       ...rest,
       children
@@ -5811,8 +5827,77 @@ var Card = ({ children, title, className }) => {
 Card.displayName = "Card";
 var Card_default = Card;
 
-// src/components/Chart/Chart.tsx
+// src/components/CardTab/CardTab.tsx
 import React2 from "react";
+
+// src/components/CardTab/CardTabPanel.tsx
+import { jsx as jsx302 } from "react/jsx-runtime";
+var CardTabPanel = (props) => {
+  const { children, columns = 3, className } = props;
+  return /* @__PURE__ */ jsx302(
+    "div",
+    {
+      className: clsx_default("card-tab-panel", className),
+      style: { "--card-tab-columns": columns },
+      children
+    }
+  );
+};
+CardTabPanel.displayName = "CardTab.Panel";
+var CardTabPanel_default = CardTabPanel;
+
+// src/components/CardTab/CardTab.tsx
+import { jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
+var CardTabRoot = (props) => {
+  const {
+    tabs,
+    activeValue: activeValueProp,
+    onChange,
+    size = "md",
+    children,
+    className
+  } = props;
+  const isControlled = activeValueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(tabs[0]?.value ?? "");
+  const activeValue = isControlled ? activeValueProp : uncontrolledValue;
+  const handleTabClick = (tab) => {
+    if (!isControlled) {
+      setUncontrolledValue(tab.value);
+    }
+    onChange?.(tab);
+  };
+  const panels = React2.Children.toArray(children).filter(
+    (child) => React2.isValidElement(child) && child.type === CardTabPanel_default
+  );
+  const activePanel = panels.find(
+    (panel) => panel.props.value === activeValue
+  );
+  return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-card-tab", size, className), children: [
+    /* @__PURE__ */ jsx303("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+      const isActive = tab.value === activeValue;
+      return /* @__PURE__ */ jsx303(
+        "button",
+        {
+          className: clsx_default("card-tab-trigger", isActive && "active"),
+          onClick: () => handleTabClick(tab),
+          role: "tab",
+          "aria-selected": isActive,
+          children: tab.title
+        },
+        tab.value
+      );
+    }) }),
+    /* @__PURE__ */ jsx303("div", { className: "card-tab-body", children: activePanel })
+  ] });
+};
+CardTabRoot.displayName = "CardTab";
+var CardTab = Object.assign(CardTabRoot, {
+  Panel: CardTabPanel_default
+});
+var CardTab_default = CardTab;
+
+// src/components/Chart/Chart.tsx
+import React3 from "react";
 import {
   ArcElement,
   BarElement,
@@ -5955,7 +6040,7 @@ var getIndexColorByPreset = (preset, index) => {
 };
 
 // src/components/Chart/Chart.tsx
-import { jsx as jsx302 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -5970,12 +6055,12 @@ ChartJS.register(
 );
 var Chart = (props) => {
   const { type, data, labels } = props;
-  const chartInstanceRef = React2.useRef(null);
-  const containerRef = React2.useRef(null);
-  const chartRef = React2.useCallback((instance) => {
+  const chartInstanceRef = React3.useRef(null);
+  const containerRef = React3.useRef(null);
+  const chartRef = React3.useCallback((instance) => {
     chartInstanceRef.current = instance ?? null;
   }, []);
-  const datasets = React2.useMemo(() => {
+  const datasets = React3.useMemo(() => {
     const pallette = getChartColorPreset(type);
     return Object.entries(data).map(([key, values], index) => {
       const uniqueColors = getIndexColorByPreset(pallette, index);
@@ -6029,21 +6114,21 @@ var Chart = (props) => {
       formatter: (value) => `${value}`
     };
   }
-  const renderChart = React2.useMemo(() => {
+  const renderChart = React3.useMemo(() => {
     switch (type) {
       case "line":
-        return /* @__PURE__ */ jsx302(Line, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ jsx304(Line, { ref: chartRef, data: chartData, options });
       case "bar":
-        return /* @__PURE__ */ jsx302(Bar, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ jsx304(Bar, { ref: chartRef, data: chartData, options });
       case "pie":
-        return /* @__PURE__ */ jsx302(Pie, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ jsx304(Pie, { ref: chartRef, data: chartData, options });
       case "doughnut":
-        return /* @__PURE__ */ jsx302(Doughnut, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ jsx304(Doughnut, { ref: chartRef, data: chartData, options });
       default:
         return null;
     }
   }, [chartData, options, type]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!containerRef.current || !chartInstanceRef.current) return;
     const observer = new ResizeObserver(() => {
       requestAnimationFrame(() => {
@@ -6053,7 +6138,7 @@ var Chart = (props) => {
     observer.observe(containerRef.current);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx302("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
+  return /* @__PURE__ */ jsx304("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
 };
 Chart.displayName = "Chart";
 var Chart_default = Chart;
@@ -6072,7 +6157,7 @@ var gridColumns = {
 };
 
 // src/components/CheckBox/CheckBox.tsx
-import { jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs195 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     colorNamespace = "xplat",
@@ -6083,6 +6168,7 @@ var CheckBox = (props) => {
     onChange,
     className,
     disabled,
+    size = "md",
     ...rest
   } = props;
   const handleChange = (e) => {
@@ -6097,8 +6183,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs194("label", { className: clsx_default("lib-xplat-checkbox", className), children: [
-    /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsxs195("label", { className: clsx_default("lib-xplat-checkbox", size, className), children: [
+    /* @__PURE__ */ jsx305(
       "input",
       {
         type: "checkbox",
@@ -6108,15 +6194,15 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx303("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx303("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx303(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ jsx303("span", { className: "label", children: label })
+    /* @__PURE__ */ jsx305("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx305("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx305(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ jsx305("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx304 } from "react/jsx-runtime";
+import { jsx as jsx306 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
@@ -6124,6 +6210,7 @@ var Chip = (props) => {
     color = "black",
     colorDepth,
     type = "primary",
+    size = "md",
     className
   } = props;
   const colorClass = getColorClass(
@@ -6131,29 +6218,29 @@ var Chip = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx304("div", { className: clsx_default("lib-xplat-chip", type, colorClass, className), children });
+  return /* @__PURE__ */ jsx306("div", { className: clsx_default("lib-xplat-chip", type, size, colorClass, className), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React5 from "react";
+import React6 from "react";
 
 // src/components/Input/Input.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/components/Input/InputValidations.tsx
-import { jsx as jsx305, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx307, jsxs as jsxs196 } from "react/jsx-runtime";
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs195("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx305(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx305(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx305(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx305(ErrorIcon_default, {})
+  return /* @__PURE__ */ jsxs196("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ jsxs196("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ jsx307(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ jsx307(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ jsx307(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ jsx307(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ jsx305("div", { className: "message", children: message })
+    /* @__PURE__ */ jsx307("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -6194,7 +6281,7 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx306, jsxs as jsxs196 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs197 } from "react/jsx-runtime";
 import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
@@ -6243,11 +6330,12 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = React3.forwardRef((props, ref) => {
+var Input = React4.forwardRef((props, ref) => {
   const {
     value,
     onChange,
     type = "text",
+    size = "md",
     suffix,
     className,
     disabled,
@@ -6269,13 +6357,13 @@ var Input = React3.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs196("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
-    /* @__PURE__ */ jsxs196(
+  return /* @__PURE__ */ jsxs197("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+    /* @__PURE__ */ jsxs197(
       "div",
       {
-        className: clsx_default("lib-xplat-input", disabled ? "disabled" : void 0),
+        className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ jsx306(
+          /* @__PURE__ */ jsx308(
             "input",
             {
               ...inputProps,
@@ -6286,11 +6374,11 @@ var Input = React3.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ jsx306("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ jsx308("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx306("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
+    validations && /* @__PURE__ */ jsx308("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
       InputValidations_default,
       {
         ...validation,
@@ -6303,20 +6391,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-import React4 from "react";
-import { jsx as jsx307 } from "react/jsx-runtime";
-var PasswordInput = React4.forwardRef(
+import React5 from "react";
+import { jsx as jsx309 } from "react/jsx-runtime";
+var PasswordInput = React5.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = React4.useState(false);
+    const [isView, setIsView] = React5.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ jsx307(
+    return /* @__PURE__ */ jsx309(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ jsx307("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx307(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx307(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ jsx309("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx309(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx309(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -6329,8 +6417,8 @@ var PasswordInput_default = PasswordInput;
 // src/components/DatePicker/InputDatePicker/index.tsx
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { jsx as jsx308 } from "react/jsx-runtime";
-var Suffix = () => /* @__PURE__ */ jsx308("div", { children: /* @__PURE__ */ jsx308(CalenderIcon_default, {}) });
+import { jsx as jsx310 } from "react/jsx-runtime";
+var Suffix = () => /* @__PURE__ */ jsx310("div", { children: /* @__PURE__ */ jsx310(CalenderIcon_default, {}) });
 var InputDatePicker = (props) => {
   const { value, onChange, disabled, ...rest } = props;
   const handleChange = (date) => {
@@ -6344,22 +6432,22 @@ var InputDatePicker = (props) => {
     const d = String(date.getDate()).padStart(2, "0");
     return `${y}/${m}/${d}`;
   };
-  const CustomInput = React5.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ jsx308("div", { onClick, children: /* @__PURE__ */ jsx308(
+  const CustomInput = React6.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ jsx310("div", { onClick, children: /* @__PURE__ */ jsx310(
     Input_default,
     {
       value: formatDate(value),
-      suffix: /* @__PURE__ */ jsx308(Suffix, {}),
+      suffix: /* @__PURE__ */ jsx310(Suffix, {}),
       disabled
     }
   ) }));
   CustomInput.displayName = "InputDatePickerCustomInput";
-  return /* @__PURE__ */ jsx308("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ jsx308(
+  return /* @__PURE__ */ jsx310("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ jsx310(
     DatePicker,
     {
       selected: value,
       onChange: handleChange,
       ...rest,
-      customInput: /* @__PURE__ */ jsx308(CustomInput, {}),
+      customInput: /* @__PURE__ */ jsx310(CustomInput, {}),
       dateFormat: "YYYY/MM/dd"
     }
   ) });
@@ -6368,18 +6456,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React7 from "react";
+import React8 from "react";
 
 // src/components/Modal/Modal.tsx
-import React6 from "react";
+import React7 from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx309 } from "react/jsx-runtime";
+import { jsx as jsx311 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React6.useState(false);
-  const [visible, setVisible] = React6.useState(false);
-  React6.useEffect(() => {
+  const [mounted, setMounted] = React7.useState(false);
+  const [visible, setVisible] = React7.useState(false);
+  React7.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -6393,12 +6481,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal(
-    /* @__PURE__ */ jsx309(
+    /* @__PURE__ */ jsx311(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsx309(
+        children: /* @__PURE__ */ jsx311(
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
@@ -6419,7 +6507,7 @@ var Modal_default = Modal;
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import DatePicker2 from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { jsx as jsx310 } from "react/jsx-runtime";
+import { jsx as jsx312 } from "react/jsx-runtime";
 function getColorValue(ns, color, depth) {
   const nsColors = colors[ns];
   const colorEntry = nsColors[color];
@@ -6445,12 +6533,12 @@ var SingleDatePicker = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx310(
+  return /* @__PURE__ */ jsx312(
     "div",
     {
       className: "lib-xplat-datepicker",
       style: { "--datepicker-active-color": activeColor },
-      children: /* @__PURE__ */ jsx310(
+      children: /* @__PURE__ */ jsx312(
         DatePicker2,
         {
           selected: value,
@@ -6467,10 +6555,10 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import { jsx as jsx311, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx313, jsxs as jsxs198 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type } = props;
-  const [isOpen, setIsOpen] = React7.useState(false);
+  const [isOpen, setIsOpen] = React8.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -6478,11 +6566,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-popup-datepicker", children: [
-    React7.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ jsx311(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ jsxs197("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-popup-datepicker", children: [
+    React8.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ jsx313(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ jsxs198("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ jsx313(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -6491,7 +6579,7 @@ var PopupPicker = (props) => {
             maxDate: props.maxDate
           }
         ),
-        type === "range" && /* @__PURE__ */ jsx311(
+        type === "range" && /* @__PURE__ */ jsx313(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -6502,8 +6590,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs197("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ jsx311(
+      /* @__PURE__ */ jsxs198("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ jsx313(
           Button_default,
           {
             type: "secondary",
@@ -6513,7 +6601,7 @@ var PopupPicker = (props) => {
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ jsx311(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ jsx313(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -6522,8 +6610,8 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React8 from "react";
-import { jsx as jsx312, jsxs as jsxs198 } from "react/jsx-runtime";
+import React9 from "react";
+import { jsx as jsx314, jsxs as jsxs199 } from "react/jsx-runtime";
 function getDatesBetween(start, end) {
   const dates = [];
   const current = new Date(start);
@@ -6547,7 +6635,7 @@ var RangePicker = (props) => {
     color,
     colorDepth
   } = props;
-  const rangeDates = React8.useMemo(
+  const rangeDates = React9.useMemo(
     () => getDatesBetween(startDate, endDate),
     [startDate, endDate]
   );
@@ -6556,10 +6644,10 @@ var RangePicker = (props) => {
     ...color !== void 0 && { color },
     ...colorDepth !== void 0 && { colorDepth }
   };
-  return /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-range-datepicker", children: [
-    /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-range-datepicker-from", children: [
-      /* @__PURE__ */ jsx312("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
-      /* @__PURE__ */ jsx312(
+  return /* @__PURE__ */ jsxs199("div", { className: "lib-xplat-range-datepicker", children: [
+    /* @__PURE__ */ jsxs199("div", { className: "lib-xplat-range-datepicker-from", children: [
+      /* @__PURE__ */ jsx314("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
+      /* @__PURE__ */ jsx314(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -6571,9 +6659,9 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-range-datepicker-to", children: [
-      /* @__PURE__ */ jsx312("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
-      /* @__PURE__ */ jsx312(
+    /* @__PURE__ */ jsxs199("div", { className: "lib-xplat-range-datepicker-to", children: [
+      /* @__PURE__ */ jsx314("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
+      /* @__PURE__ */ jsx314(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -6591,10 +6679,10 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx313 } from "react/jsx-runtime";
+import { jsx as jsx315 } from "react/jsx-runtime";
 var Divider = (props) => {
   const { orientation = "horizontal", className } = props;
-  return /* @__PURE__ */ jsx313(
+  return /* @__PURE__ */ jsx315(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation, className),
@@ -6607,15 +6695,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-import React9 from "react";
+import React10 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx314, jsxs as jsxs199 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs200 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
-  const [mounted, setMounted] = React9.useState(false);
-  const [visible, setVisible] = React9.useState(false);
-  React9.useEffect(() => {
+  const [mounted, setMounted] = React10.useState(false);
+  const [visible, setVisible] = React10.useState(false);
+  React10.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -6630,12 +6718,12 @@ var Drawer = (props) => {
   const stateClass = visible ? "enter" : "exit";
   const widthValue = typeof width === "number" ? `${width}px` : width;
   return createPortal2(
-    /* @__PURE__ */ jsx314(
+    /* @__PURE__ */ jsx316(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsxs199(
+        children: /* @__PURE__ */ jsxs200(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, stateClass),
@@ -6644,11 +6732,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ jsxs199("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ jsx314("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ jsx314("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ jsxs200("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ jsx316("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ jsx316("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ jsx314("div", { className: "drawer-body", children })
+              /* @__PURE__ */ jsx316("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -6661,16 +6749,16 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-import React12 from "react";
+import React13 from "react";
 
 // src/tokens/hooks/useAutoPosition.ts
-import React10 from "react";
+import React11 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React10.useState({
+  const [position, setPosition] = React11.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React10.useCallback(() => {
+  const calculatePosition = React11.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -6692,7 +6780,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     calculatePosition();
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
@@ -6702,9 +6790,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React11 from "react";
+import React12 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -6727,17 +6815,17 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx315, jsxs as jsxs200 } from "react/jsx-runtime";
+import { jsx as jsx317, jsxs as jsxs201 } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children, className } = props;
-  const [isOpen, setIsOpen] = React12.useState(false);
-  const [mounted, setMounted] = React12.useState(false);
-  const [visible, setVisible] = React12.useState(false);
-  const triggerRef = React12.useRef(null);
-  const menuRef = React12.useRef(null);
+  const [isOpen, setIsOpen] = React13.useState(false);
+  const [mounted, setMounted] = React13.useState(false);
+  const [visible, setVisible] = React13.useState(false);
+  const triggerRef = React13.useRef(null);
+  const menuRef = React13.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -6752,8 +6840,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs200("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
-    /* @__PURE__ */ jsx315(
+  return /* @__PURE__ */ jsxs201("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+    /* @__PURE__ */ jsx317(
       "div",
       {
         ref: triggerRef,
@@ -6762,14 +6850,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx315(
+    mounted && /* @__PURE__ */ jsx317(
       "div",
       {
         ref: menuRef,
         className: clsx_default("dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ jsx315(
+        children: items.map((item) => /* @__PURE__ */ jsx317(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -6791,23 +6879,23 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx316, jsxs as jsxs201 } from "react/jsx-runtime";
+import { jsx as jsx318, jsxs as jsxs202 } from "react/jsx-runtime";
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
-  return /* @__PURE__ */ jsxs201("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
-    icon && /* @__PURE__ */ jsx316("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ jsx316("div", { className: "empty-icon", children: /* @__PURE__ */ jsx316("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx316("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__ */ jsx316("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ jsx316("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ jsx316("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+    icon && /* @__PURE__ */ jsx318("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ jsx318("div", { className: "empty-icon", children: /* @__PURE__ */ jsx318("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx318("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__ */ jsx318("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ jsx318("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ jsx318("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-import React13 from "react";
-import { jsx as jsx317, jsxs as jsxs202 } from "react/jsx-runtime";
+import React14 from "react";
+import { jsx as jsx319, jsxs as jsxs203 } from "react/jsx-runtime";
 var FileUpload = (props) => {
   const {
     accept,
@@ -6818,8 +6906,8 @@ var FileUpload = (props) => {
     description,
     className
   } = props;
-  const [isDragOver, setIsDragOver] = React13.useState(false);
-  const inputRef = React13.useRef(null);
+  const [isDragOver, setIsDragOver] = React14.useState(false);
+  const inputRef = React14.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -6849,7 +6937,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ jsxs202(
+  return /* @__PURE__ */ jsxs203(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }, className),
@@ -6858,7 +6946,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ jsx317(
+        /* @__PURE__ */ jsx319(
           "input",
           {
             ref: inputRef,
@@ -6868,9 +6956,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ jsx317("div", { className: "upload-icon", children: /* @__PURE__ */ jsx317(UploadIcon_default, {}) }),
-        /* @__PURE__ */ jsx317("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ jsx317("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ jsx319("div", { className: "upload-icon", children: /* @__PURE__ */ jsx319(UploadIcon_default, {}) }),
+        /* @__PURE__ */ jsx319("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ jsx319("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -6879,19 +6967,19 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/Select/Select.tsx
-import React16 from "react";
+import React17 from "react";
 
 // src/components/Select/context.ts
-import React14 from "react";
-var SelectContext = React14.createContext(null);
+import React15 from "react";
+var SelectContext = React15.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React15 from "react";
-import { jsx as jsx318 } from "react/jsx-runtime";
+import React16 from "react";
+import { jsx as jsx320 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false, className } = props;
-  const ctx = React15.useContext(context_default);
+  const ctx = React16.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -6900,7 +6988,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ jsx318(
+  return /* @__PURE__ */ jsx320(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled", className),
@@ -6921,7 +7009,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx319, jsxs as jsxs203 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs204 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -6930,28 +7018,29 @@ var SelectRoot = (props) => {
     onChange,
     children,
     disabled = false,
-    error = false
+    error = false,
+    size = "md"
   } = props;
-  const itemChildren = React16.Children.toArray(children).filter(
-    (child) => React16.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = React17.Children.toArray(children).filter(
+    (child) => React17.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React16.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React16.useState(null);
-  const controlledLabel = React16.useMemo(() => {
+  const [isOpen, setOpen] = React17.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React17.useState(null);
+  const controlledLabel = React17.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 = React16.useRef(null);
-  const contentRef = React16.useRef(null);
-  const [mounted, setMounted] = React16.useState(false);
-  const [visible, setVisible] = React16.useState(false);
-  React16.useEffect(() => {
+  const triggerRef = React17.useRef(null);
+  const contentRef = React17.useRef(null);
+  const [mounted, setMounted] = React17.useState(false);
+  const [visible, setVisible] = React17.useState(false);
+  React17.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -6961,12 +7050,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React16.useCallback(() => setOpen(true), []);
-  const close = React16.useCallback(() => setOpen(false), []);
-  const toggle = React16.useCallback(() => setOpen((prev) => !prev), []);
+  const open = React17.useCallback(() => setOpen(true), []);
+  const close = React17.useCallback(() => setOpen(false), []);
+  const toggle = React17.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React16.useCallback(
+  const setSelected = React17.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -6975,7 +7064,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = React16.useMemo(
+  const ctxValue = React17.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -6996,17 +7085,18 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx319(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs203(
+  return /* @__PURE__ */ jsx321(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs204(
     "div",
     {
       className: clsx_default(
         "lib-xplat-select",
+        size,
         disabled && "disabled",
         error && "error",
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ jsxs203(
+        /* @__PURE__ */ jsxs204(
           "div",
           {
             ref: triggerRef,
@@ -7030,7 +7120,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ jsx319(
+              /* @__PURE__ */ jsx321(
                 "span",
                 {
                   className: clsx_default(
@@ -7040,18 +7130,18 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ jsx319(
+              /* @__PURE__ */ jsx321(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx319(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ jsx321(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx319(
+        mounted && /* @__PURE__ */ jsx321(
           "div",
           {
             className: clsx_default("select-content", position.direction, stateClass),
@@ -7072,10 +7162,10 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React18 from "react";
+import React19 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React17 from "react";
+import React18 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -7143,40 +7233,40 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React17.createElement(tag, props);
+    return React18.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React17.createElement(tag, props, ...children);
+  return React18.createElement(tag, props, ...children);
 }
 function htmlToReactProgressive(root, typedLen, rangeMap) {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : React17.createElement(React17.Fragment, { key: idx }, node);
+    return node == null ? null : React18.createElement(React18.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 }
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import { jsx as jsx320 } from "react/jsx-runtime";
+import { jsx as jsx322 } from "react/jsx-runtime";
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React18.useState(0);
-  const doneCalledRef = React18.useRef(false);
-  const { doc, rangeMap, totalLength } = React18.useMemo(() => {
+  const [typedLen, setTypedLen] = React19.useState(0);
+  const doneCalledRef = React19.useRef(false);
+  const { doc, rangeMap, totalLength } = React19.useMemo(() => {
     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]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -7184,33 +7274,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React18.useMemo(
+  const parsed = React19.useMemo(
     () => htmlToReactProgressive(doc.body, typedLen, rangeMap),
     [doc.body, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ jsx320("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ jsx322("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React19 from "react";
-import { jsx as jsx321, jsxs as jsxs204 } from "react/jsx-runtime";
+import React20 from "react";
+import { jsx as jsx323, jsxs as jsxs205 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = React19.useState();
-  React19.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = React20.useState();
+  React20.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -7219,7 +7309,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React19.useRef(null);
+  const inputRef = React20.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -7232,8 +7322,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs204("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ jsx321(
+  return /* @__PURE__ */ jsxs205("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ jsx323(
       "input",
       {
         type: "file",
@@ -7243,13 +7333,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ jsxs204("div", { className: "action-bar", children: [
-      /* @__PURE__ */ jsx321("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx321(UploadIcon_default, {}) }),
-      /* @__PURE__ */ jsx321("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx321(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ jsxs205("div", { className: "action-bar", children: [
+      /* @__PURE__ */ jsx323("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx323(UploadIcon_default, {}) }),
+      /* @__PURE__ */ jsx323("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx323(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ jsx321("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx321("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs204("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ jsx321("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx321(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx321("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ jsx323("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx323("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs205("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ jsx323("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx323(ImageIcon_default, {}) }),
+      /* @__PURE__ */ jsx323("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -7257,7 +7347,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx322, jsxs as jsxs205 } from "react/jsx-runtime";
+import { jsx as jsx324, jsxs as jsxs206 } from "react/jsx-runtime";
 function getPageRange(current, totalPages, siblingCount) {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -7290,6 +7380,7 @@ var Pagination = (props) => {
     pageSize = 10,
     siblingCount = 1,
     onChange,
+    size = "md",
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
@@ -7307,19 +7398,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs205("nav", { className: clsx_default("lib-xplat-pagination", className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ jsx322(
+  return /* @__PURE__ */ jsxs206("nav", { className: clsx_default("lib-xplat-pagination", size, className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ jsx324(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx322(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ jsx324(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ jsx322("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx322(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx324("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx324(
         "button",
         {
           className: clsx_default("page-btn", colorClass, { active: page === current }),
@@ -7330,14 +7421,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ jsx322(
+    /* @__PURE__ */ jsx324(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx322(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ jsx324(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -7346,17 +7437,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-import React20 from "react";
-import { jsx as jsx323, jsxs as jsxs206 } from "react/jsx-runtime";
+import React21 from "react";
+import { jsx as jsx325, jsxs as jsxs207 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React20.useRef(null);
-  const triggerRef = React20.useRef(null);
-  const [localOpen, setLocalOpen] = React20.useState(false);
-  const [eventTrigger, setEventTrigger] = React20.useState(false);
+  const popRef = React21.useRef(null);
+  const triggerRef = React21.useRef(null);
+  const [localOpen, setLocalOpen] = React21.useState(false);
+  const [eventTrigger, setEventTrigger] = React21.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -7369,7 +7460,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs206(
+  return /* @__PURE__ */ jsxs207(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -7379,7 +7470,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx323(
+        localOpen && /* @__PURE__ */ jsx325(
           "div",
           {
             className: clsx_default(
@@ -7402,7 +7493,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx324, jsxs as jsxs207 } from "react/jsx-runtime";
+import { jsx as jsx326, jsxs as jsxs208 } from "react/jsx-runtime";
 var Progress = (props) => {
   const {
     value,
@@ -7420,8 +7511,8 @@ var Progress = (props) => {
     colorDepth ?? 500
   );
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs207("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
-    /* @__PURE__ */ jsx324(
+  return /* @__PURE__ */ jsxs208("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
+    /* @__PURE__ */ jsx326(
       "div",
       {
         className: "track",
@@ -7429,7 +7520,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx324(
+        children: /* @__PURE__ */ jsx326(
           "div",
           {
             className: clsx_default("bar", colorClass),
@@ -7438,7 +7529,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ jsxs207("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ jsxs208("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -7448,17 +7539,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-import React21 from "react";
-var RadioGroupContext = React21.createContext(
+import React22 from "react";
+var RadioGroupContext = React22.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React21.useContext(RadioGroupContext);
+  return React22.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx325, jsxs as jsxs208 } from "react/jsx-runtime";
+import { jsx as jsx327, jsxs as jsxs209 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
@@ -7467,9 +7558,11 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
+    size: sizeProp,
     ...rest
   } = props;
   const context = useRadioGroupContext();
+  const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
   const localChecked = isGroup ? context.value === value : rest.checked ?? false;
   const inputProps = context ? { name: context.name, value, onChange: context.onChange } : {
@@ -7482,17 +7575,18 @@ var Radio = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsxs208(
+  return /* @__PURE__ */ jsxs209(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
+        size,
         localChecked ? "checked" : void 0,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx325("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ jsx325(
+        /* @__PURE__ */ jsx327("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx327(
           "div",
           {
             className: clsx_default(
@@ -7500,10 +7594,10 @@ var Radio = (props) => {
               localChecked ? "checked" : void 0,
               colorClass
             ),
-            children: localChecked && /* @__PURE__ */ jsx325("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ jsx327("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ jsx325("span", { children: label })
+        label && /* @__PURE__ */ jsx327("span", { children: label })
       ]
     }
   );
@@ -7512,23 +7606,23 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment, jsx as jsx326 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx328 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx326(Fragment, { children: /* @__PURE__ */ jsx326(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx328(Fragment, { children: /* @__PURE__ */ jsx328(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx327 } from "react/jsx-runtime";
+import { jsx as jsx329 } from "react/jsx-runtime";
 var Skeleton = (props) => {
   const { variant = "text", width, height, className } = props;
   const style = {
     width: typeof width === "number" ? `${width}px` : width,
     height: typeof height === "number" ? `${height}px` : height
   };
-  return /* @__PURE__ */ jsx327(
+  return /* @__PURE__ */ jsx329(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant, className),
@@ -7541,7 +7635,7 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx328, jsxs as jsxs209 } from "react/jsx-runtime";
+import { jsx as jsx330, jsxs as jsxs210 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
@@ -7555,14 +7649,14 @@ var Spinner = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsx330(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, colorClass, className),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ jsxs209("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx328(
+      children: /* @__PURE__ */ jsxs210("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx330(
           "circle",
           {
             className: "track",
@@ -7572,7 +7666,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ jsx328(
+        /* @__PURE__ */ jsx330(
           "circle",
           {
             className: "indicator",
@@ -7591,7 +7685,7 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-import { jsx as jsx329, jsxs as jsxs210 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs211 } from "react/jsx-runtime";
 var Steps = (props) => {
   const {
     items,
@@ -7606,16 +7700,16 @@ var Steps = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx329("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx331("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ jsxs210("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ jsxs210("div", { className: "step-indicator", children: [
-        /* @__PURE__ */ jsx329("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ jsx329(CheckIcon_default, {}) : /* @__PURE__ */ jsx329("span", { children: index + 1 }) }),
-        index < items.length - 1 && /* @__PURE__ */ jsx329("div", { className: clsx_default("step-line", colorClass) })
+    return /* @__PURE__ */ jsxs211("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ jsxs211("div", { className: "step-indicator", children: [
+        /* @__PURE__ */ jsx331("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ jsx331(CheckIcon_default, {}) : /* @__PURE__ */ jsx331("span", { children: index + 1 }) }),
+        index < items.length - 1 && /* @__PURE__ */ jsx331("div", { className: clsx_default("step-line", colorClass) })
       ] }),
-      /* @__PURE__ */ jsxs210("div", { className: "step-content", children: [
-        /* @__PURE__ */ jsx329("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ jsx329("span", { className: "step-description", children: item.description })
+      /* @__PURE__ */ jsxs211("div", { className: "step-content", children: [
+        /* @__PURE__ */ jsx331("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx331("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -7624,8 +7718,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Switch/Switch.tsx
-import React22 from "react";
-import { jsx as jsx330 } from "react/jsx-runtime";
+import React23 from "react";
+import { jsx as jsx332 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -7638,9 +7732,9 @@ var Switch = (props) => {
     colorDepth,
     className
   } = props;
-  const [isAnimating, setIsAnimating] = React22.useState(false);
-  const timeoutRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React23.useState(false);
+  const timeoutRef = React23.useRef(null);
+  React23.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -7660,7 +7754,7 @@ var Switch = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx330(
+  return /* @__PURE__ */ jsx332(
     "div",
     {
       className: clsx_default(
@@ -7674,7 +7768,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx330("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx332("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -7682,14 +7776,14 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-import React24 from "react";
+import React25 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React23 from "react";
-import { jsx as jsx331 } from "react/jsx-runtime";
-var TabItem = React23.forwardRef((props, ref) => {
+import React24 from "react";
+import { jsx as jsx333 } from "react/jsx-runtime";
+var TabItem = React24.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx333(
     "div",
     {
       ref,
@@ -7703,25 +7797,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-import { jsx as jsx332, jsxs as jsxs211 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs212 } from "react/jsx-runtime";
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type } = props;
-  const [underlineStyle, setUnderlineStyle] = React24.useState({
+  const { activeIndex, onChange, tabs, type, size = "md" } = props;
+  const [underlineStyle, setUnderlineStyle] = React25.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React24.useRef([]);
+  const itemRefs = React25.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs211("div", { className: clsx_default("lib-xplat-tab", `type-${type}`), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx332(
+  return /* @__PURE__ */ jsxs212("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ jsx334(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -7733,7 +7827,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx332(
+    type === "toggle" && /* @__PURE__ */ jsx334(
       "div",
       {
         className: "tab-toggle-underline",
@@ -7749,17 +7843,17 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-import React25 from "react";
-var TableContext = React25.createContext(null);
+import React26 from "react";
+var TableContext = React26.createContext(null);
 var useTableContext = () => {
-  const ctx = React25.useContext(TableContext);
+  const ctx = React26.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx335 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     className,
@@ -7769,7 +7863,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx333("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx333(
+  return /* @__PURE__ */ jsx335("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx335(
     TableContext_default.Provider,
     {
       value: {
@@ -7778,7 +7872,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx333("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx335("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -7786,40 +7880,40 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx334 } from "react/jsx-runtime";
+import { jsx as jsx336 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx334("tbody", { className, children });
+  return /* @__PURE__ */ jsx336("tbody", { className, children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React28 from "react";
+import React29 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React26 from "react";
-var TableHeadContext = React26.createContext(
+import React27 from "react";
+var TableHeadContext = React27.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React26.useContext(TableHeadContext);
+  const ctx = React27.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React27 from "react";
-var TableRowContext = React27.createContext(null);
+import React28 from "react";
+var TableRowContext = React28.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React27.useContext(TableRowContext);
+  const ctx = React28.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx335 } from "react/jsx-runtime";
+import { jsx as jsx337 } from "react/jsx-runtime";
 var TableCell = (props) => {
   const {
     children,
@@ -7831,9 +7925,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React28.useState(0);
-  const cellRef = React28.useRef(null);
-  const calculateLeft = React28.useCallback(() => {
+  const [left, setLeft] = React29.useState(0);
+  const cellRef = React29.useRef(null);
+  const calculateLeft = React29.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -7842,7 +7936,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -7860,7 +7954,7 @@ var TableCell = (props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx337(
     CellTag,
     {
       ref: cellRef,
@@ -7882,21 +7976,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx336 } from "react/jsx-runtime";
+import { jsx as jsx338 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx336(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx336("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ jsx338(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx338("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React29 from "react";
-import { jsx as jsx337 } from "react/jsx-runtime";
+import React30 from "react";
+import { jsx as jsx339 } from "react/jsx-runtime";
 var TableRow = (props) => {
   const {
     children,
@@ -7909,7 +8003,7 @@ var TableRow = (props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React29.useState([]);
+  const [stickyCells, setStickyCells] = React30.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -7921,7 +8015,7 @@ var TableRow = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx337(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsx339(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx339(
     "tr",
     {
       className: clsx_default(
@@ -7941,11 +8035,12 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx338, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx340, jsxs as jsxs213 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
     onClose,
+    size = "md",
     colorNamespace = "xplat",
     color = "neutral",
     colorDepth,
@@ -7956,21 +8051,21 @@ var Tag = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsxs212("span", { className: clsx_default("lib-xplat-tag", colorClass, className), children: [
-    /* @__PURE__ */ jsx338("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ jsx338("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx338(XIcon_default, {}) })
+  return /* @__PURE__ */ jsxs213("span", { className: clsx_default("lib-xplat-tag", size, colorClass, className), children: [
+    /* @__PURE__ */ jsx340("span", { className: "tag-label", children }),
+    onClose && /* @__PURE__ */ jsx340("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx340(XIcon_default, {}) })
   ] });
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-import React30 from "react";
-import { jsx as jsx339 } from "react/jsx-runtime";
-var TextArea = React30.forwardRef(
+import React31 from "react";
+import { jsx as jsx341 } from "react/jsx-runtime";
+var TextArea = React31.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = React30.useRef(null);
+    const localRef = React31.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -7990,21 +8085,21 @@ var TextArea = React30.forwardRef(
         onChange(event);
       }
     };
-    React30.useEffect(() => {
+    React31.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx339("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx339(
+    return /* @__PURE__ */ jsx341("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx341(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ jsx339(
+        children: /* @__PURE__ */ jsx341(
           "textarea",
           {
             ...textareaProps,
@@ -8022,25 +8117,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-import React31 from "react";
+import React32 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx340, jsxs as jsxs213 } from "react/jsx-runtime";
-var ToastContext = React31.createContext(null);
+import { jsx as jsx342, jsxs as jsxs214 } from "react/jsx-runtime";
+var ToastContext = React32.createContext(null);
 var useToast = () => {
-  const ctx = React31.useContext(ToastContext);
+  const ctx = React32.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = React31.useRef(null);
-  const [height, setHeight] = React31.useState(void 0);
-  React31.useEffect(() => {
+  const ref = React32.useRef(null);
+  const [height, setHeight] = React32.useState(void 0);
+  React32.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx340(
+  return /* @__PURE__ */ jsx342(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -8048,15 +8143,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ jsxs213(
+      children: /* @__PURE__ */ jsxs214(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx340("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx340("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx342("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx342("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -8067,13 +8162,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React31.useState([]);
-  const [removing, setRemoving] = React31.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React31.useState(false);
-  React31.useEffect(() => {
+  const [toasts, setToasts] = React32.useState([]);
+  const [removing, setRemoving] = React32.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React32.useState(false);
+  React32.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React31.useCallback((id) => {
+  const remove = React32.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -8084,7 +8179,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React31.useCallback(
+  const toast = React32.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -8094,10 +8189,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ jsxs213(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs214(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal3(
-      /* @__PURE__ */ jsx340("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx340(
+      /* @__PURE__ */ jsx342("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx342(
         ToastItemComponent,
         {
           item: t,
@@ -8113,8 +8208,8 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React32 from "react";
-import { jsx as jsx341, jsxs as jsxs214 } from "react/jsx-runtime";
+import React33 from "react";
+import { jsx as jsx343, jsxs as jsxs215 } from "react/jsx-runtime";
 var Tooltip2 = (props) => {
   const {
     type = "primary",
@@ -8124,24 +8219,24 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = React32.useRef(null);
+  const iconRef = React33.useRef(null);
   const colorClass = getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsxs214("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx341("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx341("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+  return /* @__PURE__ */ jsxs215("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ jsx343("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ jsx343("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
   ] });
 };
 Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-import React33 from "react";
-import { jsx as jsx342, jsxs as jsxs215 } from "react/jsx-runtime";
-var Video = React33.forwardRef((props, ref) => {
+import React34 from "react";
+import { jsx as jsx344, jsxs as jsxs216 } from "react/jsx-runtime";
+var Video = React34.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -8155,10 +8250,10 @@ var Video = React33.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = React33.useRef(null);
-  const [isPlaying, setIsPlaying] = React33.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React33.useState(false);
-  const setRefs = React33.useCallback(
+  const videoRef = React34.useRef(null);
+  const [isPlaying, setIsPlaying] = React34.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React34.useState(false);
+  const setRefs = React34.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -8186,7 +8281,7 @@ var Video = React33.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ jsxs215(
+  return /* @__PURE__ */ jsxs216(
     "div",
     {
       className: clsx_default(
@@ -8195,7 +8290,7 @@ var Video = React33.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx342(
+        /* @__PURE__ */ jsx344(
           "video",
           {
             ref: setRefs,
@@ -8212,7 +8307,7 @@ var Video = React33.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ jsx342(
+        showCustomOverlay && /* @__PURE__ */ jsx344(
           "button",
           {
             type: "button",
@@ -8223,7 +8318,7 @@ var Video = React33.forwardRef((props, ref) => {
             ),
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ jsx342(PauseIcon_default, {}) : /* @__PURE__ */ jsx342("span", { className: "play-icon", children: /* @__PURE__ */ jsx342(PlayCircleIcon_default, {}) })
+            children: isPlaying ? /* @__PURE__ */ jsx344(PauseIcon_default, {}) : /* @__PURE__ */ jsx344("span", { className: "play-icon", children: /* @__PURE__ */ jsx344(PlayCircleIcon_default, {}) })
           }
         )
       ]
@@ -8234,25 +8329,25 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx343 } from "react/jsx-runtime";
+import { jsx as jsx345 } from "react/jsx-runtime";
 var FullGrid = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx343("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  return /* @__PURE__ */ jsx345("div", { className: clsx_default("lib-xplat-full-grid", className), children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx344 } from "react/jsx-runtime";
+import { jsx as jsx346 } from "react/jsx-runtime";
 var FullScreen = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx344("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  return /* @__PURE__ */ jsx346("div", { className: clsx_default("lib-xplat-full-screen", className), children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx345 } from "react/jsx-runtime";
+import { jsx as jsx347 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -8269,35 +8364,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx345("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx347("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-import { jsx as jsx346, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx348, jsxs as jsxs217 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ jsxs216("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx346("div", { children: logo }),
-    /* @__PURE__ */ jsx346("div", { children: centerContent }),
-    /* @__PURE__ */ jsx346("div", { children: rightContent })
+  return /* @__PURE__ */ jsxs217("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ jsx348("div", { children: logo }),
+    /* @__PURE__ */ jsx348("div", { children: centerContent }),
+    /* @__PURE__ */ jsx348("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment2, jsx as jsx347, jsxs as jsxs217 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx349, jsxs as jsxs218 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx347("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs217("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx347(Fragment2, { children: sideBar }),
-    /* @__PURE__ */ jsxs217("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx347("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ jsx349("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs218("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx349(Fragment2, { children: sideBar }),
+    /* @__PURE__ */ jsxs218("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ jsx349("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -8306,31 +8401,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-import React35 from "react";
+import React36 from "react";
 
 // src/layout/SideBar/SideBarContext.tsx
-import React34 from "react";
-var SideBarContext = React34.createContext(null);
+import React35 from "react";
+var SideBarContext = React35.createContext(null);
 var useSideBarContext = () => {
-  const ctx = React34.useContext(SideBarContext);
+  const ctx = React35.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = React35.useState(true);
+  const [isOpen, setIsOpen] = React36.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx348(
+  return /* @__PURE__ */ jsx350(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx348(
+      children: /* @__PURE__ */ jsx350(
         "div",
         {
           className: clsx_default(
@@ -8405,6 +8500,7 @@ export {
   CameraIcon_default as CameraIcon,
   CameraOffIcon_default as CameraOffIcon,
   Card_default as Card,
+  CardTab_default as CardTab,
   CastIcon_default as CastIcon,
   Chart_default as Chart,
   CheckBox_default as CheckBox,