@x-plat/design-system 0.4.4 → 0.4.5

package/dist/index.js

@@ -21098,7 +21098,7 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React12 from "react";
+import React13 from "react";
 
 // src/components/Modal/Modal.tsx
 import React11 from "react";
@@ -21147,6 +21147,7 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/RangePicker/index.tsx
+import React12 from "react";
 import { jsx as jsx315, jsxs as jsxs201 } from "react/jsx-runtime";
 var RangePicker = (props) => {
   const {
@@ -21158,6 +21159,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
+  const [activeTab, setActiveTab] = React12.useState("start");
   const startCal = useCalendar(startDate.getFullYear(), startDate.getMonth());
   const endCal = useCalendar(endDate.getFullYear(), endDate.getMonth());
   const isDisabled = (date, type) => {
@@ -21264,8 +21266,31 @@ var RangePicker = (props) => {
         "--datepicker-active-color": `var(--${color2})`
       },
       children: [
-        renderCalendar(startCal, "start"),
-        renderCalendar(endCal, "end")
+        /* @__PURE__ */ jsxs201("div", { className: "datepicker-range-tabs", children: [
+          /* @__PURE__ */ jsx315(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "start" && "active"),
+              onClick: () => setActiveTab("start"),
+              children: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start"
+            }
+          ),
+          /* @__PURE__ */ jsx315(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "end" && "active"),
+              onClick: () => setActiveTab("end"),
+              children: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs201("div", { className: "datepicker-range-panels", children: [
+          renderCalendar(startCal, "start"),
+          renderCalendar(endCal, "end")
+        ] }),
+        /* @__PURE__ */ jsx315("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? renderCalendar(startCal, "start") : renderCalendar(endCal, "end") })
       ]
     }
   );
@@ -21277,7 +21302,7 @@ var RangePicker_default = RangePicker;
 import { jsx as jsx316, jsxs as jsxs202 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React12.useState(false);
+  const [isOpen, setIsOpen] = React13.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -21286,7 +21311,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ jsxs202("div", { className: "lib-xplat-popup-datepicker", children: [
-    React12.cloneElement(component, { onClick: handleClick }),
+    React13.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ jsx316(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs202("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx316(
@@ -21346,15 +21371,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-import React13 from "react";
+import React14 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx318, jsxs as jsxs203 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
-  const [mounted, setMounted] = React13.useState(false);
-  const [visible, setVisible] = React13.useState(false);
-  React13.useEffect(() => {
+  const [mounted, setMounted] = React14.useState(false);
+  const [visible, setVisible] = React14.useState(false);
+  React14.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -21400,16 +21425,16 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-import React15 from "react";
+import React16 from "react";
 
 // src/tokens/hooks/useAutoPosition.ts
-import React14 from "react";
+import React15 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React14.useState({
+  const [position, setPosition] = React15.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React14.useCallback(() => {
+  const calculatePosition = React15.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -21431,7 +21456,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     calculatePosition();
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
@@ -21444,14 +21469,14 @@ var useAutoPosition_default = useAutoPosition;
 import { jsx as jsx319, jsxs as jsxs204 } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children, className } = props;
-  const [isOpen, setIsOpen] = React15.useState(false);
-  const [mounted, setMounted] = React15.useState(false);
-  const [visible, setVisible] = React15.useState(false);
-  const triggerRef = React15.useRef(null);
-  const menuRef = React15.useRef(null);
+  const [isOpen, setIsOpen] = React16.useState(false);
+  const [mounted, setMounted] = React16.useState(false);
+  const [visible, setVisible] = React16.useState(false);
+  const triggerRef = React16.useRef(null);
+  const menuRef = React16.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -21520,7 +21545,7 @@ EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-import React16 from "react";
+import React17 from "react";
 import { jsx as jsx321, jsxs as jsxs206 } from "react/jsx-runtime";
 var FileUpload = (props) => {
   const {
@@ -21532,8 +21557,8 @@ var FileUpload = (props) => {
     description,
     className
   } = props;
-  const [isDragOver, setIsDragOver] = React16.useState(false);
-  const inputRef = React16.useRef(null);
+  const [isDragOver, setIsDragOver] = React17.useState(false);
+  const inputRef = React17.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -21593,19 +21618,19 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/Select/Select.tsx
-import React19 from "react";
+import React20 from "react";
 
 // src/components/Select/context.ts
-import React17 from "react";
-var SelectContext = React17.createContext(null);
+import React18 from "react";
+var SelectContext = React18.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React18 from "react";
+import React19 from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false, className } = props;
-  const ctx = React18.useContext(context_default);
+  const ctx = React19.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -21647,26 +21672,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = React19.Children.toArray(children).filter(
-    (child) => React19.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = React20.Children.toArray(children).filter(
+    (child) => React20.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React19.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React19.useState(null);
-  const controlledLabel = React19.useMemo(() => {
+  const [isOpen, setOpen] = React20.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React20.useState(null);
+  const controlledLabel = React20.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = React19.useRef(null);
-  const contentRef = React19.useRef(null);
-  const [mounted, setMounted] = React19.useState(false);
-  const [visible, setVisible] = React19.useState(false);
-  React19.useEffect(() => {
+  const triggerRef = React20.useRef(null);
+  const contentRef = React20.useRef(null);
+  const [mounted, setMounted] = React20.useState(false);
+  const [visible, setVisible] = React20.useState(false);
+  React20.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -21676,12 +21701,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React19.useCallback(() => setOpen(true), []);
-  const close = React19.useCallback(() => setOpen(false), []);
-  const toggle = React19.useCallback(() => setOpen((prev) => !prev), []);
+  const open = React20.useCallback(() => setOpen(true), []);
+  const close = React20.useCallback(() => setOpen(false), []);
+  const toggle = React20.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React19.useCallback(
+  const setSelected = React20.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -21690,7 +21715,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = React19.useMemo(
+  const ctxValue = React20.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -21788,10 +21813,10 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React21 from "react";
+import React22 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React20 from "react";
+import React21 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -21859,15 +21884,15 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React20.createElement(tag, props);
+    return React21.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React20.createElement(tag, props, ...children);
+  return React21.createElement(tag, props, ...children);
 }
 function htmlToReactProgressive(root, typedLen, rangeMap) {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : React20.createElement(React20.Fragment, { key: idx }, node);
+    return node == null ? null : React21.createElement(React21.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 }
@@ -21880,20 +21905,20 @@ var HtmlTypeWriter = ({
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React21.useState(0);
-  const doneCalledRef = React21.useRef(false);
-  const { doc, rangeMap, totalLength } = React21.useMemo(() => {
+  const [typedLen, setTypedLen] = React22.useState(0);
+  const doneCalledRef = React22.useRef(false);
+  const { doc, rangeMap, totalLength } = React22.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -21901,18 +21926,18 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React21.useMemo(
+  const parsed = React22.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
@@ -21922,12 +21947,12 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React22 from "react";
+import React23 from "react";
 import { jsx as jsx325, jsxs as jsxs208 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = React22.useState();
-  React22.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = React23.useState();
+  React23.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -21936,7 +21961,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React22.useRef(null);
+  const inputRef = React23.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -22058,17 +22083,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-import React23 from "react";
+import React24 from "react";
 import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React23.useRef(null);
-  const triggerRef = React23.useRef(null);
-  const [localOpen, setLocalOpen] = React23.useState(false);
-  const [eventTrigger, setEventTrigger] = React23.useState(false);
+  const popRef = React24.useRef(null);
+  const triggerRef = React24.useRef(null);
+  const [localOpen, setLocalOpen] = React24.useState(false);
+  const [eventTrigger, setEventTrigger] = React24.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -22154,12 +22179,12 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-import React24 from "react";
-var RadioGroupContext = React24.createContext(
+import React25 from "react";
+var RadioGroupContext = React25.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React24.useContext(RadioGroupContext);
+  return React25.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
@@ -22315,7 +22340,7 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-import React25 from "react";
+import React26 from "react";
 import { jsx as jsx334, jsxs as jsxs215 } from "react/jsx-runtime";
 var Swiper = (props) => {
   const {
@@ -22340,23 +22365,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = React25.useMemo(() => {
+  const extendedItems = React26.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = React25.useState(
+  const [innerIndex, setInnerIndex] = React26.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = React25.useState(false);
-  const [dragOffset, setDragOffset] = React25.useState(0);
-  const [animated, setAnimated] = React25.useState(true);
-  const [containerWidth, setContainerWidth] = React25.useState(0);
-  const containerRef = React25.useRef(null);
-  const startXRef = React25.useRef(0);
-  const startTimeRef = React25.useRef(0);
-  const autoplayTimerRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const [isDragging, setIsDragging] = React26.useState(false);
+  const [dragOffset, setDragOffset] = React26.useState(0);
+  const [animated, setAnimated] = React26.useState(true);
+  const [containerWidth, setContainerWidth] = React26.useState(0);
+  const containerRef = React26.useRef(null);
+  const startXRef = React26.useRef(0);
+  const startTimeRef = React26.useRef(0);
+  const autoplayTimerRef = React26.useRef(null);
+  React26.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -22375,7 +22400,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = React25.useCallback(
+  const moveToInner = React26.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -22403,7 +22428,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = React25.useCallback(() => {
+  const handleTransitionEnd = React26.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -22413,7 +22438,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = React25.useCallback(
+  const slideTo = React26.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -22423,7 +22448,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = React25.useCallback(() => {
+  const slideNext = React26.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -22432,7 +22457,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = React25.useCallback(() => {
+  const slidePrev = React26.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -22441,7 +22466,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -22449,12 +22474,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  React25.useImperativeHandle(swiperRef, () => ({
+  React26.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -22477,7 +22502,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -22584,7 +22609,7 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-import React26 from "react";
+import React27 from "react";
 import { jsx as jsx335 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
@@ -22596,9 +22621,9 @@ var Switch = (props) => {
     color: color2 = "xplat-blue-500",
     className
   } = props;
-  const [isAnimating, setIsAnimating] = React26.useState(false);
-  const timeoutRef = React26.useRef(null);
-  React26.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React27.useState(false);
+  const timeoutRef = React27.useRef(null);
+  React27.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -22636,12 +22661,12 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-import React28 from "react";
+import React29 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React27 from "react";
+import React28 from "react";
 import { jsx as jsx336 } from "react/jsx-runtime";
-var TabItem = React27.forwardRef((props, ref) => {
+var TabItem = React28.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ jsx336(
     "div",
@@ -22660,15 +22685,15 @@ var TabItem_default = TabItem;
 import { jsx as jsx337, jsxs as jsxs216 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = React28.useState({
+  const [underlineStyle, setUnderlineStyle] = React29.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React28.useRef([]);
+  const itemRefs = React29.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
@@ -22703,10 +22728,10 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-import React29 from "react";
-var TableContext = React29.createContext(null);
+import React30 from "react";
+var TableContext = React30.createContext(null);
 var useTableContext = () => {
-  const ctx = React29.useContext(TableContext);
+  const ctx = React30.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -22749,24 +22774,24 @@ TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React32 from "react";
+import React33 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React30 from "react";
-var TableHeadContext = React30.createContext(
+import React31 from "react";
+var TableHeadContext = React31.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React30.useContext(TableHeadContext);
+  const ctx = React31.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React31 from "react";
-var TableRowContext = React31.createContext(null);
+import React32 from "react";
+var TableRowContext = React32.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React31.useContext(TableRowContext);
+  const ctx = React32.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -22785,9 +22810,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React32.useState(0);
-  const cellRef = React32.useRef(null);
-  const calculateLeft = React32.useCallback(() => {
+  const [left, setLeft] = React33.useState(0);
+  const cellRef = React33.useRef(null);
+  const calculateLeft = React33.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -22796,7 +22821,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -22849,7 +22874,7 @@ TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React33 from "react";
+import React34 from "react";
 import { jsx as jsx342 } from "react/jsx-runtime";
 var TableRow = (props) => {
   const {
@@ -22861,7 +22886,7 @@ var TableRow = (props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React33.useState([]);
+  const [stickyCells, setStickyCells] = React34.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -22908,12 +22933,12 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-import React34 from "react";
+import React35 from "react";
 import { jsx as jsx344 } from "react/jsx-runtime";
-var TextArea = React34.forwardRef(
+var TextArea = React35.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = React34.useRef(null);
+    const localRef = React35.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -22933,7 +22958,7 @@ var TextArea = React34.forwardRef(
         onChange(event);
       }
     };
-    React34.useEffect(() => {
+    React35.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
@@ -22965,20 +22990,20 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-import React35 from "react";
+import React36 from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx345, jsxs as jsxs218 } from "react/jsx-runtime";
-var ToastContext = React35.createContext(null);
+var ToastContext = React36.createContext(null);
 var useToast = () => {
-  const ctx = React35.useContext(ToastContext);
+  const ctx = React36.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 = React35.useRef(null);
-  const [height, setHeight] = React35.useState(void 0);
-  React35.useEffect(() => {
+  const ref = React36.useRef(null);
+  const [height, setHeight] = React36.useState(void 0);
+  React36.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
@@ -23010,13 +23035,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React35.useState([]);
-  const [removing, setRemoving] = React35.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React35.useState(false);
-  React35.useEffect(() => {
+  const [toasts, setToasts] = React36.useState([]);
+  const [removing, setRemoving] = React36.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React36.useState(false);
+  React36.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React35.useCallback((id) => {
+  const remove = React36.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -23027,7 +23052,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React35.useCallback(
+  const toast = React36.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -23056,7 +23081,7 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React36 from "react";
+import React37 from "react";
 import { jsx as jsx346, jsxs as jsxs219 } from "react/jsx-runtime";
 var Tooltip2 = (props) => {
   const {
@@ -23065,7 +23090,7 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = React36.useRef(null);
+  const iconRef = React37.useRef(null);
   const colorClass = color2;
   return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ jsx346("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
@@ -23076,9 +23101,9 @@ Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-import React37 from "react";
+import React38 from "react";
 import { jsx as jsx347, jsxs as jsxs220 } from "react/jsx-runtime";
-var Video = React37.forwardRef((props, ref) => {
+var Video = React38.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -23092,10 +23117,10 @@ var Video = React37.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = React37.useRef(null);
-  const [isPlaying, setIsPlaying] = React37.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React37.useState(false);
-  const setRefs = React37.useCallback(
+  const videoRef = React38.useRef(null);
+  const [isPlaying, setIsPlaying] = React38.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React38.useState(false);
+  const setRefs = React38.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -23243,13 +23268,13 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-import React39 from "react";
+import React40 from "react";
 
 // src/layout/SideBar/SideBarContext.tsx
-import React38 from "react";
-var SideBarContext = React38.createContext(null);
+import React39 from "react";
+var SideBarContext = React39.createContext(null);
 var useSideBarContext = () => {
-  const ctx = React38.useContext(SideBarContext);
+  const ctx = React39.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
@@ -23259,7 +23284,7 @@ var SideBarContext_default = SideBarContext;
 import { jsx as jsx353 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = React39.useState(true);
+  const [isOpen, setIsOpen] = React40.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };