@x-plat/design-system 0.2.4 → 0.3.2

package/dist/index.cjs

@@ -317,6 +317,7 @@ __export(index_exports, {
   SunIcon: () => SunIcon_default,
   SunriseIcon: () => SunriseIcon_default,
   SunsetIcon: () => SunsetIcon_default,
+  Swiper: () => Swiper_default,
   Switch: () => Switch_default,
   Tab: () => Tab_default,
   Table: () => Table_default,
@@ -5978,11 +5979,6 @@ var Alert = (props) => {
 Alert.displayName = "Alert";
 var Alert_default = Alert;
 
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
-};
-
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime297 = require("react/jsx-runtime");
 var Avatar = (props) => {
@@ -5991,17 +5987,10 @@ var Avatar = (props) => {
     alt,
     name,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
   return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("lib-xplat-avatar", size4, className), children: src ? /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
@@ -6017,17 +6006,10 @@ var Badge = (props) => {
     maxCount = 99,
     dot = false,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "red",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-red-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const showBadge = dot || count2 !== void 0 && count2 > 0;
   const displayCount = count2 !== void 0 && count2 > maxCount ? `${maxCount}+` : count2;
   return /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: clsx_default("lib-xplat-badge", size4, className), children: [
@@ -6060,19 +6042,12 @@ var Button = (props) => {
     children,
     type = "primary",
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-black",
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
     "button",
     {
@@ -20703,10 +20678,7 @@ var gridColumns = {
 var import_jsx_runtime306 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     checked,
     label,
     onChange,
@@ -20718,11 +20690,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const mainColor = color2;
   const uncheckedClasses = `unchecked`;
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
@@ -20750,19 +20718,12 @@ var import_jsx_runtime307 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-black",
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size4, colorClass, className), children });
 };
 Chip.displayName = "Chip";
@@ -31756,19 +31717,11 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_jsx_runtime314 = require("react/jsx-runtime");
-function getColorValue(ns, color2, depth) {
-  const nsColors = colors[ns];
-  const colorEntry = nsColors[color2];
-  if (typeof colorEntry === "string") return colorEntry;
-  return colorEntry[String(depth)] ?? "";
-}
 var SingleDatePicker = (props) => {
   const {
     value,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     highlightDates,
     ...rest
   } = props;
@@ -31776,16 +31729,11 @@ var SingleDatePicker = (props) => {
     if (Array.isArray(date)) return;
     onChange?.(date);
   };
-  const activeColor = getColorValue(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
     "div",
     {
       className: "lib-xplat-datepicker",
-      style: { "--datepicker-active-color": activeColor },
+      style: { "--datepicker-active-color": `var(--${color2})` },
       children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
         DatePicker,
         {
@@ -31843,13 +31791,12 @@ var PopupPicker = (props) => {
           Button_default,
           {
             type: "secondary",
-            color: "neutral",
-            colorDepth: 400,
+            color: "xplat-neutral-400",
             onClick: handleClose,
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "primary", color: "xplat-blue-500", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -31879,19 +31826,12 @@ var RangePicker = (props) => {
     onChange,
     minDate,
     maxDate,
-    colorNamespace,
-    color: color2,
-    colorDepth
+    color: color2
   } = props;
   const rangeDates = import_react15.default.useMemo(
     () => getDatesBetween(startDate, endDate),
     [startDate, endDate]
   );
-  const colorProps = {
-    ...colorNamespace !== void 0 && { colorNamespace },
-    ...color2 !== void 0 && { color: color2 },
-    ...colorDepth !== void 0 && { colorDepth }
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-range-datepicker", children: [
     /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-range-datepicker-from", children: [
       /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
@@ -31903,7 +31843,7 @@ var RangePicker = (props) => {
           minDate,
           maxDate: endDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] }),
@@ -31917,7 +31857,7 @@ var RangePicker = (props) => {
           minDate: startDate,
           maxDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] })
@@ -32629,17 +32569,10 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -32749,17 +32682,10 @@ var Progress = (props) => {
     max: max3 = 100,
     size: size4 = "md",
     showLabel = false,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const percentage = Math.min(100, Math.max(0, value / max3 * 100));
   return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: clsx_default("lib-xplat-progress", size4, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
@@ -32805,10 +32731,7 @@ var Radio = (props) => {
     label,
     value,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     size: sizeProp,
     ...rest
   } = props;
@@ -32821,11 +32744,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
     "label",
     {
@@ -32890,17 +32809,10 @@ var import_jsx_runtime332 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
     "div",
     {
@@ -32942,17 +32854,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index3) => {
     const status = index3 < current ? "completed" : index3 === current ? "active" : "pending";
     return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("step-item", status), children: [
@@ -32970,9 +32875,270 @@ var Steps = (props) => {
 Steps.displayName = "Steps";
 var Steps_default = Steps;
 
-// src/components/Switch/Switch.tsx
+// src/components/Swiper/Swiper.tsx
 var import_react29 = __toESM(require("react"), 1);
 var import_jsx_runtime334 = require("react/jsx-runtime");
+var Swiper = (props) => {
+  const {
+    auto = false,
+    swiperRef,
+    renderItems = [],
+    viewItemCount = 1,
+    maxItems,
+    loop = false,
+    spaceBetween = 16,
+    showProgress = false,
+    autoplayDelay = 3e3,
+    speed = 300,
+    slideBy = 1,
+    index: indexProp,
+    onChange,
+    className
+  } = props;
+  const items = maxItems ? renderItems.slice(0, maxItems) : renderItems;
+  const totalSlides = items.length;
+  const canSlide = totalSlides > viewItemCount;
+  const maxIndex = Math.max(0, totalSlides - viewItemCount);
+  const useLoop = loop && canSlide;
+  const cloneCount = useLoop ? totalSlides : 0;
+  const extendedItems = import_react29.default.useMemo(() => {
+    if (!useLoop) return items;
+    return [...items, ...items, ...items];
+  }, [items, useLoop]);
+  const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
+  const [innerIndex, setInnerIndex] = import_react29.default.useState(
+    useLoop ? cloneCount + initialIdx : initialIdx
+  );
+  const [isDragging, setIsDragging] = import_react29.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react29.default.useState(0);
+  const [animated, setAnimated] = import_react29.default.useState(true);
+  const [containerWidth, setContainerWidth] = import_react29.default.useState(0);
+  const containerRef = import_react29.default.useRef(null);
+  const startXRef = import_react29.default.useRef(0);
+  const startTimeRef = import_react29.default.useRef(0);
+  const autoplayTimerRef = import_react29.default.useRef(null);
+  import_react29.default.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    ro.observe(el);
+    setContainerWidth(el.offsetWidth);
+    return () => ro.disconnect();
+  }, []);
+  const slideStep = containerWidth > 0 ? (containerWidth - (viewItemCount - 1) * spaceBetween) / viewItemCount + spaceBetween : 0;
+  const transformPx = -(innerIndex * slideStep) + dragOffset;
+  const getRealIndex = (inner) => {
+    if (!useLoop) return inner;
+    return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
+  };
+  const realIndex = getRealIndex(innerIndex);
+  const moveToInner = import_react29.default.useCallback(
+    (idx, withAnim = true) => {
+      if (useLoop) {
+        setInnerIndex((prev) => {
+          const real = ((prev - cloneCount) % totalSlides + totalSlides) % totalSlides;
+          const canonical = cloneCount + real;
+          if (prev !== canonical) {
+            const delta = idx - prev;
+            setAnimated(withAnim);
+            return canonical + delta;
+          }
+          setAnimated(withAnim);
+          return idx;
+        });
+      } else {
+        setAnimated(withAnim);
+        setInnerIndex(idx);
+      }
+    },
+    [useLoop, cloneCount, totalSlides]
+  );
+  const handleTransitionEnd = import_react29.default.useCallback(() => {
+    if (!useLoop) return;
+    const real = getRealIndex(innerIndex);
+    const canonical = cloneCount + real;
+    if (innerIndex !== canonical) {
+      moveToInner(canonical, false);
+    }
+    onChange?.(Math.min(real, maxIndex));
+  }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange, moveToInner]);
+  const slideTo = import_react29.default.useCallback(
+    (logicalIndex) => {
+      if (!canSlide) return;
+      const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
+      const target = useLoop ? cloneCount + clamped : clamped;
+      moveToInner(target, true);
+      if (!useLoop) onChange?.(clamped);
+    },
+    [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
+  );
+  const slideNext = import_react29.default.useCallback(() => {
+    if (!canSlide) return;
+    const nextInner = innerIndex + slideBy;
+    if (useLoop) {
+      moveToInner(nextInner, true);
+    } else {
+      moveToInner(Math.min(nextInner, maxIndex), true);
+    }
+  }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
+  const slidePrev = import_react29.default.useCallback(() => {
+    if (!canSlide) return;
+    const prevInner = innerIndex - slideBy;
+    if (useLoop) {
+      moveToInner(prevInner, true);
+    } else {
+      moveToInner(Math.max(prevInner, 0), true);
+    }
+  }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
+  import_react29.default.useEffect(() => {
+    if (indexProp === void 0) return;
+    const clamped = Math.max(0, Math.min(indexProp, maxIndex));
+    const target = useLoop ? cloneCount + clamped : clamped;
+    if (target !== innerIndex) {
+      moveToInner(target, true);
+    }
+  }, [indexProp]);
+  import_react29.default.useImperativeHandle(swiperRef, () => ({
+    slidePrev,
+    slideNext,
+    slideTo
+  }));
+  import_react29.default.useEffect(() => {
+    if (!auto || !canSlide) return;
+    autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
+    return () => {
+      if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+    };
+  }, [auto, autoplayDelay, slideNext, canSlide]);
+  const pauseAutoplay = () => {
+    if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+  };
+  const getClientX = (e) => {
+    if ("touches" in e) return e.touches[0]?.clientX ?? 0;
+    return e.clientX;
+  };
+  const handleDragStart = (e) => {
+    if (!canSlide) return;
+    if ("button" in e && e.button !== 0) return;
+    pauseAutoplay();
+    setIsDragging(true);
+    setAnimated(false);
+    startXRef.current = getClientX(e);
+    startTimeRef.current = Date.now();
+  };
+  import_react29.default.useEffect(() => {
+    if (!isDragging) return;
+    const handleMove = (e) => {
+      setDragOffset(getClientX(e) - startXRef.current);
+    };
+    const handleEnd = () => {
+      setIsDragging(false);
+      const absDrag = Math.abs(dragOffset);
+      const elapsed = Date.now() - startTimeRef.current;
+      const velocity = absDrag / elapsed;
+      if ((absDrag > 30 || velocity > 0.3) && slideStep > 0) {
+        const rawCount = Math.max(1, Math.round(absDrag / slideStep));
+        const count2 = Math.max(slideBy, Math.round(rawCount / slideBy) * slideBy);
+        const direction = dragOffset < 0 ? 1 : -1;
+        const nextInner = innerIndex + direction * count2;
+        if (useLoop) {
+          moveToInner(nextInner, true);
+        } else {
+          moveToInner(Math.max(0, Math.min(nextInner, maxIndex)), true);
+        }
+      } else {
+        setAnimated(true);
+      }
+      setDragOffset(0);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleEnd);
+    window.addEventListener("touchmove", handleMove, { passive: true });
+    window.addEventListener("touchend", handleEnd);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleEnd);
+      window.removeEventListener("touchmove", handleMove);
+      window.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
+  const slideWidthPercent = 100 / viewItemCount;
+  const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
+  const totalSteps = Math.ceil((maxIndex + 1) / slideBy);
+  const currentStep = Math.min(
+    Math.floor(realIndex / slideBy),
+    totalSteps - 1
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: clsx_default("lib-xplat-swiper", className), ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      "div",
+      {
+        className: "lib-xplat-swiper__viewport",
+        onMouseDown: handleDragStart,
+        onTouchStart: handleDragStart,
+        children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+          "div",
+          {
+            className: clsx_default(
+              "lib-xplat-swiper__track",
+              animated && !isDragging && "transitioning"
+            ),
+            style: {
+              transform: `translateX(${transformPx}px)`,
+              transitionDuration: isDragging || !animated ? "0ms" : `${speed}ms`,
+              gap: `${spaceBetween}px`
+            },
+            onTransitionEnd: handleTransitionEnd,
+            children: extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+              "div",
+              {
+                className: "lib-xplat-swiper__slide",
+                style: {
+                  minWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`,
+                  maxWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`
+                },
+                children: item
+              },
+              idx
+            ))
+          }
+        )
+      }
+    ),
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      "span",
+      {
+        className: "lib-xplat-swiper__progress-fill",
+        style: {
+          width: `${(currentStep + 1) / totalSteps * 100}%`,
+          transitionDuration: `${speed}ms`
+        }
+      }
+    ) }) }),
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      "button",
+      {
+        className: clsx_default(
+          "lib-xplat-swiper__dot",
+          i === currentStep && "active"
+        ),
+        onClick: () => slideTo(i * slideBy),
+        "aria-label": `\uC2AC\uB77C\uC774\uB4DC ${i + 1}`
+      },
+      i
+    )) })
+  ] });
+};
+Swiper.displayName = "Swiper";
+var Swiper_default = Swiper;
+
+// src/components/Switch/Switch.tsx
+var import_react30 = __toESM(require("react"), 1);
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -32980,15 +33146,12 @@ var Switch = (props) => {
     size: size4 = "md",
     disabled,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const [isAnimating, setIsAnimating] = import_react29.default.useState(false);
-  const timeoutRef = import_react29.default.useRef(null);
-  import_react29.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react30.default.useState(false);
+  const timeoutRef = import_react30.default.useRef(null);
+  import_react30.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -33003,12 +33166,8 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+  const colorClass = color2;
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
     "div",
     {
       className: clsx_default(
@@ -33022,7 +33181,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -33030,14 +33189,14 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_jsx_runtime335 = require("react/jsx-runtime");
-var TabItem = import_react30.default.forwardRef((props, ref) => {
+var import_react31 = __toESM(require("react"), 1);
+var import_jsx_runtime336 = require("react/jsx-runtime");
+var TabItem = import_react31.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
     "div",
     {
       ref,
@@ -33051,25 +33210,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size: size4 = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react31.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react32.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react31.default.useRef([]);
+  const itemRefs = import_react32.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size4), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size4), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -33081,7 +33240,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -33097,17 +33256,17 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-var import_react32 = __toESM(require("react"), 1);
-var TableContext = import_react32.default.createContext(null);
+var import_react33 = __toESM(require("react"), 1);
+var TableContext = import_react33.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react32.default.useContext(TableContext);
+  const ctx = import_react33.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_runtime337 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     className,
@@ -33117,7 +33276,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -33126,7 +33285,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -33134,40 +33293,40 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("tbody", { className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("tbody", { className, children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react35 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react33 = __toESM(require("react"), 1);
-var TableHeadContext = import_react33.default.createContext(
+var import_react34 = __toESM(require("react"), 1);
+var TableHeadContext = import_react34.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react33.default.useContext(TableHeadContext);
+  const ctx = import_react34.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react34 = __toESM(require("react"), 1);
-var TableRowContext = import_react34.default.createContext(null);
+var import_react35 = __toESM(require("react"), 1);
+var TableRowContext = import_react35.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react34.default.useContext(TableRowContext);
+  const ctx = import_react35.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_runtime339 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var TableCell = (props) => {
   const {
     children,
@@ -33179,9 +33338,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react35.default.useState(0);
-  const cellRef = import_react35.default.useRef(null);
-  const calculateLeft = import_react35.default.useCallback(() => {
+  const [left, setLeft] = import_react36.default.useState(0);
+  const cellRef = import_react36.default.useRef(null);
+  const calculateLeft = import_react36.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -33190,7 +33349,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -33208,7 +33367,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_runtime339.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -33230,47 +33389,40 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime341.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_react36 = __toESM(require("react"), 1);
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_react37 = __toESM(require("react"), 1);
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var TableRow = (props) => {
   const {
     children,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-900",
     type = "secondary",
     isHover,
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react36.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react37.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  const colorClass = color2;
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -33290,38 +33442,31 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
     onClose,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "neutral",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(XIcon_default, {}) })
+  const colorClass = color2;
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("span", { className: "tag-label", children }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(XIcon_default, {}) })
   ] });
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_jsx_runtime343 = require("react/jsx-runtime");
-var TextArea = import_react37.default.forwardRef(
+var import_react38 = __toESM(require("react"), 1);
+var import_jsx_runtime344 = require("react/jsx-runtime");
+var TextArea = import_react38.default.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = import_react37.default.useRef(null);
+    const localRef = import_react38.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -33341,21 +33486,21 @@ var TextArea = import_react37.default.forwardRef(
         onChange(event);
       }
     };
-    import_react37.default.useEffect(() => {
+    import_react38.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_runtime343.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
           "textarea",
           {
             ...textareaProps,
@@ -33373,25 +33518,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-var import_react38 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_react_dom6 = require("react-dom");
-var import_jsx_runtime344 = require("react/jsx-runtime");
-var ToastContext = import_react38.default.createContext(null);
+var import_jsx_runtime345 = require("react/jsx-runtime");
+var ToastContext = import_react39.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react38.default.useContext(ToastContext);
+  const ctx = import_react39.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_react38.default.useRef(null);
-  const [height, setHeight] = import_react38.default.useState(void 0);
-  import_react38.default.useEffect(() => {
+  const ref = import_react39.default.useRef(null);
+  const [height, setHeight] = import_react39.default.useState(void 0);
+  import_react39.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -33399,15 +33544,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -33418,13 +33563,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react38.default.useState([]);
-  const [removing, setRemoving] = import_react38.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react38.default.useState(false);
-  import_react38.default.useEffect(() => {
+  const [toasts, setToasts] = import_react39.default.useState([]);
+  const [removing, setRemoving] = import_react39.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react39.default.useState(false);
+  import_react39.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react38.default.useCallback((id) => {
+  const remove = import_react39.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -33435,7 +33580,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react38.default.useCallback(
+  const toast = import_react39.default.useCallback(
     (type, message2, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message: message2 }]);
@@ -33445,10 +33590,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && (0, import_react_dom6.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -33464,36 +33609,29 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react39 = __toESM(require("react"), 1);
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_react40 = __toESM(require("react"), 1);
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var Tooltip2 = (props) => {
   const {
     type = "primary",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-900",
     description,
     children
   } = props;
-  const iconRef = import_react39.default.useRef(null);
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+  const iconRef = import_react40.default.useRef(null);
+  const colorClass = color2;
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ (0, import_jsx_runtime346.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_react40 = __toESM(require("react"), 1);
-var import_jsx_runtime346 = require("react/jsx-runtime");
-var Video = import_react40.default.forwardRef((props, ref) => {
+var import_react41 = __toESM(require("react"), 1);
+var import_jsx_runtime347 = require("react/jsx-runtime");
+var Video = import_react41.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -33507,10 +33645,10 @@ var Video = import_react40.default.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = import_react40.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react40.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react40.default.useState(false);
-  const setRefs = import_react40.default.useCallback(
+  const videoRef = import_react41.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react41.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react41.default.useState(false);
+  const setRefs = import_react41.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -33538,7 +33676,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -33547,7 +33685,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
           "video",
           {
             ref: setRefs,
@@ -33564,7 +33702,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
           "button",
           {
             type: "button",
@@ -33575,7 +33713,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
             ),
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
+            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PlayCircleIcon_default, {}) })
           }
         )
       ]
@@ -33586,25 +33724,25 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime348.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_runtime348 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime349.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_runtime349 = require("react/jsx-runtime");
+var import_jsx_runtime350 = require("react/jsx-runtime");
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -33621,35 +33759,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime350.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_runtime350 = require("react/jsx-runtime");
+var import_jsx_runtime351 = require("react/jsx-runtime");
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { children: logo }),
-    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { children: centerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { children: rightContent })
+  return /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { children: centerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-var import_jsx_runtime351 = require("react/jsx-runtime");
+var import_jsx_runtime352 = require("react/jsx-runtime");
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(import_jsx_runtime351.Fragment, { children: sideBar }),
-    /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(import_jsx_runtime352.Fragment, { children: sideBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -33658,31 +33796,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-var import_react42 = __toESM(require("react"), 1);
+var import_react43 = __toESM(require("react"), 1);
 
 // src/layout/SideBar/SideBarContext.tsx
-var import_react41 = __toESM(require("react"), 1);
-var SideBarContext = import_react41.default.createContext(null);
+var import_react42 = __toESM(require("react"), 1);
+var SideBarContext = import_react42.default.createContext(null);
 var useSideBarContext = () => {
-  const ctx = import_react41.default.useContext(SideBarContext);
+  const ctx = import_react42.default.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-var import_jsx_runtime352 = require("react/jsx-runtime");
+var import_jsx_runtime353 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = import_react42.default.useState(true);
+  const [isOpen, setIsOpen] = import_react43.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(
         "div",
         {
           className: clsx_default(
@@ -33985,6 +34123,7 @@ var SideBar_default = SideBar;
   SunIcon,
   SunriseIcon,
   SunsetIcon,
+  Swiper,
   Switch,
   Tab,
   Table,