@x-plat/design-system 0.4.3 → 0.4.5

package/dist/components/index.cjs

@@ -16953,7 +16953,7 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/Modal/Modal.tsx
 var import_react13 = __toESM(require("react"), 1);
@@ -17002,6 +17002,7 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/RangePicker/index.tsx
+var import_react14 = __toESM(require("react"), 1);
 var import_jsx_runtime315 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
@@ -17013,6 +17014,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
+  const [activeTab, setActiveTab] = import_react14.default.useState("start");
   const startCal = useCalendar(startDate.getFullYear(), startDate.getMonth());
   const endCal = useCalendar(endDate.getFullYear(), endDate.getMonth());
   const isDisabled = (date, type) => {
@@ -17119,8 +17121,31 @@ var RangePicker = (props) => {
         "--datepicker-active-color": `var(--${color2})`
       },
       children: [
-        renderCalendar(startCal, "start"),
-        renderCalendar(endCal, "end")
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "datepicker-range-tabs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "start" && "active"),
+              onClick: () => setActiveTab("start"),
+              children: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "end" && "active"),
+              onClick: () => setActiveTab("end"),
+              children: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "datepicker-range-panels", children: [
+          renderCalendar(startCal, "start"),
+          renderCalendar(endCal, "end")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? renderCalendar(startCal, "start") : renderCalendar(endCal, "end") })
       ]
     }
   );
@@ -17132,7 +17157,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime316 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react14.default.useState(false);
+  const [isOpen, setIsOpen] = import_react15.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -17141,7 +17166,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react14.default.cloneElement(component, { onClick: handleClick }),
+    import_react15.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
@@ -17201,15 +17226,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime318 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
-  const [mounted, setMounted] = import_react15.default.useState(false);
-  const [visible, setVisible] = import_react15.default.useState(false);
-  import_react15.default.useEffect(() => {
+  const [mounted, setMounted] = import_react16.default.useState(false);
+  const [visible, setVisible] = import_react16.default.useState(false);
+  import_react16.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -17255,16 +17280,16 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react16.default.useState({
+  const [position, setPosition] = import_react17.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react16.default.useCallback(() => {
+  const calculatePosition = import_react17.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -17286,7 +17311,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react16.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     calculatePosition();
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
@@ -17299,14 +17324,14 @@ var useAutoPosition_default = useAutoPosition;
 var import_jsx_runtime319 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children, className } = props;
-  const [isOpen, setIsOpen] = import_react17.default.useState(false);
-  const [mounted, setMounted] = import_react17.default.useState(false);
-  const [visible, setVisible] = import_react17.default.useState(false);
-  const triggerRef = import_react17.default.useRef(null);
-  const menuRef = import_react17.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react18.default.useState(false);
+  const [mounted, setMounted] = import_react18.default.useState(false);
+  const [visible, setVisible] = import_react18.default.useState(false);
+  const triggerRef = import_react18.default.useRef(null);
+  const menuRef = import_react18.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  import_react17.default.useEffect(() => {
+  import_react18.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -17375,7 +17400,7 @@ EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
@@ -17387,8 +17412,8 @@ var FileUpload = (props) => {
     description,
     className
   } = props;
-  const [isDragOver, setIsDragOver] = import_react18.default.useState(false);
-  const inputRef = import_react18.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react19.default.useState(false);
+  const inputRef = import_react19.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -17448,19 +17473,19 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/Select/Select.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react19 = __toESM(require("react"), 1);
-var SelectContext = import_react19.default.createContext(null);
+var import_react20 = __toESM(require("react"), 1);
+var SelectContext = import_react20.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var import_jsx_runtime322 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false, className } = props;
-  const ctx = import_react20.default.useContext(context_default);
+  const ctx = import_react21.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -17502,26 +17527,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = import_react21.default.Children.toArray(children).filter(
-    (child) => import_react21.default.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = import_react22.default.Children.toArray(children).filter(
+    (child) => import_react22.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react21.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react21.default.useState(null);
-  const controlledLabel = import_react21.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react22.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react22.default.useState(null);
+  const controlledLabel = import_react22.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = import_react21.default.useRef(null);
-  const contentRef = import_react21.default.useRef(null);
-  const [mounted, setMounted] = import_react21.default.useState(false);
-  const [visible, setVisible] = import_react21.default.useState(false);
-  import_react21.default.useEffect(() => {
+  const triggerRef = import_react22.default.useRef(null);
+  const contentRef = import_react22.default.useRef(null);
+  const [mounted, setMounted] = import_react22.default.useState(false);
+  const [visible, setVisible] = import_react22.default.useState(false);
+  import_react22.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -17531,12 +17556,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react21.default.useCallback(() => setOpen(true), []);
-  const close = import_react21.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react21.default.useCallback(() => setOpen((prev) => !prev), []);
+  const open = import_react22.default.useCallback(() => setOpen(true), []);
+  const close = import_react22.default.useCallback(() => setOpen(false), []);
+  const toggle = import_react22.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react21.default.useCallback(
+  const setSelected = import_react22.default.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -17545,7 +17570,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react21.default.useMemo(
+  const ctxValue = import_react22.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -17643,10 +17668,10 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -17714,15 +17739,15 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react22.default.createElement(tag, props);
+    return import_react23.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react22.default.createElement(tag, props, ...children);
+  return import_react23.default.createElement(tag, props, ...children);
 }
 function htmlToReactProgressive(root, typedLen, rangeMap) {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : import_react22.default.createElement(import_react22.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react23.default.createElement(import_react23.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 }
@@ -17735,20 +17760,20 @@ var HtmlTypeWriter = ({
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react23.default.useState(0);
-  const doneCalledRef = import_react23.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react23.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react24.default.useState(0);
+  const doneCalledRef = import_react24.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react24.default.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]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -17756,18 +17781,18 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react23.default.useMemo(
+  const parsed = import_react24.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
@@ -17777,12 +17802,12 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react24 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = import_react24.default.useState();
-  import_react24.default.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = import_react25.default.useState();
+  import_react25.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -17791,7 +17816,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react24.default.useRef(null);
+  const inputRef = import_react25.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -17913,17 +17938,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_jsx_runtime327 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react25.default.useRef(null);
-  const triggerRef = import_react25.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react25.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react25.default.useState(false);
+  const popRef = import_react26.default.useRef(null);
+  const triggerRef = import_react26.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react26.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react26.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react25.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -18009,12 +18034,12 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react26 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react26.default.createContext(
+var import_react27 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react27.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react26.default.useContext(RadioGroupContext);
+  return import_react27.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
@@ -18170,7 +18195,7 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react27 = __toESM(require("react"), 1);
+var import_react28 = __toESM(require("react"), 1);
 var import_jsx_runtime334 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
@@ -18195,23 +18220,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react27.default.useMemo(() => {
+  const extendedItems = import_react28.default.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = import_react27.default.useState(
+  const [innerIndex, setInnerIndex] = import_react28.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react27.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react27.default.useState(0);
-  const [animated, setAnimated] = import_react27.default.useState(true);
-  const [containerWidth, setContainerWidth] = import_react27.default.useState(0);
-  const containerRef = import_react27.default.useRef(null);
-  const startXRef = import_react27.default.useRef(0);
-  const startTimeRef = import_react27.default.useRef(0);
-  const autoplayTimerRef = import_react27.default.useRef(null);
-  import_react27.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react28.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react28.default.useState(0);
+  const [animated, setAnimated] = import_react28.default.useState(true);
+  const [containerWidth, setContainerWidth] = import_react28.default.useState(0);
+  const containerRef = import_react28.default.useRef(null);
+  const startXRef = import_react28.default.useRef(0);
+  const startTimeRef = import_react28.default.useRef(0);
+  const autoplayTimerRef = import_react28.default.useRef(null);
+  import_react28.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -18230,7 +18255,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react27.default.useCallback(
+  const moveToInner = import_react28.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -18258,7 +18283,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react27.default.useCallback(() => {
+  const handleTransitionEnd = import_react28.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -18268,7 +18293,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react27.default.useCallback(
+  const slideTo = import_react28.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -18278,7 +18303,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react27.default.useCallback(() => {
+  const slideNext = import_react28.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -18287,7 +18312,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react27.default.useCallback(() => {
+  const slidePrev = import_react28.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -18296,7 +18321,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react27.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -18304,12 +18329,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react27.default.useImperativeHandle(swiperRef, () => ({
+  import_react28.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react27.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -18332,7 +18357,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react27.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -18439,7 +18464,7 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react28 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var import_jsx_runtime335 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
@@ -18451,9 +18476,9 @@ var Switch = (props) => {
     color: color2 = "xplat-blue-500",
     className
   } = props;
-  const [isAnimating, setIsAnimating] = import_react28.default.useState(false);
-  const timeoutRef = import_react28.default.useRef(null);
-  import_react28.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react29.default.useState(false);
+  const timeoutRef = import_react29.default.useRef(null);
+  import_react29.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -18491,12 +18516,12 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 var import_jsx_runtime336 = require("react/jsx-runtime");
-var TabItem = import_react29.default.forwardRef((props, ref) => {
+var TabItem = import_react30.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
     "div",
@@ -18515,15 +18540,15 @@ var TabItem_default = TabItem;
 var import_jsx_runtime337 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react30.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react31.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react30.default.useRef([]);
+  const itemRefs = import_react31.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react30.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
@@ -18558,10 +18583,10 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-var import_react31 = __toESM(require("react"), 1);
-var TableContext = import_react31.default.createContext(null);
+var import_react32 = __toESM(require("react"), 1);
+var TableContext = import_react32.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react31.default.useContext(TableContext);
+  const ctx = import_react32.default.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -18604,24 +18629,24 @@ TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react34 = __toESM(require("react"), 1);
+var import_react35 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react32 = __toESM(require("react"), 1);
-var TableHeadContext = import_react32.default.createContext(
+var import_react33 = __toESM(require("react"), 1);
+var TableHeadContext = import_react33.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react32.default.useContext(TableHeadContext);
+  const ctx = import_react33.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react33 = __toESM(require("react"), 1);
-var TableRowContext = import_react33.default.createContext(null);
+var import_react34 = __toESM(require("react"), 1);
+var TableRowContext = import_react34.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react33.default.useContext(TableRowContext);
+  const ctx = import_react34.default.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -18640,9 +18665,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react34.default.useState(0);
-  const cellRef = import_react34.default.useRef(null);
-  const calculateLeft = import_react34.default.useCallback(() => {
+  const [left, setLeft] = import_react35.default.useState(0);
+  const cellRef = import_react35.default.useRef(null);
+  const calculateLeft = import_react35.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -18651,7 +18676,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react34.default.useEffect(() => {
+  import_react35.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -18704,7 +18729,7 @@ TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react35 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 var import_jsx_runtime342 = require("react/jsx-runtime");
 var TableRow = (props) => {
   const {
@@ -18716,7 +18741,7 @@ var TableRow = (props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react35.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react36.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -18763,12 +18788,12 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react36 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 var import_jsx_runtime344 = require("react/jsx-runtime");
-var TextArea = import_react36.default.forwardRef(
+var TextArea = import_react37.default.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = import_react36.default.useRef(null);
+    const localRef = import_react37.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -18788,7 +18813,7 @@ var TextArea = import_react36.default.forwardRef(
         onChange(event);
       }
     };
-    import_react36.default.useEffect(() => {
+    import_react37.default.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
@@ -18820,20 +18845,20 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-var import_react37 = __toESM(require("react"), 1);
+var import_react38 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime345 = require("react/jsx-runtime");
-var ToastContext = import_react37.default.createContext(null);
+var ToastContext = import_react38.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react37.default.useContext(ToastContext);
+  const ctx = import_react38.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = import_react37.default.useRef(null);
-  const [height, setHeight] = import_react37.default.useState(void 0);
-  import_react37.default.useEffect(() => {
+  const ref = import_react38.default.useRef(null);
+  const [height, setHeight] = import_react38.default.useState(void 0);
+  import_react38.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
@@ -18865,13 +18890,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react37.default.useState([]);
-  const [removing, setRemoving] = import_react37.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react37.default.useState(false);
-  import_react37.default.useEffect(() => {
+  const [toasts, setToasts] = import_react38.default.useState([]);
+  const [removing, setRemoving] = import_react38.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react38.default.useState(false);
+  import_react38.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react37.default.useCallback((id) => {
+  const remove = import_react38.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -18882,7 +18907,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react37.default.useCallback(
+  const toast = import_react38.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -18911,7 +18936,7 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react38 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_jsx_runtime346 = require("react/jsx-runtime");
 var Tooltip2 = (props) => {
   const {
@@ -18920,7 +18945,7 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = import_react38.default.useRef(null);
+  const iconRef = import_react39.default.useRef(null);
   const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
@@ -18931,9 +18956,9 @@ Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-var import_react39 = __toESM(require("react"), 1);
+var import_react40 = __toESM(require("react"), 1);
 var import_jsx_runtime347 = require("react/jsx-runtime");
-var Video = import_react39.default.forwardRef((props, ref) => {
+var Video = import_react40.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -18947,10 +18972,10 @@ var Video = import_react39.default.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = import_react39.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react39.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react39.default.useState(false);
-  const setRefs = import_react39.default.useCallback(
+  const videoRef = import_react40.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react40.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react40.default.useState(false);
+  const setRefs = import_react40.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);