@x-plat/design-system 0.2.4 → 0.3.2

package/dist/index.js

@@ -5596,11 +5596,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
 import { jsx as jsx297 } from "react/jsx-runtime";
 var Avatar = (props) => {
@@ -5609,17 +5604,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__ */ jsx297("div", { className: clsx_default("lib-xplat-avatar", size4, className), children: src ? /* @__PURE__ */ jsx297("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx297("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ jsx297("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx297("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" }) }) }) });
 };
@@ -5635,17 +5623,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__ */ jsxs191("div", { className: clsx_default("lib-xplat-badge", size4, className), children: [
@@ -5678,19 +5659,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__ */ jsx300(
     "button",
     {
@@ -20321,10 +20295,7 @@ var gridColumns = {
 import { jsx as jsx306, jsxs as jsxs195 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     checked,
     label,
     onChange,
@@ -20336,11 +20307,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";
@@ -20368,19 +20335,12 @@ import { jsx as jsx307 } from "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__ */ jsx307("div", { className: clsx_default("lib-xplat-chip", type, size4, colorClass, className), children });
 };
 Chip.displayName = "Chip";
@@ -31374,19 +31334,11 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import { jsx as jsx314 } from "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;
@@ -31394,16 +31346,11 @@ var SingleDatePicker = (props) => {
     if (Array.isArray(date)) return;
     onChange?.(date);
   };
-  const activeColor = getColorValue(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
   return /* @__PURE__ */ jsx314(
     "div",
     {
       className: "lib-xplat-datepicker",
-      style: { "--datepicker-active-color": activeColor },
+      style: { "--datepicker-active-color": `var(--${color2})` },
       children: /* @__PURE__ */ jsx314(
         DatePicker,
         {
@@ -31461,13 +31408,12 @@ var PopupPicker = (props) => {
           Button_default,
           {
             type: "secondary",
-            color: "neutral",
-            colorDepth: 400,
+            color: "xplat-neutral-400",
             onClick: handleClose,
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ jsx315(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ jsx315(Button_default, { type: "primary", color: "xplat-blue-500", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -31497,19 +31443,12 @@ var RangePicker = (props) => {
     onChange,
     minDate,
     maxDate,
-    colorNamespace,
-    color: color2,
-    colorDepth
+    color: color2
   } = props;
   const rangeDates = React13.useMemo(
     () => getDatesBetween(startDate, endDate),
     [startDate, endDate]
   );
-  const colorProps = {
-    ...colorNamespace !== void 0 && { colorNamespace },
-    ...color2 !== void 0 && { color: color2 },
-    ...colorDepth !== void 0 && { colorDepth }
-  };
   return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-range-datepicker", children: [
     /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-range-datepicker-from", children: [
       /* @__PURE__ */ jsx316("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
@@ -31521,7 +31460,7 @@ var RangePicker = (props) => {
           minDate,
           maxDate: endDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] }),
@@ -31535,7 +31474,7 @@ var RangePicker = (props) => {
           minDate: startDate,
           maxDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] })
@@ -32247,17 +32186,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) => {
@@ -32367,17 +32299,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__ */ jsxs209("div", { className: clsx_default("lib-xplat-progress", size4, className), children: [
     /* @__PURE__ */ jsx328(
@@ -32423,10 +32348,7 @@ var Radio = (props) => {
     label,
     value,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     size: sizeProp,
     ...rest
   } = props;
@@ -32439,11 +32361,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsxs210(
     "label",
     {
@@ -32508,17 +32426,10 @@ import { jsx as jsx332, jsxs as jsxs211 } from "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__ */ jsx332(
     "div",
     {
@@ -32560,17 +32471,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__ */ jsx333("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index3) => {
     const status = index3 < current ? "completed" : index3 === current ? "active" : "pending";
     return /* @__PURE__ */ jsxs212("div", { className: clsx_default("step-item", status), children: [
@@ -32588,9 +32492,270 @@ var Steps = (props) => {
 Steps.displayName = "Steps";
 var Steps_default = Steps;
 
-// src/components/Switch/Switch.tsx
+// src/components/Swiper/Swiper.tsx
 import React27 from "react";
-import { jsx as jsx334 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs213 } from "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 = React27.useMemo(() => {
+    if (!useLoop) return items;
+    return [...items, ...items, ...items];
+  }, [items, useLoop]);
+  const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
+  const [innerIndex, setInnerIndex] = React27.useState(
+    useLoop ? cloneCount + initialIdx : initialIdx
+  );
+  const [isDragging, setIsDragging] = React27.useState(false);
+  const [dragOffset, setDragOffset] = React27.useState(0);
+  const [animated, setAnimated] = React27.useState(true);
+  const [containerWidth, setContainerWidth] = React27.useState(0);
+  const containerRef = React27.useRef(null);
+  const startXRef = React27.useRef(0);
+  const startTimeRef = React27.useRef(0);
+  const autoplayTimerRef = React27.useRef(null);
+  React27.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 = React27.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 = React27.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 = React27.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 = React27.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 = React27.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]);
+  React27.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]);
+  React27.useImperativeHandle(swiperRef, () => ({
+    slidePrev,
+    slideNext,
+    slideTo
+  }));
+  React27.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();
+  };
+  React27.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__ */ jsxs213("div", { className: clsx_default("lib-xplat-swiper", className), ref: containerRef, children: [
+    /* @__PURE__ */ jsx334(
+      "div",
+      {
+        className: "lib-xplat-swiper__viewport",
+        onMouseDown: handleDragStart,
+        onTouchStart: handleDragStart,
+        children: /* @__PURE__ */ jsx334(
+          "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__ */ jsx334(
+              "div",
+              {
+                className: "lib-xplat-swiper__slide",
+                style: {
+                  minWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`,
+                  maxWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`
+                },
+                children: item
+              },
+              idx
+            ))
+          }
+        )
+      }
+    ),
+    showProgress && canSlide && /* @__PURE__ */ jsx334("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx334("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx334(
+      "span",
+      {
+        className: "lib-xplat-swiper__progress-fill",
+        style: {
+          width: `${(currentStep + 1) / totalSteps * 100}%`,
+          transitionDuration: `${speed}ms`
+        }
+      }
+    ) }) }),
+    canSlide && /* @__PURE__ */ jsx334("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx334(
+      "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
+import React28 from "react";
+import { jsx as jsx335 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -32598,15 +32763,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] = React27.useState(false);
-  const timeoutRef = React27.useRef(null);
-  React27.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React28.useState(false);
+  const timeoutRef = React28.useRef(null);
+  React28.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -32621,12 +32783,8 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ jsx334(
+  const colorClass = color2;
+  return /* @__PURE__ */ jsx335(
     "div",
     {
       className: clsx_default(
@@ -32640,7 +32798,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx334("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx335("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -32648,14 +32806,14 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-import React29 from "react";
+import React30 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React28 from "react";
-import { jsx as jsx335 } from "react/jsx-runtime";
-var TabItem = React28.forwardRef((props, ref) => {
+import React29 from "react";
+import { jsx as jsx336 } from "react/jsx-runtime";
+var TabItem = React29.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx336(
     "div",
     {
       ref,
@@ -32669,25 +32827,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-import { jsx as jsx336, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx337, jsxs as jsxs214 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size: size4 = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = React29.useState({
+  const [underlineStyle, setUnderlineStyle] = React30.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React29.useRef([]);
+  const itemRefs = React30.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs213("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size4), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size4), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ jsx337(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -32699,7 +32857,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx336(
+    type === "toggle" && /* @__PURE__ */ jsx337(
       "div",
       {
         className: "tab-toggle-underline",
@@ -32715,17 +32873,17 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-import React30 from "react";
-var TableContext = React30.createContext(null);
+import React31 from "react";
+var TableContext = React31.createContext(null);
 var useTableContext = () => {
-  const ctx = React30.useContext(TableContext);
+  const ctx = React31.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx337 } from "react/jsx-runtime";
+import { jsx as jsx338 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     className,
@@ -32735,7 +32893,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx337("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsx338("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx338(
     TableContext_default.Provider,
     {
       value: {
@@ -32744,7 +32902,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx337("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx338("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -32752,40 +32910,40 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx338 } from "react/jsx-runtime";
+import { jsx as jsx339 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx338("tbody", { className, children });
+  return /* @__PURE__ */ jsx339("tbody", { className, children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React33 from "react";
+import React34 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React31 from "react";
-var TableHeadContext = React31.createContext(
+import React32 from "react";
+var TableHeadContext = React32.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React31.useContext(TableHeadContext);
+  const ctx = React32.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React32 from "react";
-var TableRowContext = React32.createContext(null);
+import React33 from "react";
+var TableRowContext = React33.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React32.useContext(TableRowContext);
+  const ctx = React33.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx339 } from "react/jsx-runtime";
+import { jsx as jsx340 } from "react/jsx-runtime";
 var TableCell = (props) => {
   const {
     children,
@@ -32797,9 +32955,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React33.useState(0);
-  const cellRef = React33.useRef(null);
-  const calculateLeft = React33.useCallback(() => {
+  const [left, setLeft] = React34.useState(0);
+  const cellRef = React34.useRef(null);
+  const calculateLeft = React34.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -32808,7 +32966,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -32826,7 +32984,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__ */ jsx339(
+  return /* @__PURE__ */ jsx340(
     CellTag,
     {
       ref: cellRef,
@@ -32848,47 +33006,40 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx340 } from "react/jsx-runtime";
+import { jsx as jsx341 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx340(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx340("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ jsx341(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx341("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React34 from "react";
-import { jsx as jsx341 } from "react/jsx-runtime";
+import React35 from "react";
+import { jsx as jsx342 } from "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] = React34.useState([]);
+  const [stickyCells, setStickyCells] = React35.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__ */ jsx341(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx341(
+  const colorClass = color2;
+  return /* @__PURE__ */ jsx342(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx342(
     "tr",
     {
       className: clsx_default(
@@ -32908,38 +33059,31 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx342, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx343, jsxs as jsxs215 } from "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__ */ jsxs214("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
-    /* @__PURE__ */ jsx342("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ jsx342("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx342(XIcon_default, {}) })
+  const colorClass = color2;
+  return /* @__PURE__ */ jsxs215("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
+    /* @__PURE__ */ jsx343("span", { className: "tag-label", children }),
+    onClose && /* @__PURE__ */ jsx343("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx343(XIcon_default, {}) })
   ] });
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-import React35 from "react";
-import { jsx as jsx343 } from "react/jsx-runtime";
-var TextArea = React35.forwardRef(
+import React36 from "react";
+import { jsx as jsx344 } from "react/jsx-runtime";
+var TextArea = React36.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = React35.useRef(null);
+    const localRef = React36.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -32959,21 +33103,21 @@ var TextArea = React35.forwardRef(
         onChange(event);
       }
     };
-    React35.useEffect(() => {
+    React36.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__ */ jsx343("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx343(
+    return /* @__PURE__ */ jsx344("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx344(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ jsx343(
+        children: /* @__PURE__ */ jsx344(
           "textarea",
           {
             ...textareaProps,
@@ -32991,25 +33135,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-import React36 from "react";
+import React37 from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx344, jsxs as jsxs215 } from "react/jsx-runtime";
-var ToastContext = React36.createContext(null);
+import { jsx as jsx345, jsxs as jsxs216 } from "react/jsx-runtime";
+var ToastContext = React37.createContext(null);
 var useToast = () => {
-  const ctx = React36.useContext(ToastContext);
+  const ctx = React37.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 = React36.useRef(null);
-  const [height, setHeight] = React36.useState(void 0);
-  React36.useEffect(() => {
+  const ref = React37.useRef(null);
+  const [height, setHeight] = React37.useState(void 0);
+  React37.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx344(
+  return /* @__PURE__ */ jsx345(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -33017,15 +33161,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ jsxs215(
+      children: /* @__PURE__ */ jsxs216(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx344("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx344("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx345("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx345("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -33036,13 +33180,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React36.useState([]);
-  const [removing, setRemoving] = React36.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React36.useState(false);
-  React36.useEffect(() => {
+  const [toasts, setToasts] = React37.useState([]);
+  const [removing, setRemoving] = React37.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React37.useState(false);
+  React37.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React36.useCallback((id) => {
+  const remove = React37.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -33053,7 +33197,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React36.useCallback(
+  const toast = React37.useCallback(
     (type, message2, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message: message2 }]);
@@ -33063,10 +33207,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ jsxs215(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs216(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal4(
-      /* @__PURE__ */ jsx344("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx344(
+      /* @__PURE__ */ jsx345("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx345(
         ToastItemComponent,
         {
           item: t,
@@ -33082,36 +33226,29 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React37 from "react";
-import { jsx as jsx345, jsxs as jsxs216 } from "react/jsx-runtime";
+import React38 from "react";
+import { jsx as jsx346, jsxs as jsxs217 } from "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 = React37.useRef(null);
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ jsxs216("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx345("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx345("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+  const iconRef = React38.useRef(null);
+  const colorClass = color2;
+  return /* @__PURE__ */ jsxs217("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ jsx346("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ jsx346("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
   ] });
 };
 Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-import React38 from "react";
-import { jsx as jsx346, jsxs as jsxs217 } from "react/jsx-runtime";
-var Video = React38.forwardRef((props, ref) => {
+import React39 from "react";
+import { jsx as jsx347, jsxs as jsxs218 } from "react/jsx-runtime";
+var Video = React39.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -33125,10 +33262,10 @@ var Video = React38.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = React38.useRef(null);
-  const [isPlaying, setIsPlaying] = React38.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React38.useState(false);
-  const setRefs = React38.useCallback(
+  const videoRef = React39.useRef(null);
+  const [isPlaying, setIsPlaying] = React39.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React39.useState(false);
+  const setRefs = React39.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -33156,7 +33293,7 @@ var Video = React38.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ jsxs217(
+  return /* @__PURE__ */ jsxs218(
     "div",
     {
       className: clsx_default(
@@ -33165,7 +33302,7 @@ var Video = React38.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx346(
+        /* @__PURE__ */ jsx347(
           "video",
           {
             ref: setRefs,
@@ -33182,7 +33319,7 @@ var Video = React38.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ jsx346(
+        showCustomOverlay && /* @__PURE__ */ jsx347(
           "button",
           {
             type: "button",
@@ -33193,7 +33330,7 @@ var Video = React38.forwardRef((props, ref) => {
             ),
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ jsx346(PauseIcon_default, {}) : /* @__PURE__ */ jsx346("span", { className: "play-icon", children: /* @__PURE__ */ jsx346(PlayCircleIcon_default, {}) })
+            children: isPlaying ? /* @__PURE__ */ jsx347(PauseIcon_default, {}) : /* @__PURE__ */ jsx347("span", { className: "play-icon", children: /* @__PURE__ */ jsx347(PlayCircleIcon_default, {}) })
           }
         )
       ]
@@ -33204,25 +33341,25 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx347 } from "react/jsx-runtime";
+import { jsx as jsx348 } from "react/jsx-runtime";
 var FullGrid = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx347("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  return /* @__PURE__ */ jsx348("div", { className: clsx_default("lib-xplat-full-grid", className), children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx349 } from "react/jsx-runtime";
 var FullScreen = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx348("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  return /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-full-screen", className), children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx349 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -33239,35 +33376,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-import { jsx as jsx350, jsxs as jsxs218 } from "react/jsx-runtime";
+import { jsx as jsx351, jsxs as jsxs219 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ jsxs218("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx350("div", { children: logo }),
-    /* @__PURE__ */ jsx350("div", { children: centerContent }),
-    /* @__PURE__ */ jsx350("div", { children: rightContent })
+  return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ jsx351("div", { children: logo }),
+    /* @__PURE__ */ jsx351("div", { children: centerContent }),
+    /* @__PURE__ */ jsx351("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment3, jsx as jsx351, jsxs as jsxs219 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx352, jsxs as jsxs220 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx351("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx351(Fragment3, { children: sideBar }),
-    /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx351("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ jsx352("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs220("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx352(Fragment3, { children: sideBar }),
+    /* @__PURE__ */ jsxs220("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ jsx352("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -33276,31 +33413,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-import React40 from "react";
+import React41 from "react";
 
 // src/layout/SideBar/SideBarContext.tsx
-import React39 from "react";
-var SideBarContext = React39.createContext(null);
+import React40 from "react";
+var SideBarContext = React40.createContext(null);
 var useSideBarContext = () => {
-  const ctx = React39.useContext(SideBarContext);
+  const ctx = React40.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx352 } from "react/jsx-runtime";
+import { jsx as jsx353 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = React40.useState(true);
+  const [isOpen, setIsOpen] = React41.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx352(
+  return /* @__PURE__ */ jsx353(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx352(
+      children: /* @__PURE__ */ jsx353(
         "div",
         {
           className: clsx_default(
@@ -33602,6 +33739,7 @@ export {
   SunIcon_default as SunIcon,
   SunriseIcon_default as SunriseIcon,
   SunsetIcon_default as SunsetIcon,
+  Swiper_default as Swiper,
   Switch_default as Switch,
   Tab_default as Tab,
   Table_default as Table,