@x-plat/design-system 0.3.0 → 0.3.2

package/dist/index.js

@@ -32492,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 {
@@ -32505,9 +32766,9 @@ var Switch = (props) => {
     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);
     };
@@ -32523,7 +32784,7 @@ var Switch = (props) => {
     }, KNOB_TRANSITION_MS);
   };
   const colorClass = color2;
-  return /* @__PURE__ */ jsx334(
+  return /* @__PURE__ */ jsx335(
     "div",
     {
       className: clsx_default(
@@ -32537,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) })
     }
   );
 };
@@ -32545,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,
@@ -32566,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),
@@ -32596,7 +32857,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx336(
+    type === "toggle" && /* @__PURE__ */ jsx337(
       "div",
       {
         className: "tab-toggle-underline",
@@ -32612,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,
@@ -32632,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: {
@@ -32641,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 })
     }
   ) });
 };
@@ -32649,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,
@@ -32694,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) {
@@ -32705,7 +32966,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -32723,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,
@@ -32745,32 +33006,32 @@ 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,
-    color: color2 = "xplat-blue-500",
+    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;
@@ -32778,7 +33039,7 @@ var TableRow = (props) => {
     });
   };
   const colorClass = color2;
-  return /* @__PURE__ */ jsx341(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx342(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx342(
     "tr",
     {
       className: clsx_default(
@@ -32798,7 +33059,7 @@ 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,
@@ -32808,21 +33069,21 @@ var Tag = (props) => {
     className
   } = props;
   const colorClass = color2;
-  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, {}) })
+  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;
@@ -32842,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,
@@ -32874,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 }),
@@ -32900,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" })
           ]
         }
       )
@@ -32919,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));
@@ -32936,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 }]);
@@ -32946,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,
@@ -32965,8 +33226,8 @@ 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",
@@ -32974,20 +33235,20 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = React37.useRef(null);
+  const iconRef = React38.useRef(null);
   const colorClass = color2;
-  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 })
+  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,
@@ -33001,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);
@@ -33032,7 +33293,7 @@ var Video = React38.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ jsxs217(
+  return /* @__PURE__ */ jsxs218(
     "div",
     {
       className: clsx_default(
@@ -33041,7 +33302,7 @@ var Video = React38.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx346(
+        /* @__PURE__ */ jsx347(
           "video",
           {
             ref: setRefs,
@@ -33058,7 +33319,7 @@ var Video = React38.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ jsx346(
+        showCustomOverlay && /* @__PURE__ */ jsx347(
           "button",
           {
             type: "button",
@@ -33069,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, {}) })
           }
         )
       ]
@@ -33080,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;
@@ -33115,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
     ] })
   ] }) });
@@ -33152,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(
@@ -33478,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,