virtual-ui-lib 1.0.67 → 1.0.69

package/dist/index.mjs

@@ -1,575 +1,5 @@
-// src/components/ToastNotification/ToastNotification.jsx
-import React, { useEffect, useState } from "react";
-var ToastNotification = ({
-  type = "success",
-  title = "Success",
-  message = "Your action was successful!",
-  duration = 4e3,
-  onClose
-}) => {
-  const [visible, setVisible] = useState(false);
-  const [progress, setProgress] = useState(0);
-  useEffect(() => {
-    setVisible(true);
-    const interval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(interval);
-          onClose();
-          return 100;
-        }
-        return prev + 100 / (duration / 100);
-      });
-    }, 100);
-    return () => clearInterval(interval);
-  }, [duration, onClose]);
-  const getStyles = () => {
-    let bg, icon;
-    switch (type) {
-      case "success":
-        bg = "#059669";
-        icon = "\u2713";
-        break;
-      case "error":
-        bg = "#dc2626";
-        icon = "\u2716";
-        break;
-      case "warning":
-        bg = "#eab308";
-        icon = "\u26A0\uFE0F";
-        break;
-      case "info":
-        bg = "#2563eb";
-        icon = "\u2139\uFE0F";
-        break;
-      default:
-        bg = "#059669";
-        icon = "\u2713";
-    }
-    return { background: bg, icon };
-  };
-  return /* @__PURE__ */ React.createElement("div", { style: {
-    position: "fixed",
-    bottom: "20px",
-    right: "20px",
-    opacity: visible ? 1 : 0,
-    transform: visible ? "translateY(0)" : "translateY(20px)",
-    transition: "opacity 0.3s, transform 0.3s",
-    background: getStyles().background,
-    borderRadius: "12px",
-    padding: "16px",
-    width: "300px",
-    boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
-    fontFamily: "system-ui, sans-serif",
-    zIndex: 9999
-  } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: {
-    width: "24px",
-    height: "24px",
-    borderRadius: "50%",
-    background: "white",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: "8px"
-  } }, /* @__PURE__ */ React.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ React.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ React.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ React.createElement("button", { onClick: onClose, style: {
-    background: "transparent",
-    color: "white",
-    border: "none",
-    cursor: "pointer",
-    fontSize: "14px",
-    fontWeight: "600"
-  } }, "Close"), /* @__PURE__ */ React.createElement("div", { style: {
-    height: "4px",
-    background: "rgba(255, 255, 255, 0.3)",
-    borderRadius: "8px",
-    overflow: "hidden",
-    marginTop: "12px"
-  } }, /* @__PURE__ */ React.createElement("div", { style: {
-    width: progress + "%",
-    height: "100%",
-    background: "white",
-    transition: "width 0.1s linear"
-  } })));
-};
-
-// src/components/StatCard/StatCard.jsx
-import React2, { useEffect as useEffect2, useState as useState2 } from "react";
-var StatCard = ({
-  title = "Revenue",
-  metric = 1200,
-  change = 15,
-  bg = "#0f172a",
-  accent = "#059669",
-  negativeAccent = "#ef4444",
-  radius = "16px"
-}) => {
-  const [count, setCount] = useState2(0);
-  useEffect2(() => {
-    let countUp = 0;
-    const interval = setInterval(() => {
-      if (countUp < metric) {
-        countUp += Math.ceil(metric / 100);
-        setCount(countUp);
-      } else {
-        clearInterval(interval);
-      }
-    }, 30);
-    return () => clearInterval(interval);
-  }, [metric]);
-  return /* @__PURE__ */ React2.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ React2.createElement("span", { style: {
-    display: "inline-block",
-    padding: "5px 12px",
-    borderRadius: "10px",
-    background: change >= 0 ? accent : negativeAccent,
-    color: "white",
-    fontSize: "14px",
-    margin: "10px 0"
-  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ React2.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
-};
-
-// src/components/OtpInput/OtpInput.jsx
-import React3, { useEffect as useEffect3, useRef, useState as useState3 } from "react";
-var OtpInput = ({
-  length = 6,
-  boxSize = "48px",
-  borderColor = "#7c3aed",
-  bgColor = "#1e293b",
-  textColor = "#f1f5f9",
-  radius = "8px",
-  onComplete
-}) => {
-  const [otp, setOtp] = useState3(Array(length).fill(""));
-  const inputsRef = useRef([]);
-  const handleChange = (index, value) => {
-    if (/\d/.test(value) || value === "") {
-      const newOtp = [...otp];
-      newOtp[index] = value;
-      setOtp(newOtp);
-      if (value !== "" && index < length - 1) {
-        inputsRef.current[index + 1].focus();
-      } else if (value === "" && index > 0) {
-        inputsRef.current[index - 1].focus();
-      }
-      if (newOtp.join("").length === length) {
-        onComplete(newOtp.join(""));
-      }
-    }
-  };
-  const handlePaste = (e) => {
-    const pastedData = e.clipboardData.getData("text").slice(0, length).split("");
-    const newOtp = Array(length).fill("").map((_, index) => pastedData[index] || "");
-    setOtp(newOtp);
-    if (newOtp.join("").length === length) {
-      onComplete(newOtp.join(""));
-    }
-    e.preventDefault();
-  };
-  useEffect3(() => {
-    inputsRef.current[0].focus();
-  }, []);
-  return /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", padding: "20px", background: bgColor, borderRadius: radius, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 4px 20px rgba(0,0,0,0.6)" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React3.createElement(
-    "input",
-    {
-      key: index,
-      ref: (el) => inputsRef.current[index] = el,
-      type: "text",
-      maxLength: "1",
-      value,
-      onChange: (e) => handleChange(index, e.target.value),
-      onFocus: (e) => e.target.select(),
-      onKeyDown: (e) => {
-        if (e.key === "Backspace" && !value && index > 0) {
-          inputsRef.current[index - 1].focus();
-        }
-      },
-      style: {
-        width: boxSize,
-        height: boxSize,
-        fontSize: "24px",
-        textAlign: "center",
-        borderRadius: radius,
-        border: `2px solid ${borderColor}`,
-        background: bgColor,
-        color: textColor,
-        transition: "border-color 0.2s",
-        outline: "none"
-      }
-    }
-  )), otp.join("").length === length && /* @__PURE__ */ React3.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
-};
-
-// src/components/CodeBlock/CodeBlock.jsx
-import React4, { useState as useState4 } from "react";
-var CodeBlock = ({
-  code = "const hello = 'Hello, world!';\nconsole.log(hello);",
-  language = "JavaScript",
-  filename = "example.js",
-  bg = "#0d1117",
-  textColor = "#c9d1d9",
-  tokenColors = { string: "#a5d6e9", keyword: "#f9bc41", variable: "#a6e22e" },
-  showLineNumbers = true,
-  wrapWords = false
-}) => {
-  const [copied, setCopied] = useState4(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    });
-  };
-  const formatCode = () => {
-    return code.split("\n").map((line, index) => /* @__PURE__ */ React4.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ React4.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ React4.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
-  };
-  return /* @__PURE__ */ React4.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ React4.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ React4.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ React4.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ React4.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
-};
-
-// src/components/SmartButton/SmartButton.jsx
-import React5 from "react";
-var SmartButton = ({
-  buttonText = "Submit",
-  isLoading = false,
-  isDisabled = false,
-  icon = null,
-  success = false,
-  error = false,
-  bg = "#7c3aed",
-  textColor = "#fff",
-  padding = "12px 20px",
-  radius = "8px",
-  onClick = () => {
-  }
-}) => {
-  const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
-  const cursorStyle = isDisabled ? "not-allowed" : "pointer";
-  return /* @__PURE__ */ React5.createElement(
-    "button",
-    {
-      onClick: !isDisabled && !isLoading ? onClick : () => {
-      },
-      disabled: isDisabled,
-      style: {
-        background: bgColor,
-        color: textColor,
-        padding,
-        borderRadius: radius,
-        border: "none",
-        cursor: cursorStyle,
-        transition: "background 0.3s ease"
-      },
-      onMouseEnter: (e) => {
-        if (!isDisabled && !isLoading) {
-          e.currentTarget.style.background = "#6d28d9";
-        }
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = bgColor;
-      }
-    },
-    isLoading ? /* @__PURE__ */ React5.createElement("span", null, "Loading...") : /* @__PURE__ */ React5.createElement(React5.Fragment, null, icon && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
-  );
-};
-
-// src/components/CustomInputField/CustomInputField.jsx
-import React6, { useState as useState5 } from "react";
-var CustomInputField = ({
-  label = "Label",
-  placeholder = "Enter text...",
-  errorMessage = "",
-  helperText = "",
-  value = "",
-  bg = "#1e293b",
-  textColor = "#f1f5f9",
-  accent = "#7c3aed",
-  padding = "10px",
-  radius = "8px",
-  onChange = () => {
-  }
-}) => {
-  const [isFocused, setIsFocused] = useState5(false);
-  return /* @__PURE__ */ React6.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React6.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React6.createElement(
-    "input",
-    {
-      type: "text",
-      value,
-      placeholder,
-      onFocus: () => setIsFocused(true),
-      onBlur: () => setIsFocused(false),
-      onChange: (e) => onChange(e.target.value),
-      style: {
-        background: bg,
-        color: textColor,
-        padding,
-        borderRadius: radius,
-        border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
-        transition: "border-color 0.3s ease",
-        width: "100%"
-      }
-    }
-  ), errorMessage && /* @__PURE__ */ React6.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React6.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
-};
-
-// src/components/TextArea/TextArea.jsx
-import React7, { useState as useState6 } from "react";
-var TextArea = ({
-  label = "Label",
-  placeholder = "Type here...",
-  value = "",
-  bg = "#1e293b",
-  textColor = "#f1f5f9",
-  accent = "#2563eb",
-  radius = "8px",
-  padding = "12px",
-  maxLength = 250,
-  onChange = () => {
-  }
-}) => {
-  const [currentValue, setCurrentValue] = useState6(value);
-  const handleChange = (e) => {
-    setCurrentValue(e.target.value);
-    onChange(e.target.value);
-  };
-  return /* @__PURE__ */ React7.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React7.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ React7.createElement(
-    "textarea",
-    {
-      value: currentValue,
-      placeholder,
-      maxLength,
-      onChange: handleChange,
-      style: {
-        background: bg,
-        color: textColor,
-        padding,
-        borderRadius: radius,
-        border: `1px solid ${accent}`,
-        width: "100%",
-        minHeight: "100px",
-        resize: "none",
-        transition: "border-color 0.3s"
-      }
-    }
-  ), /* @__PURE__ */ React7.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
-};
-
-// src/components/SearchBar/SearchBar.jsx
-import React8, { useState as useState7 } from "react";
-var SearchBar = ({
-  placeholder = "Search...",
-  bg = "#1e293b",
-  textColor = "#f1f5f9",
-  accent = "#7c3aed",
-  loading = false,
-  suggestions = [],
-  onChange = () => {
-  },
-  onClear = () => {
-  }
-}) => {
-  const [query, setQuery] = useState7("");
-  const handleInputChange = (e) => {
-    setQuery(e.target.value);
-    onChange(e.target.value);
-  };
-  const handleClear = () => {
-    setQuery("");
-    onClear();
-  };
-  return /* @__PURE__ */ React8.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React8.createElement(
-    "input",
-    {
-      value: query,
-      placeholder,
-      onChange: handleInputChange,
-      style: {
-        background: bg,
-        color: textColor,
-        padding: "10px",
-        borderRadius: "8px",
-        border: "1px solid #cbd5e1",
-        width: "100%",
-        transition: "border-color 0.3s",
-        outline: "none"
-      }
-    }
-  ), query && /* @__PURE__ */ React8.createElement("button", { onClick: handleClear, style: {
-    position: "absolute",
-    right: "10px",
-    top: "50%",
-    transform: "translateY(-50%)",
-    background: "transparent",
-    color: accent,
-    border: "none",
-    cursor: "pointer"
-  } }, "Clear"), loading && /* @__PURE__ */ React8.createElement("div", { style: {
-    position: "absolute",
-    left: "10px",
-    top: "50%",
-    transform: "translateY(-50%)"
-  } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ React8.createElement("ul", { style: {
-    listStyleType: "none",
-    margin: 0,
-    padding: "10px",
-    background: bg,
-    borderRadius: "8px",
-    position: "absolute",
-    zIndex: 1e3,
-    width: "100%",
-    maxHeight: "200px",
-    overflowY: "auto"
-  } }, suggestions.map((suggestion, index) => /* @__PURE__ */ React8.createElement("li", { key: index, style: {
-    padding: "8px",
-    color: textColor,
-    cursor: "pointer",
-    transition: "background 0.2s"
-  }, onClick: () => {
-    setQuery(suggestion);
-    onChange(suggestion);
-  } }, suggestion))));
-};
-
-// src/components/LoadingSpinner/LoadingSpinner.jsx
-import React9 from "react";
-var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
-  return /* @__PURE__ */ React9.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
-};
-
-// src/components/SkeletonLoader/SkeletonLoader.jsx
-import React10 from "react";
-var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
-  const shimmerStyle = {
-    background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
-    backgroundSize: "200% 100%",
-    animation: "shimmer 1.5s infinite",
-    borderRadius: radius
-  };
-  return /* @__PURE__ */ React10.createElement("div", { style: { padding } }, /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React10.createElement("style", null, `@keyframes shimmer {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: 0 0;
-          }
-        }`));
-};
-
-// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
-import React11, { useState as useState8 } from "react";
-var ResponsiveNavbar = ({
-  logo = "Logo",
-  navItems = [],
-  bg = "#1e293b",
-  textColor = "#f1f5f9",
-  accent = "#7c3aed",
-  padding = "10px 20px",
-  radius = "8px",
-  placeholder = "Search...",
-  onNavItemClick = () => {
-  },
-  onSearchChange = () => {
-  },
-  profileAvatar = "https://via.placeholder.com/40"
-}) => {
-  const [menuActive, setMenuActive] = useState8(false);
-  const [searchValue, setSearchValue] = useState8("");
-  const handleSearchChange = (e) => {
-    setSearchValue(e.target.value);
-    onSearchChange(e.target.value);
-  };
-  return /* @__PURE__ */ React11.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(
-    "input",
-    {
-      type: "text",
-      value: searchValue,
-      placeholder,
-      onChange: handleSearchChange,
-      style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
-    }
-  ), /* @__PURE__ */ React11.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React11.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React11.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
-};
-
-// src/components/FileUpload/FileUpload.jsx
-import React12, { useState as useState9 } from "react";
-var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
-} }) => {
-  const [file, setFile] = useState9(null);
-  const [progress, setProgress] = useState9(0);
-  const handleDrop = (event) => {
-    event.preventDefault();
-    const droppedFile = event.dataTransfer.files[0];
-    if (droppedFile) {
-      uploadFile(droppedFile);
-    }
-  };
-  const handleClick = () => {
-    document.getElementById("fileInput").click();
-  };
-  const handleFileChange = (event) => {
-    const selectedFile = event.target.files[0];
-    if (selectedFile) {
-      uploadFile(selectedFile);
-    }
-  };
-  const uploadFile = (selectedFile) => {
-    setFile(selectedFile);
-    const uploadProgress = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(uploadProgress);
-          return 100;
-        }
-        return prev + 10;
-      });
-    }, 100);
-    onChange(selectedFile);
-  };
-  const handleRemove = () => {
-    setFile(null);
-    setProgress(0);
-  };
-  return /* @__PURE__ */ React12.createElement(
-    "div",
-    {
-      onDrop: handleDrop,
-      onDragOver: (e) => e.preventDefault(),
-      onClick: handleClick,
-      style: {
-        background: bg,
-        color: textColor,
-        border: `2px dashed ${accent}`,
-        borderRadius: radius,
-        padding,
-        textAlign: "center",
-        cursor: "pointer"
-      }
-    },
-    /* @__PURE__ */ React12.createElement(
-      "input",
-      {
-        id: "fileInput",
-        type: "file",
-        style: { display: "none" },
-        onChange: handleFileChange
-      }
-    ),
-    file ? /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", null, file.name), /* @__PURE__ */ React12.createElement(
-      "button",
-      {
-        onClick: handleRemove,
-        style: {
-          background: accent,
-          color: "#fff",
-          border: "none",
-          borderRadius: radius,
-          padding: "8px 16px",
-          cursor: "pointer"
-        }
-      },
-      "Remove"
-    ), /* @__PURE__ */ React12.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ React12.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ React12.createElement("p", null, placeholder)
-  );
-};
-
 // src/components/Loader/Loader.jsx
-import React13, { useEffect as useEffect4, useState as useState10 } from "react";
+import React, { useEffect, useState } from "react";
 var Loader = ({
   type = "spinner",
   size = 48,
@@ -578,15 +8,15 @@ var Loader = ({
   label = "",
   speed = 1
 }) => {
-  const [dots, setDots] = useState10(0);
-  const [progress, setProgress] = useState10(0);
+  const [dots, setDots] = useState(0);
+  const [progress, setProgress] = useState(0);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect4(() => {
+  useEffect(() => {
     if (type === "dots") {
       const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
       return () => clearInterval(t);
@@ -608,8 +38,8 @@ var Loader = ({
     borderRadius: "16px",
     fontFamily: "system-ui, sans-serif"
   };
-  const labelEl = label ? /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
-  if (type === "spinner") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React13.createElement(
+  const labelEl = label ? /* @__PURE__ */ React.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
+  if (type === "spinner") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React.createElement(
     "circle",
     {
       cx: "24",
@@ -619,7 +49,7 @@ var Loader = ({
       stroke: alpha(accent, 0.15),
       strokeWidth: "4"
     }
-  ), /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React.createElement(
     "circle",
     {
       cx: "24",
@@ -632,40 +62,40 @@ var Loader = ({
       strokeDasharray: "31.4 94.2",
       style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
     }
-  ), /* @__PURE__ */ React13.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
-  if (type === "pulse") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ React13.createElement("div", { style: {
+  ), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
+  if (type === "pulse") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ React.createElement("div", { style: {
     position: "absolute",
     inset: 0,
     borderRadius: "50%",
     background: alpha(accent, 0.2),
     animation: `pulse ${dur} ease-out infinite`
-  } }), /* @__PURE__ */ React13.createElement("div", { style: {
+  } }), /* @__PURE__ */ React.createElement("div", { style: {
     position: "absolute",
     inset: "25%",
     borderRadius: "50%",
     background: accent
-  } }), /* @__PURE__ */ React13.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
-  if (type === "dots") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React13.createElement("div", { key: i, style: {
+  } }), /* @__PURE__ */ React.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
+  if (type === "dots") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React.createElement("div", { key: i, style: {
     width: size / 5,
     height: size / 5,
     borderRadius: "50%",
     background: dots === i ? accent : alpha(accent, 0.25),
     transition: "background 0.2s"
   } }))), labelEl);
-  if (type === "bar") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: {
+  if (type === "bar") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: {
     width: size * 3,
     height: size / 8,
     background: alpha(accent, 0.15),
     borderRadius: "99px",
     overflow: "hidden"
-  } }, /* @__PURE__ */ React13.createElement("div", { style: {
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
     height: "100%",
     borderRadius: "99px",
     background: accent,
     width: `${progress}%`,
     transition: "width 0.03s linear"
   } })), labelEl);
-  if (type === "ring") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: {
+  if (type === "ring") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: {
     width: size,
     height: size,
     borderRadius: "50%",
@@ -673,86 +103,12 @@ var Loader = ({
     borderTop: `4px solid ${accent}`,
     borderRight: `4px solid ${accent}`,
     animation: `spin ${dur} linear infinite`
-  } }), /* @__PURE__ */ React13.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
+  } }), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
   return null;
 };
 
-// src/components/Avatar/Avatar.jsx
-import React14 from "react";
-var Avatar = ({
-  image = "https://i.pravatar.cc/150?img=32",
-  alt = "User Avatar",
-  size = "60px",
-  borderColor = "#7c3aed",
-  borderWidth = "4px",
-  radius = "50%"
-}) => {
-  return /* @__PURE__ */ React14.createElement("div", { style: {
-    width: size,
-    height: size,
-    borderRadius: radius,
-    border: borderWidth + " solid " + borderColor,
-    overflow: "hidden",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "#f3f4f6"
-  } }, /* @__PURE__ */ React14.createElement("img", { src: image, alt, style: {
-    width: "100%",
-    height: "100%",
-    objectFit: "cover"
-  } }));
-};
-
-// src/components/DividerLine/DividerLine.jsx
-import React15 from "react";
-var DividerLine = ({
-  text = "Section",
-  textColor = "#f1f5f9",
-  lineColor = "#334155",
-  spacing = "20px",
-  thickness = "2px",
-  borderRadius = "4px"
-}) => {
-  return /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ React15.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
-};
-
-// src/components/Tabs/Tabs.jsx
-import React16, { useState as useState11 } from "react";
-var Tabs = ({
-  tabs = [
-    { label: "Tab 1", content: "Content for Tab 1" },
-    { label: "Tab 2", content: "Content for Tab 2" },
-    { label: "Tab 3", content: "Content for Tab 3" }
-  ],
-  bg = "#0f172a",
-  accent = "#2563eb",
-  textColor = "#f1f5f9",
-  radius = "8px"
-}) => {
-  const [activeTab, setActiveTab] = useState11(0);
-  return /* @__PURE__ */ React16.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React16.createElement(
-    "button",
-    {
-      key: index,
-      onClick: () => setActiveTab(index),
-      style: {
-        padding: "10px 20px",
-        background: activeTab === index ? accent : "transparent",
-        color: activeTab === index ? "white" : textColor,
-        border: "none",
-        borderRadius: radius,
-        cursor: "pointer",
-        fontWeight: activeTab === index ? "700" : "400",
-        transition: "background 0.3s, color 0.3s"
-      }
-    },
-    tab.label
-  ))), /* @__PURE__ */ React16.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React16.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React16.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
-};
-
 // src/components/NotificationToast/NotificationToast.jsx
-import React17, { useState as useState12, useEffect as useEffect5 } from "react";
+import React2, { useState as useState2, useEffect as useEffect2 } from "react";
 var NotificationToast = ({
   title = "New Message",
   message = "You have a new notification from the team.",
@@ -763,8 +119,8 @@ var NotificationToast = ({
   radius = "14px",
   showProgress = true
 }) => {
-  const [visible, setVisible] = useState12(true);
-  const [progress, setProgress] = useState12(100);
+  const [visible, setVisible] = useState2(true);
+  const [progress, setProgress] = useState2(100);
   const typeColors = {
     success: "#10b981",
     error: "#ef4444",
@@ -778,7 +134,7 @@ var NotificationToast = ({
     info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
   };
   const color = typeColors[type] || accent;
-  useEffect5(() => {
+  useEffect2(() => {
     if (!showProgress) return;
     const step = 100 / (duration / 50);
     const timer = setInterval(() => {
@@ -794,7 +150,7 @@ var NotificationToast = ({
     return () => clearInterval(timer);
   }, [duration, showProgress]);
   if (!visible) return null;
-  return /* @__PURE__ */ React17.createElement("div", { style: {
+  return /* @__PURE__ */ React2.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "16px 18px",
@@ -805,7 +161,7 @@ var NotificationToast = ({
     border: `1px solid rgba(255,255,255,0.08)`,
     position: "relative",
     overflow: "hidden"
-  } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ React17.createElement("div", { style: {
+  } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ React2.createElement("div", { style: {
     width: 36,
     height: 36,
     borderRadius: "10px",
@@ -815,7 +171,7 @@ var NotificationToast = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  } }, /* @__PURE__ */ React17.createElement(
+  } }, /* @__PURE__ */ React2.createElement(
     "svg",
     {
       width: "16",
@@ -827,8 +183,8 @@ var NotificationToast = ({
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React17.createElement("path", { d: typeIcons[type] || typeIcons.info })
-  )), /* @__PURE__ */ React17.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React17.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ React17.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React2.createElement("path", { d: typeIcons[type] || typeIcons.info })
+  )), /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React2.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ React2.createElement(
     "button",
     {
       onClick: () => setVisible(false),
@@ -842,7 +198,7 @@ var NotificationToast = ({
         lineHeight: 1
       }
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React2.createElement(
       "svg",
       {
         width: "14",
@@ -853,16 +209,16 @@ var NotificationToast = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ React17.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+      /* @__PURE__ */ React2.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
     )
-  )), showProgress && /* @__PURE__ */ React17.createElement("div", { style: {
+  )), showProgress && /* @__PURE__ */ React2.createElement("div", { style: {
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     height: "3px",
     background: "rgba(255,255,255,0.07)"
-  } }, /* @__PURE__ */ React17.createElement("div", { style: {
+  } }, /* @__PURE__ */ React2.createElement("div", { style: {
     height: "100%",
     width: `${progress}%`,
     background: color,
@@ -872,7 +228,7 @@ var NotificationToast = ({
 };
 
 // src/components/AvatarCard/AvatarCard.jsx
-import React18, { useState as useState13 } from "react";
+import React3, { useState as useState3 } from "react";
 var AvatarCard = ({
   name = "Aryan Sharma",
   role = "Frontend Developer",
@@ -885,7 +241,7 @@ var AvatarCard = ({
   bg = "#0f172a",
   radius = "20px"
 }) => {
-  const [followed, setFollowed] = useState13(false);
+  const [followed, setFollowed] = useState3(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -898,7 +254,7 @@ var AvatarCard = ({
     { label: "Following", value: following },
     { label: "Projects", value: projects }
   ];
-  return /* @__PURE__ */ React18.createElement("div", { style: {
+  return /* @__PURE__ */ React3.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "24px 20px",
@@ -909,14 +265,14 @@ var AvatarCard = ({
     border: "1px solid rgba(255,255,255,0.08)",
     position: "relative",
     overflow: "hidden"
-  } }, /* @__PURE__ */ React18.createElement("div", { style: {
+  } }, /* @__PURE__ */ React3.createElement("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     height: "3px",
     background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
-  } }), /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ React18.createElement("div", { style: {
+  } }), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ React3.createElement("div", { style: {
     width: 72,
     height: 72,
     borderRadius: "50%",
@@ -929,7 +285,7 @@ var AvatarCard = ({
     color: "#fff",
     border: `3px solid ${alpha(accent, 0.4)}`,
     marginBottom: "12px"
-  } }, !avatar && initials), /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ React18.createElement("div", { style: {
+  } }, !avatar && initials), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ React3.createElement("div", { style: {
     fontSize: "12px",
     fontWeight: "600",
     color: accent,
@@ -937,14 +293,14 @@ var AvatarCard = ({
     padding: "2px 10px",
     borderRadius: "20px",
     border: `1px solid ${alpha(accent, 0.3)}`
-  } }, role)), /* @__PURE__ */ React18.createElement("p", { style: {
+  } }, role)), /* @__PURE__ */ React3.createElement("p", { style: {
     fontSize: "12px",
     color: "rgba(255,255,255,0.45)",
     textAlign: "center",
     lineHeight: 1.6,
     marginBottom: "18px",
     padding: "0 4px"
-  } }, bio), /* @__PURE__ */ React18.createElement("div", { style: {
+  } }, bio), /* @__PURE__ */ React3.createElement("div", { style: {
     display: "flex",
     justifyContent: "space-around",
     background: "rgba(255,255,255,0.04)",
@@ -952,11 +308,11 @@ var AvatarCard = ({
     borderRadius: "12px",
     padding: "12px 8px",
     marginBottom: "16px"
-  } }, stats.map((s) => /* @__PURE__ */ React18.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
+  } }, stats.map((s) => /* @__PURE__ */ React3.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
 };
 
 // src/components/PricingCard/PricingCard.jsx
-import React19 from "react";
+import React4 from "react";
 var PricingCard = ({
   planName = "Pro Plan",
   description = "For teams that need more power.",
@@ -984,7 +340,7 @@ var PricingCard = ({
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  return /* @__PURE__ */ React19.createElement("div", { style: {
+  return /* @__PURE__ */ React4.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "28px 24px",
@@ -995,14 +351,14 @@ var PricingCard = ({
     border: `1px solid ${alpha(accent, 0.25)}`,
     position: "relative",
     overflow: "hidden"
-  } }, /* @__PURE__ */ React19.createElement("div", { style: {
+  } }, /* @__PURE__ */ React4.createElement("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     height: "3px",
     background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
-  } }), badgeText && /* @__PURE__ */ React19.createElement("div", { style: {
+  } }), badgeText && /* @__PURE__ */ React4.createElement("div", { style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "6px",
@@ -1016,7 +372,7 @@ var PricingCard = ({
     color: accent,
     letterSpacing: "0.5px",
     textTransform: "uppercase"
-  } }, /* @__PURE__ */ React19.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ React19.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React19.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React19.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React19.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ React19.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ React19.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ React19.createElement("div", { style: {
+  } }, /* @__PURE__ */ React4.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React4.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ React4.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ React4.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ React4.createElement("div", { style: {
     width: "18px",
     height: "18px",
     borderRadius: "50%",
@@ -1026,7 +382,7 @@ var PricingCard = ({
     justifyContent: "center",
     background: alpha(accent, 0.18),
     border: `1px solid ${alpha(accent, 0.4)}`
-  } }, /* @__PURE__ */ React19.createElement(
+  } }, /* @__PURE__ */ React4.createElement(
     "svg",
     {
       width: "10",
@@ -1038,8 +394,8 @@ var PricingCard = ({
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React19.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
-  )), f))), /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React4.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
+  )), f))), /* @__PURE__ */ React4.createElement(
     "button",
     {
       onClick: onCtaClick,
@@ -1064,7 +420,7 @@ var PricingCard = ({
 };
 
 // src/components/Navbar/Navbar.jsx
-import React20, { useState as useState14, useEffect as useEffect6 } from "react";
+import React5, { useState as useState4, useEffect as useEffect3 } from "react";
 var Navbar = ({
   logo = "VirtualAI",
   links = ["Home", "Features", "Pricing", "Blog"],
@@ -1076,28 +432,28 @@ var Navbar = ({
   onLinkClick = () => {
   }
 }) => {
-  const [scrolled, setScrolled] = useState14(false);
-  const [menuOpen, setMenuOpen] = useState14(false);
-  const [active, setActive] = useState14("Home");
-  const [isMobile, setIsMobile] = useState14(false);
+  const [scrolled, setScrolled] = useState4(false);
+  const [menuOpen, setMenuOpen] = useState4(false);
+  const [active, setActive] = useState4("Home");
+  const [isMobile, setIsMobile] = useState4(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect6(() => {
+  useEffect3(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect6(() => {
+  useEffect3(() => {
     const handler = () => setScrolled(window.scrollY > 10);
     window.addEventListener("scroll", handler);
     return () => window.removeEventListener("scroll", handler);
   }, []);
-  useEffect6(() => {
+  useEffect3(() => {
     if (!isMobile) setMenuOpen(false);
   }, [isMobile]);
   const handleLink = (link) => {
@@ -1105,7 +461,7 @@ var Navbar = ({
     setMenuOpen(false);
     onLinkClick(link);
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("style", null, `
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("style", null, `
         @keyframes nbSlideDown {
           from { opacity: 0; transform: translateY(-8px); }
           to   { opacity: 1; transform: translateY(0); }
@@ -1114,7 +470,7 @@ var Navbar = ({
         .nb-cta:hover  { opacity: 0.85 !important; }
         .nb-ham:hover  { background: rgba(255,255,255,0.1) !important; }
         .nb-mlink:hover { background: rgba(255,255,255,0.06) !important; }
-      `), /* @__PURE__ */ React20.createElement("nav", { style: {
+      `), /* @__PURE__ */ React5.createElement("nav", { style: {
     position: "sticky",
     top: 0,
     left: 0,
@@ -1128,7 +484,7 @@ var Navbar = ({
     fontFamily: "system-ui, -apple-system, sans-serif",
     width: "100%",
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ React20.createElement("div", { style: {
+  } }, /* @__PURE__ */ React5.createElement("div", { style: {
     maxWidth: "1200px",
     margin: "0 auto",
     padding: "0 20px",
@@ -1138,7 +494,7 @@ var Navbar = ({
     justifyContent: "space-between",
     gap: "16px",
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ React20.createElement("div", { style: {
+  } }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ React5.createElement("div", { style: {
     width: isMobile ? "26px" : "30px",
     height: isMobile ? "26px" : "30px",
     borderRadius: "8px",
@@ -1150,12 +506,12 @@ var Navbar = ({
     fontWeight: "800",
     color: "#fff",
     flexShrink: 0
-  } }, logo[0]), /* @__PURE__ */ React20.createElement("span", { style: {
+  } }, logo[0]), /* @__PURE__ */ React5.createElement("span", { style: {
     fontSize: isMobile ? "14px" : "16px",
     fontWeight: "800",
     color: "#fff",
     letterSpacing: "-0.3px"
-  } }, logo)), !isMobile && /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ React20.createElement(
+  } }, logo)), !isMobile && /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ React5.createElement(
     "button",
     {
       key: link,
@@ -1176,7 +532,7 @@ var Navbar = ({
       }
     },
     link
-  ))), /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React20.createElement(
+  ))), /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React5.createElement(
     "button",
     {
       className: "nb-cta",
@@ -1196,7 +552,7 @@ var Navbar = ({
       }
     },
     ctaText
-  ), isMobile && /* @__PURE__ */ React20.createElement(
+  ), isMobile && /* @__PURE__ */ React5.createElement(
     "button",
     {
       className: "nb-ham",
@@ -1218,7 +574,7 @@ var Navbar = ({
         padding: 0
       }
     },
-    /* @__PURE__ */ React20.createElement("div", { style: {
+    /* @__PURE__ */ React5.createElement("div", { style: {
       width: "16px",
       height: "1.5px",
       background: "rgba(255,255,255,0.7)",
@@ -1226,7 +582,7 @@ var Navbar = ({
       transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
       transition: "transform 0.25s"
     } }),
-    /* @__PURE__ */ React20.createElement("div", { style: {
+    /* @__PURE__ */ React5.createElement("div", { style: {
       width: "16px",
       height: "1.5px",
       background: "rgba(255,255,255,0.7)",
@@ -1234,7 +590,7 @@ var Navbar = ({
       opacity: menuOpen ? 0 : 1,
       transition: "opacity 0.2s"
     } }),
-    /* @__PURE__ */ React20.createElement("div", { style: {
+    /* @__PURE__ */ React5.createElement("div", { style: {
       width: "16px",
       height: "1.5px",
       background: "rgba(255,255,255,0.7)",
@@ -1242,7 +598,7 @@ var Navbar = ({
       transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
       transition: "transform 0.25s"
     } })
-  ))), isMobile && menuOpen && /* @__PURE__ */ React20.createElement("div", { style: {
+  ))), isMobile && menuOpen && /* @__PURE__ */ React5.createElement("div", { style: {
     animation: "nbSlideDown 0.2s ease",
     borderTop: "1px solid rgba(255,255,255,0.06)",
     padding: "10px 16px 16px",
@@ -1250,7 +606,7 @@ var Navbar = ({
     flexDirection: "column",
     gap: "3px",
     background: alpha(bg, 0.98)
-  } }, links.map((link) => /* @__PURE__ */ React20.createElement(
+  } }, links.map((link) => /* @__PURE__ */ React5.createElement(
     "button",
     {
       key: link,
@@ -1275,7 +631,7 @@ var Navbar = ({
       }
     },
     link,
-    active === link && /* @__PURE__ */ React20.createElement(
+    active === link && /* @__PURE__ */ React5.createElement(
       "svg",
       {
         width: "14",
@@ -1286,9 +642,9 @@ var Navbar = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ React20.createElement("polyline", { points: "9 18 15 12 9 6" })
+      /* @__PURE__ */ React5.createElement("polyline", { points: "9 18 15 12 9 6" })
     )
-  )), /* @__PURE__ */ React20.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ React20.createElement(
+  )), /* @__PURE__ */ React5.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ React5.createElement(
     "button",
     {
       onClick: () => {
@@ -1313,7 +669,7 @@ var Navbar = ({
 };
 
 // src/components/Footer/Footer.jsx
-import React21 from "react";
+import React6 from "react";
 var Footer = ({
   logo = "VirtualAI",
   links = ["Home", "Features", "Pricing", "Blog", "Contact"],
@@ -1321,21 +677,21 @@ var Footer = ({
   accent = "#6366f1",
   bg = "#0f172a"
 }) => {
-  return /* @__PURE__ */ React21.createElement("footer", { style: {
+  return /* @__PURE__ */ React6.createElement("footer", { style: {
     background: bg,
     borderTop: "1px solid rgba(255,255,255,0.06)",
     fontFamily: "system-ui, sans-serif",
     width: "100%",
     boxSizing: "border-box",
     padding: "28px 24px"
-  } }, /* @__PURE__ */ React21.createElement("div", { style: {
+  } }, /* @__PURE__ */ React6.createElement("div", { style: {
     maxWidth: "900px",
     margin: "0 auto",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: "20px"
-  } }, /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React21.createElement("div", { style: {
+  } }, /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React6.createElement("div", { style: {
     width: "26px",
     height: "26px",
     borderRadius: "7px",
@@ -1346,7 +702,7 @@ var Footer = ({
     fontSize: "12px",
     fontWeight: "800",
     color: "#fff"
-  } }, logo[0]), /* @__PURE__ */ React21.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ React21.createElement(
+  } }, logo[0]), /* @__PURE__ */ React6.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ React6.createElement(
     "a",
     {
       key: link,
@@ -1363,11 +719,11 @@ var Footer = ({
       onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
     },
     link
-  ))), /* @__PURE__ */ React21.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ React21.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
+  ))), /* @__PURE__ */ React6.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
 };
 
 // src/components/Sidebar/Sidebar.jsx
-import React22, { useState as useState15 } from "react";
+import React7, { useState as useState5 } from "react";
 var Sidebar = ({
   logo = "VirtualAI",
   accent = "#6366f1",
@@ -1376,27 +732,27 @@ var Sidebar = ({
     {
       label: "Dashboard",
       icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
-      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
+      component: /* @__PURE__ */ React7.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React7.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ React7.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
     },
     {
       label: "Analytics",
       icon: "M18 20V10M12 20V4M6 20v-6",
-      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
+      component: /* @__PURE__ */ React7.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React7.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ React7.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
     },
     {
       label: "Users",
       icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
-      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
+      component: /* @__PURE__ */ React7.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React7.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ React7.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
     },
     {
       label: "Settings",
       icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
-      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
+      component: /* @__PURE__ */ React7.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React7.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ React7.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
     }
   ]
 }) => {
-  const [active, setActive] = useState15(0);
-  const [collapsed, setCollapsed] = useState15(false);
+  const [active, setActive] = useState5(0);
+  const [collapsed, setCollapsed] = useState5(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1404,14 +760,14 @@ var Sidebar = ({
     return `rgba(${r},${g},${b},${op})`;
   };
   const activeItem = items[active];
-  return /* @__PURE__ */ React22.createElement("div", { style: {
+  return /* @__PURE__ */ React7.createElement("div", { style: {
     display: "flex",
     height: "480px",
     fontFamily: "system-ui, sans-serif",
     borderRadius: "16px",
     overflow: "hidden",
     border: "1px solid rgba(255,255,255,0.07)"
-  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
     width: collapsed ? "60px" : "200px",
     background: bg,
     borderRight: "1px solid rgba(255,255,255,0.06)",
@@ -1420,7 +776,7 @@ var Sidebar = ({
     transition: "width 0.25s ease",
     flexShrink: 0,
     overflow: "hidden"
-  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
     height: "56px",
     display: "flex",
     alignItems: "center",
@@ -1429,7 +785,7 @@ var Sidebar = ({
     borderBottom: "1px solid rgba(255,255,255,0.05)",
     overflow: "hidden",
     flexShrink: 0
-  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
     width: "28px",
     height: "28px",
     borderRadius: "8px",
@@ -1441,7 +797,7 @@ var Sidebar = ({
     fontSize: "13px",
     fontWeight: "800",
     color: "#fff"
-  } }, logo[0]), !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ React22.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ React22.createElement(
+  } }, logo[0]), !collapsed && /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ React7.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ React7.createElement(
     "button",
     {
       key: i,
@@ -1476,7 +832,7 @@ var Sidebar = ({
         }
       }
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React7.createElement(
       "svg",
       {
         width: "16",
@@ -1489,10 +845,10 @@ var Sidebar = ({
         strokeLinejoin: "round",
         style: { flexShrink: 0 }
       },
-      /* @__PURE__ */ React22.createElement("path", { d: item.icon })
+      /* @__PURE__ */ React7.createElement("path", { d: item.icon })
     ),
-    !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
-  ))), /* @__PURE__ */ React22.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ React22.createElement(
+    !collapsed && /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
+  ))), /* @__PURE__ */ React7.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ React7.createElement(
     "button",
     {
       onClick: () => setCollapsed((c) => !c),
@@ -1512,7 +868,7 @@ var Sidebar = ({
       onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
       onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React7.createElement(
       "svg",
       {
         width: "15",
@@ -1523,29 +879,29 @@ var Sidebar = ({
         strokeWidth: "2",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ React22.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
+      /* @__PURE__ */ React7.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
     )
-  ))), /* @__PURE__ */ React22.createElement("div", { style: {
+  ))), /* @__PURE__ */ React7.createElement("div", { style: {
     flex: 1,
     background: "rgba(255,255,255,0.02)",
     overflow: "auto"
-  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
     height: "56px",
     display: "flex",
     alignItems: "center",
     padding: "0 20px",
     borderBottom: "1px solid rgba(255,255,255,0.05)",
     gap: "10px"
-  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
     width: "6px",
     height: "6px",
     borderRadius: "50%",
     background: accent
-  } }), /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ React22.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
+  } }), /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ React7.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
 };
 
 // src/components/Charts/Charts.jsx
-import React23, { useState as useState16 } from "react";
+import React8, { useState as useState6 } from "react";
 var Charts = ({
   type = "bar",
   data = [
@@ -1565,7 +921,7 @@ var Charts = ({
   showGrid = true,
   showValues = true
 }) => {
-  const [hovered, setHovered] = useState16(null);
+  const [hovered, setHovered] = useState6(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1592,7 +948,7 @@ var Charts = ({
   }));
   const BarChart = () => {
     const barW = Math.min(28, chartW / data.length * 0.55);
-    return /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ React23.createElement("g", { key: i }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React8.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ React8.createElement("g", { key: i }, /* @__PURE__ */ React8.createElement(
       "line",
       {
         x1: padL,
@@ -1602,7 +958,7 @@ var Charts = ({
         stroke: "rgba(255,255,255,0.05)",
         strokeWidth: "1"
       }
-    ), /* @__PURE__ */ React23.createElement(
+    ), /* @__PURE__ */ React8.createElement(
       "text",
       {
         x: padL - 4,
@@ -1617,7 +973,7 @@ var Charts = ({
       const barH = (d.value - min) / (max - min || 1) * chartH;
       const y = padT + chartH - barH;
       const isH = hovered === i;
-      return /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement(
+      return /* @__PURE__ */ React8.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React8.createElement(
         "rect",
         {
           x,
@@ -1627,7 +983,7 @@ var Charts = ({
           fill: "transparent",
           rx: "4"
         }
-      ), /* @__PURE__ */ React23.createElement(
+      ), /* @__PURE__ */ React8.createElement(
         "rect",
         {
           x,
@@ -1638,7 +994,7 @@ var Charts = ({
           rx: "4",
           style: { transition: "fill 0.15s" }
         }
-      ), showValues && isH && /* @__PURE__ */ React23.createElement(
+      ), showValues && isH && /* @__PURE__ */ React8.createElement(
         "text",
         {
           x: x + barW / 2,
@@ -1649,7 +1005,7 @@ var Charts = ({
           fontWeight: "700"
         },
         d.value
-      ), /* @__PURE__ */ React23.createElement(
+      ), /* @__PURE__ */ React8.createElement(
         "text",
         {
           x: x + barW / 2,
@@ -1662,7 +1018,7 @@ var Charts = ({
       ));
     }));
   };
-  const LineChart = () => /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React23.createElement("defs", null, /* @__PURE__ */ React23.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React23.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ React23.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React23.createElement("g", { key: i }, /* @__PURE__ */ React23.createElement(
+  const LineChart = () => /* @__PURE__ */ React8.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React8.createElement("defs", null, /* @__PURE__ */ React8.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React8.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ React8.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React8.createElement("g", { key: i }, /* @__PURE__ */ React8.createElement(
     "line",
     {
       x1: padL,
@@ -1672,7 +1028,7 @@ var Charts = ({
       stroke: "rgba(255,255,255,0.05)",
       strokeWidth: "1"
     }
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "text",
     {
       x: padL - 4,
@@ -1682,7 +1038,7 @@ var Charts = ({
       fontSize: "9"
     },
     g.val
-  ))), /* @__PURE__ */ React23.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ React23.createElement(
+  ))), /* @__PURE__ */ React8.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ React8.createElement(
     "polyline",
     {
       points,
@@ -1694,7 +1050,7 @@ var Charts = ({
     }
   ), data.map((d, i) => {
     const isH = hovered === i;
-    return /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React8.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React8.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ React8.createElement(
       "circle",
       {
         cx: getX(i),
@@ -1705,7 +1061,7 @@ var Charts = ({
         strokeWidth: "2",
         style: { transition: "all 0.15s" }
       }
-    ), showValues && isH && /* @__PURE__ */ React23.createElement(
+    ), showValues && isH && /* @__PURE__ */ React8.createElement(
       "text",
       {
         x: getX(i),
@@ -1716,7 +1072,7 @@ var Charts = ({
         fontWeight: "700"
       },
       d.value
-    ), /* @__PURE__ */ React23.createElement(
+    ), /* @__PURE__ */ React8.createElement(
       "text",
       {
         x: getX(i),
@@ -1756,7 +1112,7 @@ var Charts = ({
       startAngle += angle;
       return slice;
     });
-    return /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ React23.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React8.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ React8.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React8.createElement(
       "path",
       {
         d: s.path,
@@ -1766,7 +1122,7 @@ var Charts = ({
         transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
         style: { transition: "transform 0.15s", cursor: "pointer" }
       }
-    ))), hovered !== null && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+    ))), hovered !== null && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
       "text",
       {
         x: cx,
@@ -1777,7 +1133,7 @@ var Charts = ({
         fontWeight: "800"
       },
       (_a = data[hovered]) == null ? void 0 : _a.value
-    ), /* @__PURE__ */ React23.createElement(
+    ), /* @__PURE__ */ React8.createElement(
       "text",
       {
         x: cx,
@@ -1787,7 +1143,7 @@ var Charts = ({
         fontSize: "9"
       },
       (_b = data[hovered]) == null ? void 0 : _b.label
-    )), hovered === null && /* @__PURE__ */ React23.createElement(
+    )), hovered === null && /* @__PURE__ */ React8.createElement(
       "text",
       {
         x: cx,
@@ -1799,7 +1155,7 @@ var Charts = ({
       "Hover slice"
     ));
   };
-  const AreaChart = () => /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React23.createElement("defs", null, /* @__PURE__ */ React23.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React23.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ React23.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React23.createElement("g", { key: i }, /* @__PURE__ */ React23.createElement(
+  const AreaChart = () => /* @__PURE__ */ React8.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React8.createElement("defs", null, /* @__PURE__ */ React8.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React8.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ React8.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React8.createElement("g", { key: i }, /* @__PURE__ */ React8.createElement(
     "line",
     {
       x1: padL,
@@ -1809,7 +1165,7 @@ var Charts = ({
       stroke: "rgba(255,255,255,0.05)",
       strokeWidth: "1"
     }
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "text",
     {
       x: padL - 4,
@@ -1819,7 +1175,7 @@ var Charts = ({
       fontSize: "9"
     },
     g.val
-  ))), /* @__PURE__ */ React23.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ React23.createElement(
+  ))), /* @__PURE__ */ React8.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ React8.createElement(
     "polyline",
     {
       points,
@@ -1829,7 +1185,7 @@ var Charts = ({
       strokeLinejoin: "round",
       strokeLinecap: "round"
     }
-  ), data.map((d, i) => /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+  ), data.map((d, i) => /* @__PURE__ */ React8.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React8.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     "line",
     {
       x1: getX(i),
@@ -1840,7 +1196,7 @@ var Charts = ({
       strokeWidth: "1",
       strokeDasharray: "3 3"
     }
-  ), showValues && /* @__PURE__ */ React23.createElement(
+  ), showValues && /* @__PURE__ */ React8.createElement(
     "text",
     {
       x: getX(i),
@@ -1851,7 +1207,7 @@ var Charts = ({
       fontWeight: "700"
     },
     d.value
-  )), /* @__PURE__ */ React23.createElement(
+  )), /* @__PURE__ */ React8.createElement(
     "text",
     {
       x: getX(i),
@@ -1863,12 +1219,12 @@ var Charts = ({
     d.label
   ))));
   const renderChart = () => {
-    if (type === "line") return /* @__PURE__ */ React23.createElement(LineChart, null);
-    if (type === "pie") return /* @__PURE__ */ React23.createElement(PieChart, null);
-    if (type === "area") return /* @__PURE__ */ React23.createElement(AreaChart, null);
-    return /* @__PURE__ */ React23.createElement(BarChart, null);
+    if (type === "line") return /* @__PURE__ */ React8.createElement(LineChart, null);
+    if (type === "pie") return /* @__PURE__ */ React8.createElement(PieChart, null);
+    if (type === "area") return /* @__PURE__ */ React8.createElement(AreaChart, null);
+    return /* @__PURE__ */ React8.createElement(BarChart, null);
   };
-  return /* @__PURE__ */ React23.createElement("div", { style: {
+  return /* @__PURE__ */ React8.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "20px",
@@ -1877,7 +1233,7 @@ var Charts = ({
     width: "100%",
     maxWidth: "360px",
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ React23.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ React23.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ React23.createElement("span", { style: {
+  } }, /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ React8.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ React8.createElement("span", { style: {
     fontSize: "10px",
     fontWeight: "700",
     padding: "3px 9px",
@@ -1890,7 +1246,7 @@ var Charts = ({
 };
 
 // src/components/ImageCard/ImageCard.jsx
-import React24, { useState as useState17 } from "react";
+import React9, { useState as useState7 } from "react";
 var ImageCard = ({
   image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
   tag = "Travel",
@@ -1903,14 +1259,14 @@ var ImageCard = ({
   onButtonClick = () => {
   }
 }) => {
-  const [hovered, setHovered] = useState17(false);
+  const [hovered, setHovered] = useState7(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
@@ -1927,7 +1283,7 @@ var ImageCard = ({
         boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
       }
     },
-    /* @__PURE__ */ React24.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React9.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React9.createElement(
       "img",
       {
         src: image,
@@ -1940,11 +1296,11 @@ var ImageCard = ({
           transition: "transform 0.4s ease"
         }
       }
-    ), /* @__PURE__ */ React24.createElement("div", { style: {
+    ), /* @__PURE__ */ React9.createElement("div", { style: {
       position: "absolute",
       inset: 0,
       background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
-    } }), tag && /* @__PURE__ */ React24.createElement("div", { style: {
+    } }), tag && /* @__PURE__ */ React9.createElement("div", { style: {
       position: "absolute",
       top: "12px",
       left: "12px",
@@ -1957,18 +1313,18 @@ var ImageCard = ({
       letterSpacing: "0.5px",
       textTransform: "uppercase"
     } }, tag)),
-    /* @__PURE__ */ React24.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React24.createElement("h3", { style: {
+    /* @__PURE__ */ React9.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React9.createElement("h3", { style: {
       fontSize: "15px",
       fontWeight: "700",
       color: "#fff",
       margin: "0 0 8px",
       lineHeight: 1.4
-    } }, title), /* @__PURE__ */ React24.createElement("p", { style: {
+    } }, title), /* @__PURE__ */ React9.createElement("p", { style: {
       fontSize: "13px",
       color: "rgba(255,255,255,0.45)",
       lineHeight: 1.65,
       margin: "0 0 18px"
-    } }, description), /* @__PURE__ */ React24.createElement(
+    } }, description), /* @__PURE__ */ React9.createElement(
       "button",
       {
         onClick: onButtonClick,
@@ -1994,7 +1350,7 @@ var ImageCard = ({
 };
 
 // src/components/ImageSlider/ImageSlider.jsx
-import React25, { useState as useState18 } from "react";
+import React10, { useState as useState8 } from "react";
 var ImageSlider = ({
   images = [
     {
@@ -2025,8 +1381,8 @@ var ImageSlider = ({
   showCaption = true,
   autoPlay = false
 }) => {
-  const [current, setCurrent] = useState18(0);
-  const [dir, setDir] = useState18(null);
+  const [current, setCurrent] = useState8(0);
+  const [dir, setDir] = useState8(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -2046,7 +1402,7 @@ var ImageSlider = ({
     setCurrent(i);
   };
   const img = images[current];
-  return /* @__PURE__ */ React25.createElement("div", { style: {
+  return /* @__PURE__ */ React10.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     overflow: "hidden",
@@ -2054,7 +1410,7 @@ var ImageSlider = ({
     border: "1px solid rgba(255,255,255,0.07)",
     fontFamily: "system-ui, sans-serif",
     boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
-  } }, /* @__PURE__ */ React25.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ React25.createElement(
+  } }, /* @__PURE__ */ React10.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ React10.createElement(
     "img",
     {
       key: current,
@@ -2067,11 +1423,11 @@ var ImageSlider = ({
         animation: `sliderFade 0.35s ease`
       }
     }
-  ), /* @__PURE__ */ React25.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ React25.createElement("div", { style: {
+  ), /* @__PURE__ */ React10.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ React10.createElement("div", { style: {
     position: "absolute",
     inset: 0,
     background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
-  } }), img.tag && /* @__PURE__ */ React25.createElement("div", { style: {
+  } }), img.tag && /* @__PURE__ */ React10.createElement("div", { style: {
     position: "absolute",
     top: "12px",
     left: "12px",
@@ -2083,7 +1439,7 @@ var ImageSlider = ({
     color: "#fff",
     letterSpacing: "0.5px",
     textTransform: "uppercase"
-  } }, img.tag), /* @__PURE__ */ React25.createElement("div", { style: {
+  } }, img.tag), /* @__PURE__ */ React10.createElement("div", { style: {
     position: "absolute",
     top: "12px",
     right: "12px",
@@ -2093,7 +1449,7 @@ var ImageSlider = ({
     fontSize: "10px",
     fontWeight: "600",
     color: "rgba(255,255,255,0.7)"
-  } }, current + 1, " / ", images.length), /* @__PURE__ */ React25.createElement(
+  } }, current + 1, " / ", images.length), /* @__PURE__ */ React10.createElement(
     "button",
     {
       onClick: prev,
@@ -2118,7 +1474,7 @@ var ImageSlider = ({
       onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
       onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React10.createElement(
       "svg",
       {
         width: "14",
@@ -2129,9 +1485,9 @@ var ImageSlider = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ React25.createElement("polyline", { points: "15 18 9 12 15 6" })
+      /* @__PURE__ */ React10.createElement("polyline", { points: "15 18 9 12 15 6" })
     )
-  ), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     "button",
     {
       onClick: next,
@@ -2156,7 +1512,7 @@ var ImageSlider = ({
       onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
       onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React10.createElement(
       "svg",
       {
         width: "14",
@@ -2167,9 +1523,9 @@ var ImageSlider = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ React25.createElement("polyline", { points: "9 18 15 12 9 6" })
+      /* @__PURE__ */ React10.createElement("polyline", { points: "9 18 15 12 9 6" })
     )
-  )), showCaption && /* @__PURE__ */ React25.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ React25.createElement(
+  )), showCaption && /* @__PURE__ */ React10.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ React10.createElement(
     "p",
     {
       style: {
@@ -2183,12 +1539,12 @@ var ImageSlider = ({
       key: current + "-title"
     },
     img.title
-  )), showDots && /* @__PURE__ */ React25.createElement("div", { style: {
+  )), showDots && /* @__PURE__ */ React10.createElement("div", { style: {
     display: "flex",
     justifyContent: "center",
     gap: "6px",
     padding: "12px 16px 16px"
-  } }, images.map((_, i) => /* @__PURE__ */ React25.createElement(
+  } }, images.map((_, i) => /* @__PURE__ */ React10.createElement(
     "button",
     {
       key: i,
@@ -2208,7 +1564,7 @@ var ImageSlider = ({
 };
 
 // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
-import React26, { useState as useState19, useEffect as useEffect7, useCallback } from "react";
+import React11, { useState as useState9, useEffect as useEffect4, useCallback } from "react";
 var BackgoundImageSlider = ({
   images = [
     {
@@ -2244,8 +1600,8 @@ var BackgoundImageSlider = ({
   autoPlay = false,
   autoPlayInterval = 4e3
 }) => {
-  const [current, setCurrent] = useState19(0);
-  const [animating, setAnimating] = useState19(false);
+  const [current, setCurrent] = useState9(0);
+  const [animating, setAnimating] = useState9(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -2260,17 +1616,17 @@ var BackgoundImageSlider = ({
   }, [animating, images.length]);
   const prev = () => go(current - 1);
   const next = () => go(current + 1);
-  useEffect7(() => {
+  useEffect4(() => {
     if (!autoPlay) return;
     const t = setInterval(() => go(current + 1), autoPlayInterval);
     return () => clearInterval(t);
   }, [autoPlay, autoPlayInterval, current, go]);
   const img = images[current];
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("style", null, `
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("style", null, `
         @keyframes hs-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
         @keyframes hs-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
         .hs-prev:hover, .hs-next:hover { background: rgba(0,0,0,0.65) !important; border-color: rgba(255,255,255,0.35) !important; }
-      `), /* @__PURE__ */ React26.createElement("div", { style: {
+      `), /* @__PURE__ */ React11.createElement("div", { style: {
     position: "relative",
     width,
     height,
@@ -2278,7 +1634,7 @@ var BackgoundImageSlider = ({
     overflow: "hidden",
     fontFamily: "system-ui, -apple-system, sans-serif",
     userSelect: "none"
-  } }, /* @__PURE__ */ React26.createElement(
+  } }, /* @__PURE__ */ React11.createElement(
     "img",
     {
       key: current,
@@ -2293,11 +1649,11 @@ var BackgoundImageSlider = ({
         animation: "hs-fade 0.4s ease"
       }
     }
-  ), /* @__PURE__ */ React26.createElement("div", { style: {
+  ), /* @__PURE__ */ React11.createElement("div", { style: {
     position: "absolute",
     inset: 0,
     background: "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%)"
-  } }), img.tag && /* @__PURE__ */ React26.createElement(
+  } }), img.tag && /* @__PURE__ */ React11.createElement(
     "div",
     {
       key: current + "-tag",
@@ -2317,7 +1673,7 @@ var BackgoundImageSlider = ({
       }
     },
     img.tag
-  ), /* @__PURE__ */ React26.createElement("div", { style: {
+  ), /* @__PURE__ */ React11.createElement("div", { style: {
     position: "absolute",
     top: "24px",
     right: "28px",
@@ -2327,7 +1683,7 @@ var BackgoundImageSlider = ({
     fontSize: "11px",
     fontWeight: "600",
     color: "rgba(255,255,255,0.7)"
-  } }, current + 1, " / ", images.length), /* @__PURE__ */ React26.createElement(
+  } }, current + 1, " / ", images.length), /* @__PURE__ */ React11.createElement(
     "button",
     {
       className: "hs-prev",
@@ -2352,7 +1708,7 @@ var BackgoundImageSlider = ({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React11.createElement(
       "svg",
       {
         width: "18",
@@ -2364,9 +1720,9 @@ var BackgoundImageSlider = ({
         strokeLinecap: "round",
         strokeLinejoin: "round"
       },
-      /* @__PURE__ */ React26.createElement("polyline", { points: "15 18 9 12 15 6" })
+      /* @__PURE__ */ React11.createElement("polyline", { points: "15 18 9 12 15 6" })
     )
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     "button",
     {
       className: "hs-next",
@@ -2391,7 +1747,7 @@ var BackgoundImageSlider = ({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React11.createElement(
       "svg",
       {
         width: "18",
@@ -2403,15 +1759,15 @@ var BackgoundImageSlider = ({
         strokeLinecap: "round",
         strokeLinejoin: "round"
       },
-      /* @__PURE__ */ React26.createElement("polyline", { points: "9 18 15 12 9 6" })
+      /* @__PURE__ */ React11.createElement("polyline", { points: "9 18 15 12 9 6" })
     )
-  ), /* @__PURE__ */ React26.createElement("div", { style: {
+  ), /* @__PURE__ */ React11.createElement("div", { style: {
     position: "absolute",
     bottom: showDots ? "56px" : "28px",
     left: "28px",
     right: "28px",
     zIndex: 5
-  } }, /* @__PURE__ */ React26.createElement(
+  } }, /* @__PURE__ */ React11.createElement(
     "h2",
     {
       key: current + "-title",
@@ -2427,7 +1783,7 @@ var BackgoundImageSlider = ({
       }
     },
     img.title
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     "p",
     {
       key: current + "-desc",
@@ -2442,7 +1798,7 @@ var BackgoundImageSlider = ({
       }
     },
     img.description
-  )), showDots && /* @__PURE__ */ React26.createElement("div", { style: {
+  )), showDots && /* @__PURE__ */ React11.createElement("div", { style: {
     position: "absolute",
     bottom: "20px",
     left: 0,
@@ -2451,7 +1807,7 @@ var BackgoundImageSlider = ({
     justifyContent: "center",
     gap: "6px",
     zIndex: 5
-  } }, images.map((_, i) => /* @__PURE__ */ React26.createElement(
+  } }, images.map((_, i) => /* @__PURE__ */ React11.createElement(
     "button",
     {
       key: i,
@@ -2471,7 +1827,7 @@ var BackgoundImageSlider = ({
 };
 
 // src/components/PageLoader/PageLoader.jsx
-import React27, { useState as useState20, useEffect as useEffect8 } from "react";
+import React12, { useState as useState10, useEffect as useEffect5 } from "react";
 var PageLoader = ({
   logo = "VirtualAI",
   accent = "#6366f1",
@@ -2483,15 +1839,15 @@ var PageLoader = ({
   onComplete = () => {
   }
 }) => {
-  const [progress, setProgress] = useState20(0);
-  const [done, setDone] = useState20(false);
+  const [progress, setProgress] = useState10(0);
+  const [done, setDone] = useState10(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect8(() => {
+  useEffect5(() => {
     const steps = 100;
     const interval = duration / steps;
     let current = 0;
@@ -2509,13 +1865,13 @@ var PageLoader = ({
     return () => clearInterval(timer);
   }, [duration]);
   if (done) return null;
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("style", null, `
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("style", null, `
         @keyframes pl-spin  { to { transform: rotate(360deg); } }
         @keyframes pl-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
         @keyframes pl-dot   { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }
         @keyframes pl-fade  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
         @keyframes pl-bar   { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
-      `), /* @__PURE__ */ React27.createElement("div", { style: {
+      `), /* @__PURE__ */ React12.createElement("div", { style: {
     width: "100%",
     height: "100%",
     background: bg,
@@ -2526,7 +1882,7 @@ var PageLoader = ({
     gap: "28px",
     fontFamily: "system-ui, -apple-system, sans-serif",
     animation: "pl-fade 0.3s ease"
-  } }, /* @__PURE__ */ React27.createElement("div", { style: {
+  } }, /* @__PURE__ */ React12.createElement("div", { style: {
     position: "absolute",
     top: "-100px",
     left: "-100px",
@@ -2536,7 +1892,7 @@ var PageLoader = ({
     background: `radial-gradient(circle, ${alpha(accent, 0.12)}, transparent 70%)`,
     filter: "blur(60px)",
     pointerEvents: "none"
-  } }), /* @__PURE__ */ React27.createElement("div", { style: {
+  } }), /* @__PURE__ */ React12.createElement("div", { style: {
     position: "absolute",
     bottom: "-100px",
     right: "-100px",
@@ -2546,7 +1902,7 @@ var PageLoader = ({
     background: `radial-gradient(circle, ${alpha(accent, 0.08)}, transparent 70%)`,
     filter: "blur(60px)",
     pointerEvents: "none"
-  } }), /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ React27.createElement("div", { style: {
+  } }), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ React12.createElement("div", { style: {
     width: "36px",
     height: "36px",
     borderRadius: "10px",
@@ -2558,7 +1914,7 @@ var PageLoader = ({
     fontWeight: "800",
     color: "#fff",
     animation: type === "pulse" ? `pl-pulse 1.5s ease infinite` : "none"
-  } }, logo[0]), /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ React27.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ React27.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ React27.createElement(
+  } }, logo[0]), /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ React12.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ React12.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ React12.createElement(
     "circle",
     {
       cx: "28",
@@ -2568,7 +1924,7 @@ var PageLoader = ({
       stroke: alpha(accent, 0.12),
       strokeWidth: "4"
     }
-  ), /* @__PURE__ */ React27.createElement(
+  ), /* @__PURE__ */ React12.createElement(
     "circle",
     {
       cx: "28",
@@ -2581,7 +1937,7 @@ var PageLoader = ({
       strokeDasharray: "34.8 104.4",
       style: { transformOrigin: "center", animation: "pl-spin 0.9s linear infinite" }
     }
-  )), /* @__PURE__ */ React27.createElement("span", { style: {
+  )), /* @__PURE__ */ React12.createElement("span", { style: {
     position: "absolute",
     inset: 0,
     display: "flex",
@@ -2590,26 +1946,26 @@ var PageLoader = ({
     fontSize: "11px",
     fontWeight: "700",
     color: accent
-  } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React27.createElement("div", { key: i, style: {
+  } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React12.createElement("div", { key: i, style: {
     width: "12px",
     height: "12px",
     borderRadius: "50%",
     background: accent,
     animation: `pl-dot 1.2s ease infinite`,
     animationDelay: `${i * 0.2}s`
-  } }))), type === "pulse" && /* @__PURE__ */ React27.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ React27.createElement("div", { key: i, style: {
+  } }))), type === "pulse" && /* @__PURE__ */ React12.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ React12.createElement("div", { key: i, style: {
     position: "absolute",
     inset: 0,
     borderRadius: "50%",
     background: alpha(accent, 0.3),
     animation: `pl-pulse 1.5s ease infinite`,
     animationDelay: `${i * 0.4}s`
-  } })), /* @__PURE__ */ React27.createElement("div", { style: {
+  } })), /* @__PURE__ */ React12.createElement("div", { style: {
     position: "absolute",
     inset: "30%",
     borderRadius: "50%",
     background: accent
-  } })), type === "ring" && /* @__PURE__ */ React27.createElement("div", { style: {
+  } })), type === "ring" && /* @__PURE__ */ React12.createElement("div", { style: {
     width: "52px",
     height: "52px",
     borderRadius: "50%",
@@ -2617,13 +1973,13 @@ var PageLoader = ({
     borderTop: `4px solid ${accent}`,
     borderRight: `4px solid ${accent}`,
     animation: "pl-spin 0.9s linear infinite"
-  } }), type === "bar" && /* @__PURE__ */ React27.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React27.createElement("div", { style: {
+  } }), type === "bar" && /* @__PURE__ */ React12.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React12.createElement("div", { style: {
     width: "100%",
     height: "4px",
     background: alpha(accent, 0.15),
     borderRadius: "2px",
     overflow: "hidden"
-  } }, /* @__PURE__ */ React27.createElement("div", { style: {
+  } }, /* @__PURE__ */ React12.createElement("div", { style: {
     height: "100%",
     width: `${progress}%`,
     borderRadius: "2px",
@@ -2631,39 +1987,478 @@ var PageLoader = ({
     backgroundSize: "200% 100%",
     animation: "pl-bar 1.2s linear infinite",
     transition: "width 0.03s linear"
-  } })), /* @__PURE__ */ React27.createElement("div", { style: {
+  } })), /* @__PURE__ */ React12.createElement("div", { style: {
     display: "flex",
     justifyContent: "space-between",
     fontSize: "11px",
     color: "rgba(255,255,255,0.3)"
-  } }, /* @__PURE__ */ React27.createElement("span", null, loadingText), /* @__PURE__ */ React27.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ React27.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ React27.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React27.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ React27.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
+  } }, /* @__PURE__ */ React12.createElement("span", null, loadingText), /* @__PURE__ */ React12.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ React12.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ React12.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React12.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ React12.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
+};
+
+// src/components/OTPInput/OTPInput.jsx
+import React13, { useState as useState11, useRef, useEffect as useEffect6 } from "react";
+var OTPInput = ({
+  length = 6,
+  onComplete = () => {
+  },
+  onCancel = () => {
+  },
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "16px",
+  label = "Enter verification code",
+  subLabel = "We sent a code to your email",
+  errorText = "",
+  resendText = "Resend code",
+  onResend = () => {
+  }
+}) => {
+  const [otp, setOtp] = useState11(Array(length).fill(""));
+  const [focused, setFocused] = useState11(0);
+  const [completed, setCompleted] = useState11(false);
+  const [resendTimer, setResendTimer] = useState11(30);
+  const inputs = useRef([]);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  useEffect6(() => {
+    var _a;
+    (_a = inputs.current[0]) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect6(() => {
+    if (resendTimer <= 0) return;
+    const t = setInterval(() => setResendTimer((s) => s - 1), 1e3);
+    return () => clearInterval(t);
+  }, [resendTimer]);
+  const handleChange = (e, i) => {
+    var _a;
+    const val = e.target.value.replace(/\D/g, "").slice(-1);
+    const newOtp = [...otp];
+    newOtp[i] = val;
+    setOtp(newOtp);
+    if (val && i < length - 1) {
+      (_a = inputs.current[i + 1]) == null ? void 0 : _a.focus();
+      setFocused(i + 1);
+    }
+    if (newOtp.every((v) => v !== "")) {
+      setCompleted(true);
+      onComplete(newOtp.join(""));
+    } else {
+      setCompleted(false);
+    }
+  };
+  const handleKeyDown = (e, i) => {
+    var _a, _b, _c;
+    if (e.key === "Backspace") {
+      const newOtp = [...otp];
+      if (otp[i]) {
+        newOtp[i] = "";
+        setOtp(newOtp);
+      } else if (i > 0) {
+        newOtp[i - 1] = "";
+        setOtp(newOtp);
+        (_a = inputs.current[i - 1]) == null ? void 0 : _a.focus();
+        setFocused(i - 1);
+      }
+      setCompleted(false);
+    }
+    if (e.key === "ArrowLeft" && i > 0) {
+      (_b = inputs.current[i - 1]) == null ? void 0 : _b.focus();
+      setFocused(i - 1);
+    }
+    if (e.key === "ArrowRight" && i < length - 1) {
+      (_c = inputs.current[i + 1]) == null ? void 0 : _c.focus();
+      setFocused(i + 1);
+    }
+  };
+  const handlePaste = (e) => {
+    var _a;
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    const newOtp = [...otp];
+    pasted.split("").forEach((ch, i) => {
+      newOtp[i] = ch;
+    });
+    setOtp(newOtp);
+    const nextIndex = Math.min(pasted.length, length - 1);
+    (_a = inputs.current[nextIndex]) == null ? void 0 : _a.focus();
+    setFocused(nextIndex);
+    if (newOtp.every((v) => v !== "")) {
+      setCompleted(true);
+      onComplete(newOtp.join(""));
+    }
+  };
+  const handleResend = () => {
+    var _a;
+    setOtp(Array(length).fill(""));
+    setCompleted(false);
+    setResendTimer(30);
+    (_a = inputs.current[0]) == null ? void 0 : _a.focus();
+    setFocused(0);
+    onResend();
+  };
+  return /* @__PURE__ */ React13.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "28px 24px",
+    width: "fit-content",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
+  } }, /* @__PURE__ */ React13.createElement("div", { style: { textAlign: "center", marginBottom: "24px" } }, /* @__PURE__ */ React13.createElement("div", { style: {
+    width: "44px",
+    height: "44px",
+    borderRadius: "12px",
+    background: alpha(accent, 0.12),
+    border: `1px solid ${alpha(accent, 0.25)}`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto 14px"
+  } }, /* @__PURE__ */ React13.createElement(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React13.createElement("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ React13.createElement("path", { d: "M16 3l-4 4-4-4" })
+  )), /* @__PURE__ */ React13.createElement("p", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 5px" } }, label), /* @__PURE__ */ React13.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", margin: 0 } }, subLabel)), /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", marginBottom: "8px" } }, otp.map((val, i) => /* @__PURE__ */ React13.createElement(
+    "input",
+    {
+      key: i,
+      ref: (el) => inputs.current[i] = el,
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: val,
+      onChange: (e) => handleChange(e, i),
+      onKeyDown: (e) => handleKeyDown(e, i),
+      onPaste: handlePaste,
+      onFocus: () => setFocused(i),
+      style: {
+        width: "44px",
+        height: "52px",
+        textAlign: "center",
+        fontSize: "20px",
+        fontWeight: "700",
+        color: "#fff",
+        background: val ? alpha(accent, 0.1) : "rgba(255,255,255,0.04)",
+        border: `1.5px solid ${errorText ? "rgba(239,68,68,0.6)" : focused === i ? accent : val ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"}`,
+        borderRadius: "12px",
+        outline: "none",
+        caretColor: accent,
+        transition: "all 0.2s",
+        fontFamily: "inherit"
+      }
+    }
+  ))), length === 6 && /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "8px" } }, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "10px" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React13.createElement("div", { key: i, style: { width: "44px" } })), /* @__PURE__ */ React13.createElement("div", { style: { width: "10px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React13.createElement("div", { style: { width: "6px", height: "1.5px", background: "rgba(255,255,255,0.15)", borderRadius: "1px" } })), [0, 1, 2].map((i) => /* @__PURE__ */ React13.createElement("div", { key: i, style: { width: "44px" } })))), errorText && /* @__PURE__ */ React13.createElement("p", { style: {
+    fontSize: "12px",
+    color: "#f87171",
+    textAlign: "center",
+    margin: "6px 0 0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "5px"
+  } }, /* @__PURE__ */ React13.createElement(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ React13.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ React13.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ React13.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ), errorText), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      onClick: () => completed && onComplete(otp.join("")),
+      disabled: !completed,
+      style: {
+        width: "100%",
+        padding: "12px",
+        borderRadius: "12px",
+        border: "none",
+        marginTop: "20px",
+        background: completed ? `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})` : "rgba(255,255,255,0.06)",
+        color: completed ? "#fff" : "rgba(255,255,255,0.25)",
+        fontSize: "14px",
+        fontWeight: "700",
+        cursor: completed ? "pointer" : "not-allowed",
+        fontFamily: "inherit",
+        transition: "all 0.25s"
+      }
+    },
+    completed ? "Verify Code" : `Enter ${length - otp.filter((v) => v).length} more digit${length - otp.filter((v) => v).length !== 1 ? "s" : ""}`
+  ), /* @__PURE__ */ React13.createElement("p", { style: { textAlign: "center", fontSize: "12px", color: "rgba(255,255,255,0.25)", margin: "14px 0 0" } }, "Didn't receive it?", " ", /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      onClick: handleResend,
+      disabled: resendTimer > 0,
+      style: {
+        background: "transparent",
+        border: "none",
+        padding: 0,
+        fontSize: "12px",
+        fontWeight: "700",
+        color: resendTimer > 0 ? "rgba(255,255,255,0.25)" : accent,
+        cursor: resendTimer > 0 ? "default" : "pointer",
+        fontFamily: "inherit"
+      }
+    },
+    resendTimer > 0 ? `${resendText} (${resendTimer}s)` : resendText
+  )));
+};
+
+// src/components/InvoiceCard/InvoiceCard.jsx
+import React14, { useState as useState12 } from "react";
+var InvoiceCard = ({
+  invoiceNumber = "INV-2024-001",
+  date = "21 March 2024",
+  dueDate = "31 March 2024",
+  from = {
+    name: "VirtualAI Inc.",
+    email: "billing@virtualai.com",
+    address: "123 Tech Street, San Francisco, CA"
+  },
+  to = {
+    name: "Aryan Sharma",
+    email: "aryan@example.com",
+    address: "456 Dev Lane, Mumbai, India"
+  },
+  items = [
+    { name: "Pro Plan Subscription", qty: 1, price: 29 },
+    { name: "Extra AI Credits (500)", qty: 2, price: 9 },
+    { name: "Custom Domain Setup", qty: 1, price: 15 }
+  ],
+  taxRate = 18,
+  currency = "$",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  status = "unpaid",
+  onPayClick = () => {
+  },
+  onDownloadClick = () => {
+  }
+}) => {
+  const [paid, setPaid] = useState12(status === "paid");
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);
+  const tax = parseFloat((subtotal * taxRate / 100).toFixed(2));
+  const total = parseFloat((subtotal + tax).toFixed(2));
+  const statusConfig = {
+    paid: { label: "Paid", bg: "rgba(16,185,129,0.15)", color: "#34d399", border: "rgba(16,185,129,0.3)" },
+    unpaid: { label: "Unpaid", bg: "rgba(239,68,68,0.12)", color: "#f87171", border: "rgba(239,68,68,0.3)" },
+    pending: { label: "Pending", bg: "rgba(245,158,11,0.12)", color: "#fbbf24", border: "rgba(245,158,11,0.3)" }
+  };
+  const sc = statusConfig[paid ? "paid" : status] || statusConfig.unpaid;
+  const Row = ({ label, value, bold, large, accentColor }) => /* @__PURE__ */ React14.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "5px 0"
+  } }, /* @__PURE__ */ React14.createElement("span", { style: {
+    fontSize: large ? "14px" : "12px",
+    fontWeight: bold ? "700" : "400",
+    color: large ? "#fff" : "rgba(255,255,255,0.45)"
+  } }, label), /* @__PURE__ */ React14.createElement("span", { style: {
+    fontSize: large ? "16px" : "13px",
+    fontWeight: bold ? "800" : "600",
+    color: accentColor || (large ? "#fff" : "rgba(255,255,255,0.85)")
+  } }, currency, typeof value === "number" ? value.toFixed(2) : value));
+  return /* @__PURE__ */ React14.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "24px",
+    width: "340px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    color: "#fff"
+  } }, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "20px" } }, /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "center", gap: "7px", marginBottom: "4px" } }, /* @__PURE__ */ React14.createElement("div", { style: {
+    width: "24px",
+    height: "24px",
+    borderRadius: "6px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, "V"), /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "14px", fontWeight: "800" } }, from.name)), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, invoiceNumber)), /* @__PURE__ */ React14.createElement("div", { style: {
+    padding: "4px 12px",
+    borderRadius: "20px",
+    fontSize: "11px",
+    fontWeight: "700",
+    background: sc.bg,
+    color: sc.color,
+    border: `1px solid ${sc.border}`,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  } }, sc.label)), /* @__PURE__ */ React14.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "12px",
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    padding: "14px",
+    marginBottom: "20px"
+  } }, [{ label: "From", info: from }, { label: "To", info: to }].map(({ label, info }) => /* @__PURE__ */ React14.createElement("div", { key: label }, /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", marginBottom: "5px" } }, label), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: "0 0 2px" } }, info.name), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.35)", margin: "0 0 2px" } }, info.email), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", margin: 0, lineHeight: 1.4 } }, info.address)))), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "20px" } }, [{ label: "Issue Date", val: date }, { label: "Due Date", val: dueDate }].map(({ label, val }) => /* @__PURE__ */ React14.createElement("div", { key: label, style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "10px",
+    padding: "10px 12px"
+  } }, /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", margin: "0 0 3px", fontWeight: "700" } }, label), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: 0 } }, val)))), /* @__PURE__ */ React14.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React14.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: "8px",
+    padding: "6px 8px",
+    borderBottom: "1px solid rgba(255,255,255,0.06)",
+    marginBottom: "4px"
+  } }, ["Item", "Qty", "Amount"].map((h) => /* @__PURE__ */ React14.createElement("span", { key: h, style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", textAlign: h !== "Item" ? "right" : "left" } }, h))), items.map((item, i) => /* @__PURE__ */ React14.createElement("div", { key: i, style: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: "8px",
+    padding: "8px",
+    borderRadius: "8px",
+    background: i % 2 === 0 ? "rgba(255,255,255,0.02)" : "transparent"
+  } }, /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.75)" } }, item.name), /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", textAlign: "right" } }, "\xD7", item.qty), /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "12px", fontWeight: "600", color: "#fff", textAlign: "right" } }, currency, (item.qty * item.price).toFixed(2))))), /* @__PURE__ */ React14.createElement("div", { style: {
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    padding: "12px 14px",
+    marginBottom: "20px"
+  } }, /* @__PURE__ */ React14.createElement(Row, { label: "Subtotal", value: subtotal }), /* @__PURE__ */ React14.createElement(Row, { label: `Tax (${taxRate}%)`, value: tax }), /* @__PURE__ */ React14.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ React14.createElement(Row, { label: "Total", value: total, bold: true, large: true, accentColor: accent })), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", gap: "8px" } }, !paid && /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      onClick: () => {
+        setPaid(true);
+        onPayClick();
+      },
+      style: {
+        flex: 1,
+        padding: "11px",
+        borderRadius: "12px",
+        border: "none",
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
+        color: "#fff",
+        fontSize: "13px",
+        fontWeight: "700",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "opacity 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
+      onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
+    },
+    "Pay ",
+    currency,
+    total.toFixed(2)
+  ), paid && /* @__PURE__ */ React14.createElement("div", { style: {
+    flex: 1,
+    padding: "11px",
+    borderRadius: "12px",
+    background: "rgba(16,185,129,0.1)",
+    border: "1px solid rgba(16,185,129,0.25)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px",
+    fontSize: "13px",
+    fontWeight: "700",
+    color: "#34d399"
+  } }, /* @__PURE__ */ React14.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ React14.createElement("polyline", { points: "20 6 9 17 4 12" })
+  ), "Payment Done"), /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      onClick: onDownloadClick,
+      style: {
+        width: "42px",
+        padding: "11px",
+        borderRadius: "12px",
+        background: "rgba(255,255,255,0.05)",
+        border: "1px solid rgba(255,255,255,0.1)",
+        color: "rgba(255,255,255,0.5)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.color = "#fff";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.color = "rgba(255,255,255,0.5)";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
+      }
+    },
+    /* @__PURE__ */ React14.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React14.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" })
+    )
+  )));
 };
 export {
-  Avatar,
   AvatarCard,
   BackgoundImageSlider,
   Charts,
-  CodeBlock,
-  CustomInputField,
-  DividerLine,
-  FileUpload,
   Footer,
   ImageCard,
   ImageSlider,
+  InvoiceCard,
   Loader,
-  LoadingSpinner,
   Navbar,
   NotificationToast,
-  OtpInput,
+  OTPInput,
   PageLoader,
   PricingCard,
-  ResponsiveNavbar,
-  SearchBar,
-  Sidebar,
-  SkeletonLoader,
-  SmartButton,
-  StatCard,
-  Tabs,
-  TextArea,
-  ToastNotification
+  Sidebar
 };