@x-plat/design-system 0.1.5 → 0.2.0

package/dist/index.cjs

@@ -88,6 +88,7 @@ __export(index_exports, {
   CameraIcon: () => CameraIcon_default,
   CameraOffIcon: () => CameraOffIcon_default,
   Card: () => Card_default,
+  CardTab: () => CardTab_default,
   CastIcon: () => CastIcon_default,
   Chart: () => Chart_default,
   CheckBox: () => CheckBox_default,
@@ -386,6 +387,7 @@ __export(index_exports, {
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
+var import_tokens2 = require("@x-plat/tokens-default/tokens.css");
 
 // src/components/Accordion/Accordion.tsx
 var import_react = __toESM(require("react"), 1);
@@ -5858,7 +5860,7 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
 );
 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;
@@ -5909,26 +5911,37 @@ var AccordionItem = ({ item, isOpen, onToggle }) => {
   ] });
 };
 var Accordion = (props) => {
-  const { items, multiple = false, defaultActiveKeys = [], className } = props;
-  const [activeKeys, setActiveKeys] = import_react.default.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] = import_react.default.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__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
     AccordionItem,
     {
       item,
-      isOpen: activeKeys.has(item.key),
+      isOpen: currentKeys.has(item.key),
       onToggle: () => toggle(item.key)
     },
     item.key
@@ -6123,6 +6136,7 @@ var Badge = (props) => {
     count,
     maxCount = 99,
     dot = false,
+    size = "md",
     colorNamespace = "xplat",
     color = "red",
     colorDepth,
@@ -6135,7 +6149,7 @@ var Badge = (props) => {
   );
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
-  return /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: clsx_default("lib-xplat-badge", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: clsx_default("lib-xplat-badge", size, className), children: [
     children,
     showBadge && /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
   ] });
@@ -6164,6 +6178,7 @@ var Button = (props) => {
   const {
     children,
     type = "primary",
+    size = "md",
     colorNamespace = "xplat",
     color = "black",
     colorDepth,
@@ -6179,7 +6194,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, colorClass, className),
+      className: clsx_default("lib-xplat-button", type, size, colorClass, className),
       disabled,
       ...rest,
       children
@@ -6200,8 +6215,77 @@ var Card = ({ children, title, className }) => {
 Card.displayName = "Card";
 var Card_default = Card;
 
-// src/components/Chart/Chart.tsx
+// src/components/CardTab/CardTab.tsx
 var import_react2 = __toESM(require("react"), 1);
+
+// src/components/CardTab/CardTabPanel.tsx
+var import_jsx_runtime302 = require("react/jsx-runtime");
+var CardTabPanel = (props) => {
+  const { children, columns = 3, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+    "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
+var import_jsx_runtime303 = require("react/jsx-runtime");
+var CardTabRoot = (props) => {
+  const {
+    tabs,
+    activeValue: activeValueProp,
+    onChange,
+    size = "md",
+    children,
+    className
+  } = props;
+  const isControlled = activeValueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = import_react2.default.useState(tabs[0]?.value ?? "");
+  const activeValue = isControlled ? activeValueProp : uncontrolledValue;
+  const handleTabClick = (tab) => {
+    if (!isControlled) {
+      setUncontrolledValue(tab.value);
+    }
+    onChange?.(tab);
+  };
+  const panels = import_react2.default.Children.toArray(children).filter(
+    (child) => import_react2.default.isValidElement(child) && child.type === CardTabPanel_default
+  );
+  const activePanel = panels.find(
+    (panel) => panel.props.value === activeValue
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+      const isActive = tab.value === activeValue;
+      return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        "button",
+        {
+          className: clsx_default("card-tab-trigger", isActive && "active"),
+          onClick: () => handleTabClick(tab),
+          role: "tab",
+          "aria-selected": isActive,
+          children: tab.title
+        },
+        tab.value
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("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
+var import_react3 = __toESM(require("react"), 1);
 var import_chart = require("chart.js");
 var import_chartjs_plugin_datalabels = __toESM(require("chartjs-plugin-datalabels"), 1);
 var import_react_chartjs_2 = require("react-chartjs-2");
@@ -6333,7 +6417,7 @@ var getIndexColorByPreset = (preset, index) => {
 };
 
 // src/components/Chart/Chart.tsx
-var import_jsx_runtime302 = require("react/jsx-runtime");
+var import_jsx_runtime304 = require("react/jsx-runtime");
 import_chart.Chart.register(
   import_chart.CategoryScale,
   import_chart.LinearScale,
@@ -6348,12 +6432,12 @@ import_chart.Chart.register(
 );
 var Chart = (props) => {
   const { type, data, labels } = props;
-  const chartInstanceRef = import_react2.default.useRef(null);
-  const containerRef = import_react2.default.useRef(null);
-  const chartRef = import_react2.default.useCallback((instance) => {
+  const chartInstanceRef = import_react3.default.useRef(null);
+  const containerRef = import_react3.default.useRef(null);
+  const chartRef = import_react3.default.useCallback((instance) => {
     chartInstanceRef.current = instance ?? null;
   }, []);
-  const datasets = import_react2.default.useMemo(() => {
+  const datasets = import_react3.default.useMemo(() => {
     const pallette = getChartColorPreset(type);
     return Object.entries(data).map(([key, values], index) => {
       const uniqueColors = getIndexColorByPreset(pallette, index);
@@ -6407,21 +6491,21 @@ var Chart = (props) => {
       formatter: (value) => `${value}`
     };
   }
-  const renderChart = import_react2.default.useMemo(() => {
+  const renderChart = import_react3.default.useMemo(() => {
     switch (type) {
       case "line":
-        return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(import_react_chartjs_2.Line, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_chartjs_2.Line, { ref: chartRef, data: chartData, options });
       case "bar":
-        return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(import_react_chartjs_2.Bar, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_chartjs_2.Bar, { ref: chartRef, data: chartData, options });
       case "pie":
-        return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(import_react_chartjs_2.Pie, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_chartjs_2.Pie, { ref: chartRef, data: chartData, options });
       case "doughnut":
-        return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(import_react_chartjs_2.Doughnut, { ref: chartRef, data: chartData, options });
+        return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_chartjs_2.Doughnut, { ref: chartRef, data: chartData, options });
       default:
         return null;
     }
   }, [chartData, options, type]);
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (!containerRef.current || !chartInstanceRef.current) return;
     const observer = new ResizeObserver(() => {
       requestAnimationFrame(() => {
@@ -6431,7 +6515,7 @@ var Chart = (props) => {
     observer.observe(containerRef.current);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
+  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
 };
 Chart.displayName = "Chart";
 var Chart_default = Chart;
@@ -6450,7 +6534,7 @@ var gridColumns = {
 };
 
 // src/components/CheckBox/CheckBox.tsx
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_jsx_runtime305 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     colorNamespace = "xplat",
@@ -6461,6 +6545,7 @@ var CheckBox = (props) => {
     onChange,
     className,
     disabled,
+    size = "md",
     ...rest
   } = props;
   const handleChange = (e) => {
@@ -6475,8 +6560,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
       "input",
       {
         type: "checkbox",
@@ -6486,15 +6571,15 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: "label", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-var import_jsx_runtime304 = require("react/jsx-runtime");
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
@@ -6502,6 +6587,7 @@ var Chip = (props) => {
     color = "black",
     colorDepth,
     type = "primary",
+    size = "md",
     className
   } = props;
   const colorClass = getColorClass(
@@ -6509,29 +6595,29 @@ var Chip = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: clsx_default("lib-xplat-chip", type, colorClass, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("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
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/components/Input/InputValidations.tsx
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_jsx_runtime307 = require("react/jsx-runtime");
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(ErrorIcon_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "message", children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -6572,8 +6658,8 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime306 = require("react/jsx-runtime");
-var import_react4 = require("react");
+var import_jsx_runtime308 = require("react/jsx-runtime");
+var import_react5 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -6621,11 +6707,12 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = import_react3.default.forwardRef((props, ref) => {
+var Input = import_react4.default.forwardRef((props, ref) => {
   const {
     value,
     onChange,
     type = "text",
+    size = "md",
     suffix,
     className,
     disabled,
@@ -6647,13 +6734,13 @@ var Input = import_react3.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
       "div",
       {
-        className: clsx_default("lib-xplat-input", disabled ? "disabled" : void 0),
+        className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
             "input",
             {
               ...inputProps,
@@ -6664,11 +6751,11 @@ var Input = import_react3.default.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react4.createElement)(
+    validations && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react5.createElement)(
       InputValidations_default,
       {
         ...validation,
@@ -6681,20 +6768,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_jsx_runtime307 = require("react/jsx-runtime");
-var PasswordInput = import_react5.default.forwardRef(
+var import_react6 = __toESM(require("react"), 1);
+var import_jsx_runtime309 = require("react/jsx-runtime");
+var PasswordInput = import_react6.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = import_react5.default.useState(false);
+    const [isView, setIsView] = import_react6.default.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -6707,8 +6794,8 @@ var PasswordInput_default = PasswordInput;
 // src/components/DatePicker/InputDatePicker/index.tsx
 var import_react_datepicker = __toESM(require("react-datepicker"), 1);
 var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
-var import_jsx_runtime308 = require("react/jsx-runtime");
-var Suffix = () => /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(CalenderIcon_default, {}) });
+var import_jsx_runtime310 = require("react/jsx-runtime");
+var Suffix = () => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(CalenderIcon_default, {}) });
 var InputDatePicker = (props) => {
   const { value, onChange, disabled, ...rest } = props;
   const handleChange = (date) => {
@@ -6722,22 +6809,22 @@ var InputDatePicker = (props) => {
     const d = String(date.getDate()).padStart(2, "0");
     return `${y}/${m}/${d}`;
   };
-  const CustomInput = import_react6.default.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+  const CustomInput = import_react7.default.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
     Input_default,
     {
       value: formatDate(value),
-      suffix: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Suffix, {}),
+      suffix: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(Suffix, {}),
       disabled
     }
   ) }));
   CustomInput.displayName = "InputDatePickerCustomInput";
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
     import_react_datepicker.default,
     {
       selected: value,
       onChange: handleChange,
       ...rest,
-      customInput: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(CustomInput, {}),
+      customInput: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(CustomInput, {}),
       dateFormat: "YYYY/MM/dd"
     }
   ) });
@@ -6746,18 +6833,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 
 // src/components/Modal/Modal.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
-var import_jsx_runtime309 = require("react/jsx-runtime");
+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_react7.default.useState(false);
-  const [visible, setVisible] = import_react7.default.useState(false);
-  import_react7.default.useEffect(() => {
+  const [mounted, setMounted] = import_react8.default.useState(false);
+  const [visible, setVisible] = import_react8.default.useState(false);
+  import_react8.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -6771,12 +6858,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
@@ -6797,7 +6884,7 @@ var Modal_default = Modal;
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react_datepicker3 = __toESM(require("react-datepicker"), 1);
 var import_react_datepicker4 = require("react-datepicker/dist/react-datepicker.css");
-var import_jsx_runtime310 = require("react/jsx-runtime");
+var import_jsx_runtime312 = require("react/jsx-runtime");
 function getColorValue(ns, color, depth) {
   const nsColors = colors[ns];
   const colorEntry = nsColors[color];
@@ -6823,12 +6910,12 @@ var SingleDatePicker = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
     "div",
     {
       className: "lib-xplat-datepicker",
       style: { "--datepicker-active-color": activeColor },
-      children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
         import_react_datepicker3.default,
         {
           selected: value,
@@ -6845,10 +6932,10 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_jsx_runtime313 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type } = props;
-  const [isOpen, setIsOpen] = import_react8.default.useState(false);
+  const [isOpen, setIsOpen] = import_react9.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -6856,11 +6943,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react8.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+    import_react9.default.cloneElement(component, { onClick: handleClick }),
+    /* @__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.jsxs)("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -6869,7 +6956,7 @@ var PopupPicker = (props) => {
             maxDate: props.maxDate
           }
         ),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -6880,8 +6967,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
           Button_default,
           {
             type: "secondary",
@@ -6891,7 +6978,7 @@ var PopupPicker = (props) => {
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -6900,8 +6987,8 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react9 = __toESM(require("react"), 1);
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_react10 = __toESM(require("react"), 1);
+var import_jsx_runtime314 = require("react/jsx-runtime");
 function getDatesBetween(start, end) {
   const dates = [];
   const current = new Date(start);
@@ -6925,7 +7012,7 @@ var RangePicker = (props) => {
     color,
     colorDepth
   } = props;
-  const rangeDates = import_react9.default.useMemo(
+  const rangeDates = import_react10.default.useMemo(
     () => getDatesBetween(startDate, endDate),
     [startDate, endDate]
   );
@@ -6934,10 +7021,10 @@ var RangePicker = (props) => {
     ...color !== void 0 && { color },
     ...colorDepth !== void 0 && { colorDepth }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "lib-xplat-range-datepicker", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "lib-xplat-range-datepicker-from", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
-      /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "lib-xplat-range-datepicker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "lib-xplat-range-datepicker-from", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
+      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -6949,9 +7036,9 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "lib-xplat-range-datepicker-to", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
-      /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "lib-xplat-range-datepicker-to", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
+      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -6969,10 +7056,10 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime313 = require("react/jsx-runtime");
+var import_jsx_runtime315 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { orientation = "horizontal", className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation, className),
@@ -6985,15 +7072,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime314 = require("react/jsx-runtime");
+var import_jsx_runtime316 = 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_react10.default.useState(false);
-  const [visible, setVisible] = import_react10.default.useState(false);
-  import_react10.default.useEffect(() => {
+  const [mounted, setMounted] = import_react11.default.useState(false);
+  const [visible, setVisible] = import_react11.default.useState(false);
+  import_react11.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7008,12 +7095,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_runtime314.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, stateClass),
@@ -7022,11 +7109,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "drawer-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -7039,16 +7126,16 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react11.default.useState({
+  const [position, setPosition] = import_react12.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react11.default.useCallback(() => {
+  const calculatePosition = import_react12.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -7070,7 +7157,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react11.default.useEffect(() => {
+  import_react12.default.useEffect(() => {
     calculatePosition();
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
@@ -7080,9 +7167,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react12.default.useEffect(() => {
+  import_react13.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -7105,17 +7192,17 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime315 = require("react/jsx-runtime");
+var import_jsx_runtime317 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children, className } = props;
-  const [isOpen, setIsOpen] = import_react13.default.useState(false);
-  const [mounted, setMounted] = import_react13.default.useState(false);
-  const [visible, setVisible] = import_react13.default.useState(false);
-  const triggerRef = import_react13.default.useRef(null);
-  const menuRef = import_react13.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react14.default.useState(false);
+  const [mounted, setMounted] = import_react14.default.useState(false);
+  const [visible, setVisible] = import_react14.default.useState(false);
+  const triggerRef = import_react14.default.useRef(null);
+  const menuRef = import_react14.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  import_react13.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7130,8 +7217,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -7140,14 +7227,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime317.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_runtime315.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -7169,23 +7256,23 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime318 = require("react/jsx-runtime");
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime316.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_runtime316.jsx)("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime318.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_runtime318.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_jsx_runtime317 = require("react/jsx-runtime");
+var import_react15 = __toESM(require("react"), 1);
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
     accept,
@@ -7196,8 +7283,8 @@ var FileUpload = (props) => {
     description,
     className
   } = props;
-  const [isDragOver, setIsDragOver] = import_react14.default.useState(false);
-  const inputRef = import_react14.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react15.default.useState(false);
+  const inputRef = import_react15.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -7227,7 +7314,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }, className),
@@ -7236,7 +7323,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
           "input",
           {
             ref: inputRef,
@@ -7246,9 +7333,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(UploadIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -7257,19 +7344,19 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/Select/Select.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react15 = __toESM(require("react"), 1);
-var SelectContext = import_react15.default.createContext(null);
+var import_react16 = __toESM(require("react"), 1);
+var SelectContext = import_react16.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_react17 = __toESM(require("react"), 1);
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false, className } = props;
-  const ctx = import_react16.default.useContext(context_default);
+  const ctx = import_react17.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -7278,7 +7365,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled", className),
@@ -7299,7 +7386,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -7308,28 +7395,29 @@ var SelectRoot = (props) => {
     onChange,
     children,
     disabled = false,
-    error = false
+    error = false,
+    size = "md"
   } = props;
-  const itemChildren = import_react17.default.Children.toArray(children).filter(
-    (child) => import_react17.default.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = import_react18.default.Children.toArray(children).filter(
+    (child) => import_react18.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react17.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react17.default.useState(null);
-  const controlledLabel = import_react17.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react18.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react18.default.useState(null);
+  const controlledLabel = import_react18.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_react17.default.useRef(null);
-  const contentRef = import_react17.default.useRef(null);
-  const [mounted, setMounted] = import_react17.default.useState(false);
-  const [visible, setVisible] = import_react17.default.useState(false);
-  import_react17.default.useEffect(() => {
+  const triggerRef = import_react18.default.useRef(null);
+  const contentRef = import_react18.default.useRef(null);
+  const [mounted, setMounted] = import_react18.default.useState(false);
+  const [visible, setVisible] = import_react18.default.useState(false);
+  import_react18.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react17.default.useEffect(() => {
+  import_react18.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7339,12 +7427,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react17.default.useCallback(() => setOpen(true), []);
-  const close = import_react17.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react17.default.useCallback(() => setOpen((prev) => !prev), []);
+  const open = import_react18.default.useCallback(() => setOpen(true), []);
+  const close = import_react18.default.useCallback(() => setOpen(false), []);
+  const toggle = import_react18.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react17.default.useCallback(
+  const setSelected = import_react18.default.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -7353,7 +7441,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react17.default.useMemo(
+  const ctxValue = import_react18.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -7374,17 +7462,18 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)(
     "div",
     {
       className: clsx_default(
         "lib-xplat-select",
+        size,
         disabled && "disabled",
         error && "error",
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)(
           "div",
           {
             ref: triggerRef,
@@ -7408,7 +7497,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
                 "span",
                 {
                   className: clsx_default(
@@ -7418,18 +7507,18 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
           "div",
           {
             className: clsx_default("select-content", position.direction, stateClass),
@@ -7450,10 +7539,10 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -7521,40 +7610,40 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react18.default.createElement(tag, props);
+    return import_react19.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react18.default.createElement(tag, props, ...children);
+  return import_react19.default.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 : import_react18.default.createElement(import_react18.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react19.default.createElement(import_react19.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 }
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_jsx_runtime322 = require("react/jsx-runtime");
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react19.default.useState(0);
-  const doneCalledRef = import_react19.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react19.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react20.default.useState(0);
+  const doneCalledRef = import_react20.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react20.default.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]);
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -7562,33 +7651,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react19.default.useMemo(
+  const parsed = import_react20.default.useMemo(
     () => htmlToReactProgressive(doc.body, typedLen, rangeMap),
     [doc.body, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_react21 = __toESM(require("react"), 1);
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = import_react20.default.useState();
-  import_react20.default.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = import_react21.default.useState();
+  import_react21.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -7597,7 +7686,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react20.default.useRef(null);
+  const inputRef = import_react21.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -7610,8 +7699,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
       "input",
       {
         type: "file",
@@ -7621,13 +7710,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "action-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(UploadIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "action-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(UploadIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(ImageIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -7635,7 +7724,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime322 = require("react/jsx-runtime");
+var import_jsx_runtime324 = require("react/jsx-runtime");
 function getPageRange(current, totalPages, siblingCount) {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -7668,6 +7757,7 @@ var Pagination = (props) => {
     pageSize = 10,
     siblingCount = 1,
     onChange,
+    size = "md",
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
@@ -7685,19 +7775,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime324.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_runtime322.jsx)(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
         "button",
         {
           className: clsx_default("page-btn", colorClass, { active: page === current }),
@@ -7708,14 +7798,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime324.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_runtime322.jsx)(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -7724,17 +7814,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_jsx_runtime323 = require("react/jsx-runtime");
+var import_react22 = __toESM(require("react"), 1);
+var import_jsx_runtime325 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react21.default.useRef(null);
-  const triggerRef = import_react21.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react21.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react21.default.useState(false);
+  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);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -7747,7 +7837,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -7757,7 +7847,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
           "div",
           {
             className: clsx_default(
@@ -7780,7 +7870,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_jsx_runtime326 = require("react/jsx-runtime");
 var Progress = (props) => {
   const {
     value,
@@ -7798,8 +7888,8 @@ var Progress = (props) => {
     colorDepth ?? 500
   );
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
       "div",
       {
         className: "track",
@@ -7807,7 +7897,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
           "div",
           {
             className: clsx_default("bar", colorClass),
@@ -7816,7 +7906,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -7826,17 +7916,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react22 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react22.default.createContext(
+var import_react23 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react23.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react22.default.useContext(RadioGroupContext);
+  return import_react23.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime325 = require("react/jsx-runtime");
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
@@ -7845,9 +7935,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 } : {
@@ -7860,17 +7952,18 @@ var Radio = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
+        size,
         localChecked ? "checked" : void 0,
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
           "div",
           {
             className: clsx_default(
@@ -7878,10 +7971,10 @@ var Radio = (props) => {
               localChecked ? "checked" : void 0,
               colorClass
             ),
-            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("span", { children: label })
       ]
     }
   );
@@ -7890,23 +7983,23 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(import_jsx_runtime326.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(import_jsx_runtime328.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_jsx_runtime329 = require("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__ */ (0, import_jsx_runtime327.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant, className),
@@ -7919,7 +8012,7 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime330 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
@@ -7933,14 +8026,14 @@ var Spinner = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, colorClass, className),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
           "circle",
           {
             className: "track",
@@ -7950,7 +8043,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
           "circle",
           {
             className: "indicator",
@@ -7969,7 +8062,7 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime331 = require("react/jsx-runtime");
 var Steps = (props) => {
   const {
     items,
@@ -7984,16 +8077,16 @@ var Steps = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: "step-indicator", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("span", { children: index + 1 }) }),
-        index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: clsx_default("step-line", colorClass) })
+    return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("div", { className: "step-indicator", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("span", { children: index + 1 }) }),
+        index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("div", { className: clsx_default("step-line", colorClass) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: "step-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("span", { className: "step-description", children: item.description })
+      /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("div", { className: "step-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -8002,8 +8095,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Switch/Switch.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_react24 = __toESM(require("react"), 1);
+var import_jsx_runtime332 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -8016,9 +8109,9 @@ var Switch = (props) => {
     colorDepth,
     className
   } = props;
-  const [isAnimating, setIsAnimating] = import_react23.default.useState(false);
-  const timeoutRef = import_react23.default.useRef(null);
-  import_react23.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react24.default.useState(false);
+  const timeoutRef = import_react24.default.useRef(null);
+  import_react24.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -8038,7 +8131,7 @@ var Switch = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
     "div",
     {
       className: clsx_default(
@@ -8052,7 +8145,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -8060,14 +8153,14 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react24 = __toESM(require("react"), 1);
-var import_jsx_runtime331 = require("react/jsx-runtime");
-var TabItem = import_react24.default.forwardRef((props, ref) => {
+var import_react25 = __toESM(require("react"), 1);
+var import_jsx_runtime333 = require("react/jsx-runtime");
+var TabItem = import_react25.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
     {
       ref,
@@ -8081,25 +8174,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime334 = require("react/jsx-runtime");
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react25.default.useState({
+  const { activeIndex, onChange, tabs, type, size = "md" } = props;
+  const [underlineStyle, setUnderlineStyle] = import_react26.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react25.default.useRef([]);
+  const itemRefs = import_react26.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react25.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -8111,7 +8204,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -8127,17 +8220,17 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-var import_react26 = __toESM(require("react"), 1);
-var TableContext = import_react26.default.createContext(null);
+var import_react27 = __toESM(require("react"), 1);
+var TableContext = import_react27.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react26.default.useContext(TableContext);
+  const ctx = import_react27.default.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
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     className,
@@ -8147,7 +8240,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -8156,7 +8249,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -8164,40 +8257,40 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("tbody", { className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("tbody", { className, children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react27 = __toESM(require("react"), 1);
-var TableHeadContext = import_react27.default.createContext(
+var import_react28 = __toESM(require("react"), 1);
+var TableHeadContext = import_react28.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react27.default.useContext(TableHeadContext);
+  const ctx = import_react28.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react28 = __toESM(require("react"), 1);
-var TableRowContext = import_react28.default.createContext(null);
+var import_react29 = __toESM(require("react"), 1);
+var TableRowContext = import_react29.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react28.default.useContext(TableRowContext);
+  const ctx = import_react29.default.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
-var import_jsx_runtime335 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var TableCell = (props) => {
   const {
     children,
@@ -8209,9 +8302,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react29.default.useState(0);
-  const cellRef = import_react29.default.useRef(null);
-  const calculateLeft = import_react29.default.useCallback(() => {
+  const [left, setLeft] = import_react30.default.useState(0);
+  const cellRef = import_react30.default.useRef(null);
+  const calculateLeft = import_react30.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -8220,7 +8313,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react29.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -8238,7 +8331,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__ */ (0, import_jsx_runtime335.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -8260,21 +8353,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_react31 = __toESM(require("react"), 1);
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var TableRow = (props) => {
   const {
     children,
@@ -8287,7 +8380,7 @@ var TableRow = (props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react30.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react31.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -8299,7 +8392,7 @@ var TableRow = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -8319,11 +8412,12 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
     onClose,
+    size = "md",
     colorNamespace = "xplat",
     color = "neutral",
     colorDepth,
@@ -8334,21 +8428,21 @@ var Tag = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)("span", { className: clsx_default("lib-xplat-tag", colorClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(XIcon_default, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)("span", { className: clsx_default("lib-xplat-tag", size, colorClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "tag-label", children }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(XIcon_default, {}) })
   ] });
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react31 = __toESM(require("react"), 1);
-var import_jsx_runtime339 = require("react/jsx-runtime");
-var TextArea = import_react31.default.forwardRef(
+var import_react32 = __toESM(require("react"), 1);
+var import_jsx_runtime341 = require("react/jsx-runtime");
+var TextArea = import_react32.default.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = import_react31.default.useRef(null);
+    const localRef = import_react32.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -8368,21 +8462,21 @@ var TextArea = import_react31.default.forwardRef(
         onChange(event);
       }
     };
-    import_react31.default.useEffect(() => {
+    import_react32.default.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__ */ (0, import_jsx_runtime339.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
           "textarea",
           {
             ...textareaProps,
@@ -8400,25 +8494,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-var import_react32 = __toESM(require("react"), 1);
+var import_react33 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime340 = require("react/jsx-runtime");
-var ToastContext = import_react32.default.createContext(null);
+var import_jsx_runtime342 = require("react/jsx-runtime");
+var ToastContext = import_react33.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react32.default.useContext(ToastContext);
+  const ctx = import_react33.default.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 = import_react32.default.useRef(null);
-  const [height, setHeight] = import_react32.default.useState(void 0);
-  import_react32.default.useEffect(() => {
+  const ref = import_react33.default.useRef(null);
+  const [height, setHeight] = import_react33.default.useState(void 0);
+  import_react33.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -8426,15 +8520,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -8445,13 +8539,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react32.default.useState([]);
-  const [removing, setRemoving] = import_react32.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react32.default.useState(false);
-  import_react32.default.useEffect(() => {
+  const [toasts, setToasts] = import_react33.default.useState([]);
+  const [removing, setRemoving] = import_react33.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react33.default.useState(false);
+  import_react33.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react32.default.useCallback((id) => {
+  const remove = import_react33.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -8462,7 +8556,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react32.default.useCallback(
+  const toast = import_react33.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -8472,10 +8566,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -8491,8 +8585,8 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react33 = __toESM(require("react"), 1);
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_react34 = __toESM(require("react"), 1);
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var Tooltip2 = (props) => {
   const {
     type = "primary",
@@ -8502,24 +8596,24 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = import_react33.default.useRef(null);
+  const iconRef = import_react34.default.useRef(null);
   const colorClass = getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
   ] });
 };
 Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-var import_react34 = __toESM(require("react"), 1);
-var import_jsx_runtime342 = require("react/jsx-runtime");
-var Video = import_react34.default.forwardRef((props, ref) => {
+var import_react35 = __toESM(require("react"), 1);
+var import_jsx_runtime344 = require("react/jsx-runtime");
+var Video = import_react35.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -8533,10 +8627,10 @@ var Video = import_react34.default.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = import_react34.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react34.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react34.default.useState(false);
-  const setRefs = import_react34.default.useCallback(
+  const videoRef = import_react35.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react35.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react35.default.useState(false);
+  const setRefs = import_react35.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -8564,7 +8658,7 @@ var Video = import_react34.default.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -8573,7 +8667,7 @@ var Video = import_react34.default.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
           "video",
           {
             ref: setRefs,
@@ -8590,7 +8684,7 @@ var Video = import_react34.default.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
           "button",
           {
             type: "button",
@@ -8601,7 +8695,7 @@ var Video = import_react34.default.forwardRef((props, ref) => {
             ),
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(PlayCircleIcon_default, {}) })
+            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(PlayCircleIcon_default, {}) })
           }
         )
       ]
@@ -8612,25 +8706,25 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-var import_jsx_runtime344 = require("react/jsx-runtime");
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_jsx_runtime347 = require("react/jsx-runtime");
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -8647,35 +8741,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { children: logo }),
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { children: centerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { children: rightContent })
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { children: centerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(import_jsx_runtime347.Fragment, { children: sideBar }),
-    /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(import_jsx_runtime349.Fragment, { children: sideBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -8684,31 +8778,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-var import_react36 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 
 // src/layout/SideBar/SideBarContext.tsx
-var import_react35 = __toESM(require("react"), 1);
-var SideBarContext = import_react35.default.createContext(null);
+var import_react36 = __toESM(require("react"), 1);
+var SideBarContext = import_react36.default.createContext(null);
 var useSideBarContext = () => {
-  const ctx = import_react35.default.useContext(SideBarContext);
+  const ctx = import_react36.default.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-var import_jsx_runtime348 = require("react/jsx-runtime");
+var import_jsx_runtime350 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = import_react36.default.useState(true);
+  const [isOpen, setIsOpen] = import_react37.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
         "div",
         {
           className: clsx_default(
@@ -8784,6 +8878,7 @@ var SideBar_default = SideBar;
   CameraIcon,
   CameraOffIcon,
   Card,
+  CardTab,
   CastIcon,
   Chart,
   CheckBox,