virtual-ui-lib 1.0.66 → 1.0.68

package/dist/index.js

@@ -29,607 +29,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
-  Avatar: () => Avatar,
   AvatarCard: () => AvatarCard,
   BackgoundImageSlider: () => BackgoundImageSlider,
   Charts: () => Charts,
-  CodeBlock: () => CodeBlock,
-  CustomInputField: () => CustomInputField,
-  DividerLine: () => DividerLine,
-  FileUpload: () => FileUpload,
   Footer: () => Footer,
   ImageCard: () => ImageCard,
   ImageSlider: () => ImageSlider,
   Loader: () => Loader,
-  LoadingSpinner: () => LoadingSpinner,
   Navbar: () => Navbar,
   NotificationToast: () => NotificationToast,
-  OtpInput: () => OtpInput,
+  OTPInput: () => OTPInput,
+  PageLoader: () => PageLoader,
   PricingCard: () => PricingCard,
-  ResponsiveNavbar: () => ResponsiveNavbar,
-  SearchBar: () => SearchBar,
-  Sidebar: () => Sidebar,
-  SkeletonLoader: () => SkeletonLoader,
-  SmartButton: () => SmartButton,
-  StatCard: () => StatCard,
-  Tabs: () => Tabs,
-  TextArea: () => TextArea,
-  ToastNotification: () => ToastNotification
+  Sidebar: () => Sidebar
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/ToastNotification/ToastNotification.jsx
-var import_react = __toESM(require("react"));
-var ToastNotification = ({
-  type = "success",
-  title = "Success",
-  message = "Your action was successful!",
-  duration = 4e3,
-  onClose
-}) => {
-  const [visible, setVisible] = (0, import_react.useState)(false);
-  const [progress, setProgress] = (0, import_react.useState)(0);
-  (0, import_react.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__ */ import_react.default.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__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    width: "24px",
-    height: "24px",
-    borderRadius: "50%",
-    background: "white",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: "8px"
-  } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ import_react.default.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onClose, style: {
-    background: "transparent",
-    color: "white",
-    border: "none",
-    cursor: "pointer",
-    fontSize: "14px",
-    fontWeight: "600"
-  } }, "Close"), /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    height: "4px",
-    background: "rgba(255, 255, 255, 0.3)",
-    borderRadius: "8px",
-    overflow: "hidden",
-    marginTop: "12px"
-  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    width: progress + "%",
-    height: "100%",
-    background: "white",
-    transition: "width 0.1s linear"
-  } })));
-};
-
-// src/components/StatCard/StatCard.jsx
-var import_react2 = __toESM(require("react"));
-var StatCard = ({
-  title = "Revenue",
-  metric = 1200,
-  change = 15,
-  bg = "#0f172a",
-  accent = "#059669",
-  negativeAccent = "#ef4444",
-  radius = "16px"
-}) => {
-  const [count, setCount] = (0, import_react2.useState)(0);
-  (0, import_react2.useEffect)(() => {
-    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__ */ import_react2.default.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__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react2.default.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
-var import_react3 = __toESM(require("react"));
-var OtpInput = ({
-  length = 6,
-  boxSize = "48px",
-  borderColor = "#7c3aed",
-  bgColor = "#1e293b",
-  textColor = "#f1f5f9",
-  radius = "8px",
-  onComplete
-}) => {
-  const [otp, setOtp] = (0, import_react3.useState)(Array(length).fill(""));
-  const inputsRef = (0, import_react3.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();
-  };
-  (0, import_react3.useEffect)(() => {
-    inputsRef.current[0].focus();
-  }, []);
-  return /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
-};
-
-// src/components/CodeBlock/CodeBlock.jsx
-var import_react4 = __toESM(require("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] = (0, import_react4.useState)(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    });
-  };
-  const formatCode = () => {
-    return code.split("\n").map((line, index) => /* @__PURE__ */ import_react4.default.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ import_react4.default.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
-  };
-  return /* @__PURE__ */ import_react4.default.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ import_react4.default.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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
-var import_react5 = __toESM(require("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__ */ import_react5.default.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__ */ import_react5.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, icon && /* @__PURE__ */ import_react5.default.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
-  );
-};
-
-// src/components/CustomInputField/CustomInputField.jsx
-var import_react6 = __toESM(require("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] = (0, import_react6.useState)(false);
-  return /* @__PURE__ */ import_react6.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react6.default.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
-};
-
-// src/components/TextArea/TextArea.jsx
-var import_react7 = __toESM(require("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] = (0, import_react7.useState)(value);
-  const handleChange = (e) => {
-    setCurrentValue(e.target.value);
-    onChange(e.target.value);
-  };
-  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
-};
-
-// src/components/SearchBar/SearchBar.jsx
-var import_react8 = __toESM(require("react"));
-var SearchBar = ({
-  placeholder = "Search...",
-  bg = "#1e293b",
-  textColor = "#f1f5f9",
-  accent = "#7c3aed",
-  loading = false,
-  suggestions = [],
-  onChange = () => {
-  },
-  onClear = () => {
-  }
-}) => {
-  const [query, setQuery] = (0, import_react8.useState)("");
-  const handleInputChange = (e) => {
-    setQuery(e.target.value);
-    onChange(e.target.value);
-  };
-  const handleClear = () => {
-    setQuery("");
-    onClear();
-  };
-  return /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.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__ */ import_react8.default.createElement("div", { style: {
-    position: "absolute",
-    left: "10px",
-    top: "50%",
-    transform: "translateY(-50%)"
-  } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.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
-var import_react9 = __toESM(require("react"));
-var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
-  return /* @__PURE__ */ import_react9.default.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
-var import_react10 = __toESM(require("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__ */ import_react10.default.createElement("div", { style: { padding } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes shimmer {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: 0 0;
-          }
-        }`));
-};
-
-// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
-var import_react11 = __toESM(require("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] = (0, import_react11.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
-  const handleSearchChange = (e) => {
-    setSearchValue(e.target.value);
-    onSearchChange(e.target.value);
-  };
-  return /* @__PURE__ */ import_react11.default.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement(
-    "input",
-    {
-      type: "text",
-      value: searchValue,
-      placeholder,
-      onChange: handleSearchChange,
-      style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
-    }
-  ), /* @__PURE__ */ import_react11.default.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ import_react11.default.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
-};
-
-// src/components/FileUpload/FileUpload.jsx
-var import_react12 = __toESM(require("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] = (0, import_react12.useState)(null);
-  const [progress, setProgress] = (0, import_react12.useState)(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__ */ import_react12.default.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__ */ import_react12.default.createElement(
-      "input",
-      {
-        id: "fileInput",
-        type: "file",
-        style: { display: "none" },
-        onChange: handleFileChange
-      }
-    ),
-    file ? /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", null, file.name), /* @__PURE__ */ import_react12.default.createElement(
-      "button",
-      {
-        onClick: handleRemove,
-        style: {
-          background: accent,
-          color: "#fff",
-          border: "none",
-          borderRadius: radius,
-          padding: "8px 16px",
-          cursor: "pointer"
-        }
-      },
-      "Remove"
-    ), /* @__PURE__ */ import_react12.default.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ import_react12.default.createElement("p", null, placeholder)
-  );
-};
-
 // src/components/Loader/Loader.jsx
-var import_react13 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 var Loader = ({
   type = "spinner",
   size = 48,
@@ -638,15 +55,15 @@ var Loader = ({
   label = "",
   speed = 1
 }) => {
-  const [dots, setDots] = (0, import_react13.useState)(0);
-  const [progress, setProgress] = (0, import_react13.useState)(0);
+  const [dots, setDots] = (0, import_react.useState)(0);
+  const [progress, setProgress] = (0, import_react.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})`;
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (type === "dots") {
       const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
       return () => clearInterval(t);
@@ -668,8 +85,8 @@ var Loader = ({
     borderRadius: "16px",
     fontFamily: "system-ui, sans-serif"
   };
-  const labelEl = label ? /* @__PURE__ */ import_react13.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
-  if (type === "spinner") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react13.default.createElement(
+  const labelEl = label ? /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
+  if (type === "spinner") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react.default.createElement(
     "circle",
     {
       cx: "24",
@@ -679,7 +96,7 @@ var Loader = ({
       stroke: alpha(accent, 0.15),
       strokeWidth: "4"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(
     "circle",
     {
       cx: "24",
@@ -692,40 +109,40 @@ var Loader = ({
       strokeDasharray: "31.4 94.2",
       style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
     }
-  ), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
-  if (type === "pulse") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+  ), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
+  if (type === "pulse") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
     position: "absolute",
     inset: 0,
     borderRadius: "50%",
     background: alpha(accent, 0.2),
     animation: `pulse ${dur} ease-out infinite`
-  } }), /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+  } }), /* @__PURE__ */ import_react.default.createElement("div", { style: {
     position: "absolute",
     inset: "25%",
     borderRadius: "50%",
     background: accent
-  } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
-  if (type === "dots") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: {
+  } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
+  if (type === "dots") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react.default.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__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+  if (type === "bar") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
     width: size * 3,
     height: size / 8,
     background: alpha(accent, 0.15),
     borderRadius: "99px",
     overflow: "hidden"
-  } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
     height: "100%",
     borderRadius: "99px",
     background: accent,
     width: `${progress}%`,
     transition: "width 0.03s linear"
   } })), labelEl);
-  if (type === "ring") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+  if (type === "ring") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
     width: size,
     height: size,
     borderRadius: "50%",
@@ -733,86 +150,12 @@ var Loader = ({
     borderTop: `4px solid ${accent}`,
     borderRight: `4px solid ${accent}`,
     animation: `spin ${dur} linear infinite`
-  } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
+  } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
   return null;
 };
 
-// src/components/Avatar/Avatar.jsx
-var import_react14 = __toESM(require("react"));
-var Avatar = ({
-  image = "https://i.pravatar.cc/150?img=32",
-  alt = "User Avatar",
-  size = "60px",
-  borderColor = "#7c3aed",
-  borderWidth = "4px",
-  radius = "50%"
-}) => {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { style: {
-    width: size,
-    height: size,
-    borderRadius: radius,
-    border: borderWidth + " solid " + borderColor,
-    overflow: "hidden",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "#f3f4f6"
-  } }, /* @__PURE__ */ import_react14.default.createElement("img", { src: image, alt, style: {
-    width: "100%",
-    height: "100%",
-    objectFit: "cover"
-  } }));
-};
-
-// src/components/DividerLine/DividerLine.jsx
-var import_react15 = __toESM(require("react"));
-var DividerLine = ({
-  text = "Section",
-  textColor = "#f1f5f9",
-  lineColor = "#334155",
-  spacing = "20px",
-  thickness = "2px",
-  borderRadius = "4px"
-}) => {
-  return /* @__PURE__ */ import_react15.default.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ import_react15.default.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
-};
-
-// src/components/Tabs/Tabs.jsx
-var import_react16 = __toESM(require("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] = (0, import_react16.useState)(0);
-  return /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ import_react16.default.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
-};
-
 // src/components/NotificationToast/NotificationToast.jsx
-var import_react17 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var NotificationToast = ({
   title = "New Message",
   message = "You have a new notification from the team.",
@@ -823,8 +166,8 @@ var NotificationToast = ({
   radius = "14px",
   showProgress = true
 }) => {
-  const [visible, setVisible] = (0, import_react17.useState)(true);
-  const [progress, setProgress] = (0, import_react17.useState)(100);
+  const [visible, setVisible] = (0, import_react2.useState)(true);
+  const [progress, setProgress] = (0, import_react2.useState)(100);
   const typeColors = {
     success: "#10b981",
     error: "#ef4444",
@@ -838,7 +181,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;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!showProgress) return;
     const step = 100 / (duration / 50);
     const timer = setInterval(() => {
@@ -854,7 +197,7 @@ var NotificationToast = ({
     return () => clearInterval(timer);
   }, [duration, showProgress]);
   if (!visible) return null;
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "16px 18px",
@@ -865,7 +208,7 @@ var NotificationToast = ({
     border: `1px solid rgba(255,255,255,0.08)`,
     position: "relative",
     overflow: "hidden"
-  } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
     width: 36,
     height: 36,
     borderRadius: "10px",
@@ -875,7 +218,7 @@ var NotificationToast = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  } }, /* @__PURE__ */ import_react17.default.createElement(
+  } }, /* @__PURE__ */ import_react2.default.createElement(
     "svg",
     {
       width: "16",
@@ -887,8 +230,8 @@ var NotificationToast = ({
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ import_react17.default.createElement("path", { d: typeIcons[type] || typeIcons.info })
-  )), /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ import_react17.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement("path", { d: typeIcons[type] || typeIcons.info })
+  )), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
       onClick: () => setVisible(false),
@@ -902,7 +245,7 @@ var NotificationToast = ({
         lineHeight: 1
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement(
       "svg",
       {
         width: "14",
@@ -913,16 +256,16 @@ var NotificationToast = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ import_react17.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+      /* @__PURE__ */ import_react2.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
     )
-  )), showProgress && /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+  )), showProgress && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     height: "3px",
     background: "rgba(255,255,255,0.07)"
-  } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
     height: "100%",
     width: `${progress}%`,
     background: color,
@@ -932,7 +275,7 @@ var NotificationToast = ({
 };
 
 // src/components/AvatarCard/AvatarCard.jsx
-var import_react18 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var AvatarCard = ({
   name = "Aryan Sharma",
   role = "Frontend Developer",
@@ -945,7 +288,7 @@ var AvatarCard = ({
   bg = "#0f172a",
   radius = "20px"
 }) => {
-  const [followed, setFollowed] = (0, import_react18.useState)(false);
+  const [followed, setFollowed] = (0, import_react3.useState)(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -958,7 +301,7 @@ var AvatarCard = ({
     { label: "Following", value: following },
     { label: "Projects", value: projects }
   ];
-  return /* @__PURE__ */ import_react18.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "24px 20px",
@@ -969,14 +312,14 @@ var AvatarCard = ({
     border: "1px solid rgba(255,255,255,0.08)",
     position: "relative",
     overflow: "hidden"
-  } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     height: "3px",
     background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
-  } }), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
+  } }), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
     width: 72,
     height: 72,
     borderRadius: "50%",
@@ -989,7 +332,7 @@ var AvatarCard = ({
     color: "#fff",
     border: `3px solid ${alpha(accent, 0.4)}`,
     marginBottom: "12px"
-  } }, !avatar && initials), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
+  } }, !avatar && initials), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
     fontSize: "12px",
     fontWeight: "600",
     color: accent,
@@ -997,14 +340,14 @@ var AvatarCard = ({
     padding: "2px 10px",
     borderRadius: "20px",
     border: `1px solid ${alpha(accent, 0.3)}`
-  } }, role)), /* @__PURE__ */ import_react18.default.createElement("p", { style: {
+  } }, role)), /* @__PURE__ */ import_react3.default.createElement("p", { style: {
     fontSize: "12px",
     color: "rgba(255,255,255,0.45)",
     textAlign: "center",
     lineHeight: 1.6,
     marginBottom: "18px",
     padding: "0 4px"
-  } }, bio), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
+  } }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
     display: "flex",
     justifyContent: "space-around",
     background: "rgba(255,255,255,0.04)",
@@ -1012,11 +355,11 @@ var AvatarCard = ({
     borderRadius: "12px",
     padding: "12px 8px",
     marginBottom: "16px"
-  } }, stats.map((s) => /* @__PURE__ */ import_react18.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
+  } }, stats.map((s) => /* @__PURE__ */ import_react3.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
 };
 
 // src/components/PricingCard/PricingCard.jsx
-var import_react19 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var PricingCard = ({
   planName = "Pro Plan",
   description = "For teams that need more power.",
@@ -1044,7 +387,7 @@ var PricingCard = ({
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  return /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react4.default.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "28px 24px",
@@ -1055,14 +398,14 @@ var PricingCard = ({
     border: `1px solid ${alpha(accent, 0.25)}`,
     position: "relative",
     overflow: "hidden"
-  } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     height: "3px",
     background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
-  } }), badgeText && /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+  } }), badgeText && /* @__PURE__ */ import_react4.default.createElement("div", { style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "6px",
@@ -1076,7 +419,7 @@ var PricingCard = ({
     color: accent,
     letterSpacing: "0.5px",
     textTransform: "uppercase"
-  } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react19.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react19.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react19.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react4.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react4.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react4.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
     width: "18px",
     height: "18px",
     borderRadius: "50%",
@@ -1086,7 +429,7 @@ var PricingCard = ({
     justifyContent: "center",
     background: alpha(accent, 0.18),
     border: `1px solid ${alpha(accent, 0.4)}`
-  } }, /* @__PURE__ */ import_react19.default.createElement(
+  } }, /* @__PURE__ */ import_react4.default.createElement(
     "svg",
     {
       width: "10",
@@ -1098,8 +441,8 @@ var PricingCard = ({
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
-  )), f))), /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
+  )), f))), /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       onClick: onCtaClick,
@@ -1124,7 +467,7 @@ var PricingCard = ({
 };
 
 // src/components/Navbar/Navbar.jsx
-var import_react20 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var Navbar = ({
   logo = "VirtualAI",
   links = ["Home", "Features", "Pricing", "Blog"],
@@ -1136,28 +479,28 @@ var Navbar = ({
   onLinkClick = () => {
   }
 }) => {
-  const [scrolled, setScrolled] = (0, import_react20.useState)(false);
-  const [menuOpen, setMenuOpen] = (0, import_react20.useState)(false);
-  const [active, setActive] = (0, import_react20.useState)("Home");
-  const [isMobile, setIsMobile] = (0, import_react20.useState)(false);
+  const [scrolled, setScrolled] = (0, import_react5.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react5.useState)(false);
+  const [active, setActive] = (0, import_react5.useState)("Home");
+  const [isMobile, setIsMobile] = (0, import_react5.useState)(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})`;
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handler = () => setScrolled(window.scrollY > 10);
     window.addEventListener("scroll", handler);
     return () => window.removeEventListener("scroll", handler);
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isMobile) setMenuOpen(false);
   }, [isMobile]);
   const handleLink = (link) => {
@@ -1165,7 +508,7 @@ var Navbar = ({
     setMenuOpen(false);
     onLinkClick(link);
   };
-  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("style", null, `
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("style", null, `
         @keyframes nbSlideDown {
           from { opacity: 0; transform: translateY(-8px); }
           to   { opacity: 1; transform: translateY(0); }
@@ -1174,7 +517,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__ */ import_react20.default.createElement("nav", { style: {
+      `), /* @__PURE__ */ import_react5.default.createElement("nav", { style: {
     position: "sticky",
     top: 0,
     left: 0,
@@ -1188,7 +531,7 @@ var Navbar = ({
     fontFamily: "system-ui, -apple-system, sans-serif",
     width: "100%",
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: {
     maxWidth: "1200px",
     margin: "0 auto",
     padding: "0 20px",
@@ -1198,7 +541,7 @@ var Navbar = ({
     justifyContent: "space-between",
     gap: "16px",
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: {
     width: isMobile ? "26px" : "30px",
     height: isMobile ? "26px" : "30px",
     borderRadius: "8px",
@@ -1210,12 +553,12 @@ var Navbar = ({
     fontWeight: "800",
     color: "#fff",
     flexShrink: 0
-  } }, logo[0]), /* @__PURE__ */ import_react20.default.createElement("span", { style: {
+  } }, logo[0]), /* @__PURE__ */ import_react5.default.createElement("span", { style: {
     fontSize: isMobile ? "14px" : "16px",
     fontWeight: "800",
     color: "#fff",
     letterSpacing: "-0.3px"
-  } }, logo)), !isMobile && /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ import_react20.default.createElement(
+  } }, logo)), !isMobile && /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       key: link,
@@ -1236,7 +579,7 @@ var Navbar = ({
       }
     },
     link
-  ))), /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ import_react20.default.createElement(
+  ))), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       className: "nb-cta",
@@ -1256,7 +599,7 @@ var Navbar = ({
       }
     },
     ctaText
-  ), isMobile && /* @__PURE__ */ import_react20.default.createElement(
+  ), isMobile && /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       className: "nb-ham",
@@ -1278,7 +621,7 @@ var Navbar = ({
         padding: 0
       }
     },
-    /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+    /* @__PURE__ */ import_react5.default.createElement("div", { style: {
       width: "16px",
       height: "1.5px",
       background: "rgba(255,255,255,0.7)",
@@ -1286,7 +629,7 @@ var Navbar = ({
       transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
       transition: "transform 0.25s"
     } }),
-    /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+    /* @__PURE__ */ import_react5.default.createElement("div", { style: {
       width: "16px",
       height: "1.5px",
       background: "rgba(255,255,255,0.7)",
@@ -1294,7 +637,7 @@ var Navbar = ({
       opacity: menuOpen ? 0 : 1,
       transition: "opacity 0.2s"
     } }),
-    /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+    /* @__PURE__ */ import_react5.default.createElement("div", { style: {
       width: "16px",
       height: "1.5px",
       background: "rgba(255,255,255,0.7)",
@@ -1302,7 +645,7 @@ var Navbar = ({
       transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
       transition: "transform 0.25s"
     } })
-  ))), isMobile && menuOpen && /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+  ))), isMobile && menuOpen && /* @__PURE__ */ import_react5.default.createElement("div", { style: {
     animation: "nbSlideDown 0.2s ease",
     borderTop: "1px solid rgba(255,255,255,0.06)",
     padding: "10px 16px 16px",
@@ -1310,7 +653,7 @@ var Navbar = ({
     flexDirection: "column",
     gap: "3px",
     background: alpha(bg, 0.98)
-  } }, links.map((link) => /* @__PURE__ */ import_react20.default.createElement(
+  } }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       key: link,
@@ -1335,7 +678,7 @@ var Navbar = ({
       }
     },
     link,
-    active === link && /* @__PURE__ */ import_react20.default.createElement(
+    active === link && /* @__PURE__ */ import_react5.default.createElement(
       "svg",
       {
         width: "14",
@@ -1346,9 +689,9 @@ var Navbar = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ import_react20.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+      /* @__PURE__ */ import_react5.default.createElement("polyline", { points: "9 18 15 12 9 6" })
     )
-  )), /* @__PURE__ */ import_react20.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react20.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       onClick: () => {
@@ -1373,7 +716,7 @@ var Navbar = ({
 };
 
 // src/components/Footer/Footer.jsx
-var import_react21 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var Footer = ({
   logo = "VirtualAI",
   links = ["Home", "Features", "Pricing", "Blog", "Contact"],
@@ -1381,21 +724,21 @@ var Footer = ({
   accent = "#6366f1",
   bg = "#0f172a"
 }) => {
-  return /* @__PURE__ */ import_react21.default.createElement("footer", { style: {
+  return /* @__PURE__ */ import_react6.default.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__ */ import_react21.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
     maxWidth: "900px",
     margin: "0 auto",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: "20px"
-  } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
     width: "26px",
     height: "26px",
     borderRadius: "7px",
@@ -1406,7 +749,7 @@ var Footer = ({
     fontSize: "12px",
     fontWeight: "800",
     color: "#fff"
-  } }, logo[0]), /* @__PURE__ */ import_react21.default.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ import_react21.default.createElement(
+  } }, logo[0]), /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ import_react6.default.createElement(
     "a",
     {
       key: link,
@@ -1423,11 +766,11 @@ var Footer = ({
       onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
     },
     link
-  ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react21.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
+  ))), /* @__PURE__ */ import_react6.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react6.default.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
-var import_react22 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var Sidebar = ({
   logo = "VirtualAI",
   accent = "#6366f1",
@@ -1436,27 +779,27 @@ var Sidebar = ({
     {
       label: "Dashboard",
       icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
-      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
+      component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react7.default.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__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
+      component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react7.default.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__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
+      component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react7.default.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__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
+      component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
     }
   ]
 }) => {
-  const [active, setActive] = (0, import_react22.useState)(0);
-  const [collapsed, setCollapsed] = (0, import_react22.useState)(false);
+  const [active, setActive] = (0, import_react7.useState)(0);
+  const [collapsed, setCollapsed] = (0, import_react7.useState)(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1464,14 +807,14 @@ var Sidebar = ({
     return `rgba(${r},${g},${b},${op})`;
   };
   const activeItem = items[active];
-  return /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react7.default.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__ */ import_react22.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
     width: collapsed ? "60px" : "200px",
     background: bg,
     borderRight: "1px solid rgba(255,255,255,0.06)",
@@ -1480,7 +823,7 @@ var Sidebar = ({
     transition: "width 0.25s ease",
     flexShrink: 0,
     overflow: "hidden"
-  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
     height: "56px",
     display: "flex",
     alignItems: "center",
@@ -1489,7 +832,7 @@ var Sidebar = ({
     borderBottom: "1px solid rgba(255,255,255,0.05)",
     overflow: "hidden",
     flexShrink: 0
-  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
     width: "28px",
     height: "28px",
     borderRadius: "8px",
@@ -1501,7 +844,7 @@ var Sidebar = ({
     fontSize: "13px",
     fontWeight: "800",
     color: "#fff"
-  } }, logo[0]), !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react22.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react22.default.createElement(
+  } }, logo[0]), !collapsed && /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react7.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react7.default.createElement(
     "button",
     {
       key: i,
@@ -1536,7 +879,7 @@ var Sidebar = ({
         }
       }
     },
-    /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(
       "svg",
       {
         width: "16",
@@ -1549,10 +892,10 @@ var Sidebar = ({
         strokeLinejoin: "round",
         style: { flexShrink: 0 }
       },
-      /* @__PURE__ */ import_react22.default.createElement("path", { d: item.icon })
+      /* @__PURE__ */ import_react7.default.createElement("path", { d: item.icon })
     ),
-    !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
-  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react22.default.createElement(
+    !collapsed && /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
+  ))), /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react7.default.createElement(
     "button",
     {
       onClick: () => setCollapsed((c) => !c),
@@ -1572,7 +915,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__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(
       "svg",
       {
         width: "15",
@@ -1583,29 +926,29 @@ var Sidebar = ({
         strokeWidth: "2",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ import_react22.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
+      /* @__PURE__ */ import_react7.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
     )
-  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+  ))), /* @__PURE__ */ import_react7.default.createElement("div", { style: {
     flex: 1,
     background: "rgba(255,255,255,0.02)",
     overflow: "auto"
-  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
     height: "56px",
     display: "flex",
     alignItems: "center",
     padding: "0 20px",
     borderBottom: "1px solid rgba(255,255,255,0.05)",
     gap: "10px"
-  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
     width: "6px",
     height: "6px",
     borderRadius: "50%",
     background: accent
-  } }), /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
+  } }), /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
 };
 
 // src/components/Charts/Charts.jsx
-var import_react23 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var Charts = ({
   type = "bar",
   data = [
@@ -1625,7 +968,7 @@ var Charts = ({
   showGrid = true,
   showValues = true
 }) => {
-  const [hovered, setHovered] = (0, import_react23.useState)(null);
+  const [hovered, setHovered] = (0, import_react8.useState)(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1652,7 +995,7 @@ var Charts = ({
   }));
   const BarChart = () => {
     const barW = Math.min(28, chartW / data.length * 0.55);
-    return /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i }, /* @__PURE__ */ import_react23.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
       "line",
       {
         x1: padL,
@@ -1662,7 +1005,7 @@ var Charts = ({
         stroke: "rgba(255,255,255,0.05)",
         strokeWidth: "1"
       }
-    ), /* @__PURE__ */ import_react23.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       "text",
       {
         x: padL - 4,
@@ -1677,7 +1020,7 @@ var Charts = ({
       const barH = (d.value - min) / (max - min || 1) * chartH;
       const y = padT + chartH - barH;
       const isH = hovered === i;
-      return /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement(
+      return /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement(
         "rect",
         {
           x,
@@ -1687,7 +1030,7 @@ var Charts = ({
           fill: "transparent",
           rx: "4"
         }
-      ), /* @__PURE__ */ import_react23.default.createElement(
+      ), /* @__PURE__ */ import_react8.default.createElement(
         "rect",
         {
           x,
@@ -1698,7 +1041,7 @@ var Charts = ({
           rx: "4",
           style: { transition: "fill 0.15s" }
         }
-      ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
+      ), showValues && isH && /* @__PURE__ */ import_react8.default.createElement(
         "text",
         {
           x: x + barW / 2,
@@ -1709,7 +1052,7 @@ var Charts = ({
           fontWeight: "700"
         },
         d.value
-      ), /* @__PURE__ */ import_react23.default.createElement(
+      ), /* @__PURE__ */ import_react8.default.createElement(
         "text",
         {
           x: x + barW / 2,
@@ -1722,7 +1065,7 @@ var Charts = ({
       ));
     }));
   };
-  const LineChart = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react23.default.createElement("defs", null, /* @__PURE__ */ import_react23.default.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i }, /* @__PURE__ */ import_react23.default.createElement(
+  const LineChart = () => /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
     "line",
     {
       x1: padL,
@@ -1732,7 +1075,7 @@ var Charts = ({
       stroke: "rgba(255,255,255,0.05)",
       strokeWidth: "1"
     }
-  ), /* @__PURE__ */ import_react23.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     "text",
     {
       x: padL - 4,
@@ -1742,7 +1085,7 @@ var Charts = ({
       fontSize: "9"
     },
     g.val
-  ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react23.default.createElement(
+  ))), /* @__PURE__ */ import_react8.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react8.default.createElement(
     "polyline",
     {
       points,
@@ -1754,7 +1097,7 @@ var Charts = ({
     }
   ), data.map((d, i) => {
     const isH = hovered === i;
-    return /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ import_react23.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ import_react8.default.createElement(
       "circle",
       {
         cx: getX(i),
@@ -1765,7 +1108,7 @@ var Charts = ({
         strokeWidth: "2",
         style: { transition: "all 0.15s" }
       }
-    ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
+    ), showValues && isH && /* @__PURE__ */ import_react8.default.createElement(
       "text",
       {
         x: getX(i),
@@ -1776,7 +1119,7 @@ var Charts = ({
         fontWeight: "700"
       },
       d.value
-    ), /* @__PURE__ */ import_react23.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       "text",
       {
         x: getX(i),
@@ -1816,7 +1159,7 @@ var Charts = ({
       startAngle += angle;
       return slice;
     });
-    return /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ import_react23.default.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ import_react8.default.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement(
       "path",
       {
         d: s.path,
@@ -1826,7 +1169,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__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+    ))), hovered !== null && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
       "text",
       {
         x: cx,
@@ -1837,7 +1180,7 @@ var Charts = ({
         fontWeight: "800"
       },
       (_a = data[hovered]) == null ? void 0 : _a.value
-    ), /* @__PURE__ */ import_react23.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.createElement(
       "text",
       {
         x: cx,
@@ -1847,7 +1190,7 @@ var Charts = ({
         fontSize: "9"
       },
       (_b = data[hovered]) == null ? void 0 : _b.label
-    )), hovered === null && /* @__PURE__ */ import_react23.default.createElement(
+    )), hovered === null && /* @__PURE__ */ import_react8.default.createElement(
       "text",
       {
         x: cx,
@@ -1859,7 +1202,7 @@ var Charts = ({
       "Hover slice"
     ));
   };
-  const AreaChart = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react23.default.createElement("defs", null, /* @__PURE__ */ import_react23.default.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i }, /* @__PURE__ */ import_react23.default.createElement(
+  const AreaChart = () => /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
     "line",
     {
       x1: padL,
@@ -1869,7 +1212,7 @@ var Charts = ({
       stroke: "rgba(255,255,255,0.05)",
       strokeWidth: "1"
     }
-  ), /* @__PURE__ */ import_react23.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     "text",
     {
       x: padL - 4,
@@ -1879,7 +1222,7 @@ var Charts = ({
       fontSize: "9"
     },
     g.val
-  ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react23.default.createElement(
+  ))), /* @__PURE__ */ import_react8.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react8.default.createElement(
     "polyline",
     {
       points,
@@ -1889,7 +1232,7 @@ var Charts = ({
       strokeLinejoin: "round",
       strokeLinecap: "round"
     }
-  ), data.map((d, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+  ), data.map((d, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
     "line",
     {
       x1: getX(i),
@@ -1900,7 +1243,7 @@ var Charts = ({
       strokeWidth: "1",
       strokeDasharray: "3 3"
     }
-  ), showValues && /* @__PURE__ */ import_react23.default.createElement(
+  ), showValues && /* @__PURE__ */ import_react8.default.createElement(
     "text",
     {
       x: getX(i),
@@ -1911,7 +1254,7 @@ var Charts = ({
       fontWeight: "700"
     },
     d.value
-  )), /* @__PURE__ */ import_react23.default.createElement(
+  )), /* @__PURE__ */ import_react8.default.createElement(
     "text",
     {
       x: getX(i),
@@ -1923,12 +1266,12 @@ var Charts = ({
     d.label
   ))));
   const renderChart = () => {
-    if (type === "line") return /* @__PURE__ */ import_react23.default.createElement(LineChart, null);
-    if (type === "pie") return /* @__PURE__ */ import_react23.default.createElement(PieChart, null);
-    if (type === "area") return /* @__PURE__ */ import_react23.default.createElement(AreaChart, null);
-    return /* @__PURE__ */ import_react23.default.createElement(BarChart, null);
+    if (type === "line") return /* @__PURE__ */ import_react8.default.createElement(LineChart, null);
+    if (type === "pie") return /* @__PURE__ */ import_react8.default.createElement(PieChart, null);
+    if (type === "area") return /* @__PURE__ */ import_react8.default.createElement(AreaChart, null);
+    return /* @__PURE__ */ import_react8.default.createElement(BarChart, null);
   };
-  return /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     padding: "20px",
@@ -1937,7 +1280,7 @@ var Charts = ({
     width: "100%",
     maxWidth: "360px",
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ import_react23.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+  } }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ import_react8.default.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ import_react8.default.createElement("span", { style: {
     fontSize: "10px",
     fontWeight: "700",
     padding: "3px 9px",
@@ -1950,7 +1293,7 @@ var Charts = ({
 };
 
 // src/components/ImageCard/ImageCard.jsx
-var import_react24 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var ImageCard = ({
   image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
   tag = "Travel",
@@ -1963,14 +1306,14 @@ var ImageCard = ({
   onButtonClick = () => {
   }
 }) => {
-  const [hovered, setHovered] = (0, import_react24.useState)(false);
+  const [hovered, setHovered] = (0, import_react9.useState)(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__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
@@ -1987,7 +1330,7 @@ var ImageCard = ({
         boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
       }
     },
-    /* @__PURE__ */ import_react24.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react24.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react9.default.createElement(
       "img",
       {
         src: image,
@@ -2000,11 +1343,11 @@ var ImageCard = ({
           transition: "transform 0.4s ease"
         }
       }
-    ), /* @__PURE__ */ import_react24.default.createElement("div", { style: {
+    ), /* @__PURE__ */ import_react9.default.createElement("div", { style: {
       position: "absolute",
       inset: 0,
       background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
-    } }), tag && /* @__PURE__ */ import_react24.default.createElement("div", { style: {
+    } }), tag && /* @__PURE__ */ import_react9.default.createElement("div", { style: {
       position: "absolute",
       top: "12px",
       left: "12px",
@@ -2017,18 +1360,18 @@ var ImageCard = ({
       letterSpacing: "0.5px",
       textTransform: "uppercase"
     } }, tag)),
-    /* @__PURE__ */ import_react24.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react24.default.createElement("h3", { style: {
+    /* @__PURE__ */ import_react9.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react9.default.createElement("h3", { style: {
       fontSize: "15px",
       fontWeight: "700",
       color: "#fff",
       margin: "0 0 8px",
       lineHeight: 1.4
-    } }, title), /* @__PURE__ */ import_react24.default.createElement("p", { style: {
+    } }, title), /* @__PURE__ */ import_react9.default.createElement("p", { style: {
       fontSize: "13px",
       color: "rgba(255,255,255,0.45)",
       lineHeight: 1.65,
       margin: "0 0 18px"
-    } }, description), /* @__PURE__ */ import_react24.default.createElement(
+    } }, description), /* @__PURE__ */ import_react9.default.createElement(
       "button",
       {
         onClick: onButtonClick,
@@ -2054,7 +1397,7 @@ var ImageCard = ({
 };
 
 // src/components/ImageSlider/ImageSlider.jsx
-var import_react25 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var ImageSlider = ({
   images = [
     {
@@ -2085,8 +1428,8 @@ var ImageSlider = ({
   showCaption = true,
   autoPlay = false
 }) => {
-  const [current, setCurrent] = (0, import_react25.useState)(0);
-  const [dir, setDir] = (0, import_react25.useState)(null);
+  const [current, setCurrent] = (0, import_react10.useState)(0);
+  const [dir, setDir] = (0, import_react10.useState)(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -2106,7 +1449,7 @@ var ImageSlider = ({
     setCurrent(i);
   };
   const img = images[current];
-  return /* @__PURE__ */ import_react25.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react10.default.createElement("div", { style: {
     background: bg,
     borderRadius: radius,
     overflow: "hidden",
@@ -2114,7 +1457,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__ */ import_react25.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react25.default.createElement(
+  } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react10.default.createElement(
     "img",
     {
       key: current,
@@ -2127,11 +1470,11 @@ var ImageSlider = ({
         animation: `sliderFade 0.35s ease`
       }
     }
-  ), /* @__PURE__ */ import_react25.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react25.default.createElement("div", { style: {
+  ), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
     position: "absolute",
     inset: 0,
     background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
-  } }), img.tag && /* @__PURE__ */ import_react25.default.createElement("div", { style: {
+  } }), img.tag && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
     position: "absolute",
     top: "12px",
     left: "12px",
@@ -2143,7 +1486,7 @@ var ImageSlider = ({
     color: "#fff",
     letterSpacing: "0.5px",
     textTransform: "uppercase"
-  } }, img.tag), /* @__PURE__ */ import_react25.default.createElement("div", { style: {
+  } }, img.tag), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
     position: "absolute",
     top: "12px",
     right: "12px",
@@ -2153,7 +1496,7 @@ var ImageSlider = ({
     fontSize: "10px",
     fontWeight: "600",
     color: "rgba(255,255,255,0.7)"
-  } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react25.default.createElement(
+  } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       onClick: prev,
@@ -2178,7 +1521,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__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "svg",
       {
         width: "14",
@@ -2189,9 +1532,9 @@ var ImageSlider = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ import_react25.default.createElement("polyline", { points: "15 18 9 12 15 6" })
+      /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "15 18 9 12 15 6" })
     )
-  ), /* @__PURE__ */ import_react25.default.createElement(
+  ), /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       onClick: next,
@@ -2216,7 +1559,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__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "svg",
       {
         width: "14",
@@ -2227,9 +1570,9 @@ var ImageSlider = ({
         strokeWidth: "2.5",
         strokeLinecap: "round"
       },
-      /* @__PURE__ */ import_react25.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+      /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "9 18 15 12 9 6" })
     )
-  )), showCaption && /* @__PURE__ */ import_react25.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react25.default.createElement(
+  )), showCaption && /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react10.default.createElement(
     "p",
     {
       style: {
@@ -2243,12 +1586,12 @@ var ImageSlider = ({
       key: current + "-title"
     },
     img.title
-  )), showDots && /* @__PURE__ */ import_react25.default.createElement("div", { style: {
+  )), showDots && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
     display: "flex",
     justifyContent: "center",
     gap: "6px",
     padding: "12px 16px 16px"
-  } }, images.map((_, i) => /* @__PURE__ */ import_react25.default.createElement(
+  } }, images.map((_, i) => /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       key: i,
@@ -2268,7 +1611,7 @@ var ImageSlider = ({
 };
 
 // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
-var import_react26 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var BackgoundImageSlider = ({
   images = [
     {
@@ -2304,15 +1647,15 @@ var BackgoundImageSlider = ({
   autoPlay = false,
   autoPlayInterval = 4e3
 }) => {
-  const [current, setCurrent] = (0, import_react26.useState)(0);
-  const [animating, setAnimating] = (0, import_react26.useState)(false);
+  const [current, setCurrent] = (0, import_react11.useState)(0);
+  const [animating, setAnimating] = (0, import_react11.useState)(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})`;
   };
-  const go = (0, import_react26.useCallback)((index) => {
+  const go = (0, import_react11.useCallback)((index) => {
     if (animating) return;
     setAnimating(true);
     setCurrent((index + images.length) % images.length);
@@ -2320,17 +1663,17 @@ var BackgoundImageSlider = ({
   }, [animating, images.length]);
   const prev = () => go(current - 1);
   const next = () => go(current + 1);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!autoPlay) return;
     const t = setInterval(() => go(current + 1), autoPlayInterval);
     return () => clearInterval(t);
   }, [autoPlay, autoPlayInterval, current, go]);
   const img = images[current];
-  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement("style", null, `
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.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__ */ import_react26.default.createElement("div", { style: {
+      `), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
     position: "relative",
     width,
     height,
@@ -2338,7 +1681,7 @@ var BackgoundImageSlider = ({
     overflow: "hidden",
     fontFamily: "system-ui, -apple-system, sans-serif",
     userSelect: "none"
-  } }, /* @__PURE__ */ import_react26.default.createElement(
+  } }, /* @__PURE__ */ import_react11.default.createElement(
     "img",
     {
       key: current,
@@ -2353,11 +1696,11 @@ var BackgoundImageSlider = ({
         animation: "hs-fade 0.4s ease"
       }
     }
-  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+  ), /* @__PURE__ */ import_react11.default.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__ */ import_react26.default.createElement(
+  } }), img.tag && /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
       key: current + "-tag",
@@ -2377,7 +1720,7 @@ var BackgoundImageSlider = ({
       }
     },
     img.tag
-  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+  ), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
     position: "absolute",
     top: "24px",
     right: "28px",
@@ -2387,7 +1730,7 @@ var BackgoundImageSlider = ({
     fontSize: "11px",
     fontWeight: "600",
     color: "rgba(255,255,255,0.7)"
-  } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react26.default.createElement(
+  } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react11.default.createElement(
     "button",
     {
       className: "hs-prev",
@@ -2412,7 +1755,7 @@ var BackgoundImageSlider = ({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ import_react26.default.createElement(
+    /* @__PURE__ */ import_react11.default.createElement(
       "svg",
       {
         width: "18",
@@ -2424,9 +1767,9 @@ var BackgoundImageSlider = ({
         strokeLinecap: "round",
         strokeLinejoin: "round"
       },
-      /* @__PURE__ */ import_react26.default.createElement("polyline", { points: "15 18 9 12 15 6" })
+      /* @__PURE__ */ import_react11.default.createElement("polyline", { points: "15 18 9 12 15 6" })
     )
-  ), /* @__PURE__ */ import_react26.default.createElement(
+  ), /* @__PURE__ */ import_react11.default.createElement(
     "button",
     {
       className: "hs-next",
@@ -2451,7 +1794,7 @@ var BackgoundImageSlider = ({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ import_react26.default.createElement(
+    /* @__PURE__ */ import_react11.default.createElement(
       "svg",
       {
         width: "18",
@@ -2463,15 +1806,15 @@ var BackgoundImageSlider = ({
         strokeLinecap: "round",
         strokeLinejoin: "round"
       },
-      /* @__PURE__ */ import_react26.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+      /* @__PURE__ */ import_react11.default.createElement("polyline", { points: "9 18 15 12 9 6" })
     )
-  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+  ), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
     position: "absolute",
     bottom: showDots ? "56px" : "28px",
     left: "28px",
     right: "28px",
     zIndex: 5
-  } }, /* @__PURE__ */ import_react26.default.createElement(
+  } }, /* @__PURE__ */ import_react11.default.createElement(
     "h2",
     {
       key: current + "-title",
@@ -2487,7 +1830,7 @@ var BackgoundImageSlider = ({
       }
     },
     img.title
-  ), /* @__PURE__ */ import_react26.default.createElement(
+  ), /* @__PURE__ */ import_react11.default.createElement(
     "p",
     {
       key: current + "-desc",
@@ -2502,7 +1845,7 @@ var BackgoundImageSlider = ({
       }
     },
     img.description
-  )), showDots && /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+  )), showDots && /* @__PURE__ */ import_react11.default.createElement("div", { style: {
     position: "absolute",
     bottom: "20px",
     left: 0,
@@ -2511,7 +1854,7 @@ var BackgoundImageSlider = ({
     justifyContent: "center",
     gap: "6px",
     zIndex: 5
-  } }, images.map((_, i) => /* @__PURE__ */ import_react26.default.createElement(
+  } }, images.map((_, i) => /* @__PURE__ */ import_react11.default.createElement(
     "button",
     {
       key: i,
@@ -2529,32 +1872,419 @@ var BackgoundImageSlider = ({
     }
   )))));
 };
+
+// src/components/PageLoader/PageLoader.jsx
+var import_react12 = __toESM(require("react"));
+var PageLoader = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "",
+  type = "spinner",
+  loadingText = "Loading...",
+  subText = "",
+  duration = 6e3,
+  onComplete = () => {
+  }
+}) => {
+  const [progress, setProgress] = (0, import_react12.useState)(0);
+  const [done, setDone] = (0, import_react12.useState)(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})`;
+  };
+  (0, import_react12.useEffect)(() => {
+    const steps = 100;
+    const interval = duration / steps;
+    let current = 0;
+    const timer = setInterval(() => {
+      current += 1;
+      setProgress(current);
+      if (current >= 100) {
+        clearInterval(timer);
+        setTimeout(() => {
+          setDone(true);
+          onComplete();
+        }, 300);
+      }
+    }, interval);
+    return () => clearInterval(timer);
+  }, [duration]);
+  if (done) return null;
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("div", { style: {
+    width: "100%",
+    height: "100%",
+    background: bg,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "28px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    animation: "pl-fade 0.3s ease"
+  } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    position: "absolute",
+    top: "-100px",
+    left: "-100px",
+    width: "400px",
+    height: "400px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, ${alpha(accent, 0.12)}, transparent 70%)`,
+    filter: "blur(60px)",
+    pointerEvents: "none"
+  } }), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    position: "absolute",
+    bottom: "-100px",
+    right: "-100px",
+    width: "350px",
+    height: "350px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, ${alpha(accent, 0.08)}, transparent 70%)`,
+    filter: "blur(60px)",
+    pointerEvents: "none"
+  } }), /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    width: "36px",
+    height: "36px",
+    borderRadius: "10px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    fontWeight: "800",
+    color: "#fff",
+    animation: type === "pulse" ? `pl-pulse 1.5s ease infinite` : "none"
+  } }, logo[0]), /* @__PURE__ */ import_react12.default.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ import_react12.default.createElement(
+    "circle",
+    {
+      cx: "28",
+      cy: "28",
+      r: "22",
+      fill: "none",
+      stroke: alpha(accent, 0.12),
+      strokeWidth: "4"
+    }
+  ), /* @__PURE__ */ import_react12.default.createElement(
+    "circle",
+    {
+      cx: "28",
+      cy: "28",
+      r: "22",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeDasharray: "34.8 104.4",
+      style: { transformOrigin: "center", animation: "pl-spin 0.9s linear infinite" }
+    }
+  )), /* @__PURE__ */ import_react12.default.createElement("span", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    fontWeight: "700",
+    color: accent
+  } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("div", { style: {
+    position: "absolute",
+    inset: "30%",
+    borderRadius: "50%",
+    background: accent
+  } })), type === "ring" && /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    width: "52px",
+    height: "52px",
+    borderRadius: "50%",
+    border: `4px solid ${alpha(accent, 0.15)}`,
+    borderTop: `4px solid ${accent}`,
+    borderRight: `4px solid ${accent}`,
+    animation: "pl-spin 0.9s linear infinite"
+  } }), type === "bar" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    width: "100%",
+    height: "4px",
+    background: alpha(accent, 0.15),
+    borderRadius: "2px",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    height: "100%",
+    width: `${progress}%`,
+    borderRadius: "2px",
+    background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.6)}, ${accent})`,
+    backgroundSize: "200% 100%",
+    animation: "pl-bar 1.2s linear infinite",
+    transition: "width 0.03s linear"
+  } })), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    fontSize: "11px",
+    color: "rgba(255,255,255,0.3)"
+  } }, /* @__PURE__ */ import_react12.default.createElement("span", null, loadingText), /* @__PURE__ */ import_react12.default.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
+};
+
+// src/components/OTPInput/OTPInput.jsx
+var import_react13 = __toESM(require("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] = (0, import_react13.useState)(Array(length).fill(""));
+  const [focused, setFocused] = (0, import_react13.useState)(0);
+  const [completed, setCompleted] = (0, import_react13.useState)(false);
+  const [resendTimer, setResendTimer] = (0, import_react13.useState)(30);
+  const inputs = (0, import_react13.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})`;
+  };
+  (0, import_react13.useEffect)(() => {
+    var _a;
+    (_a = inputs.current[0]) == null ? void 0 : _a.focus();
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    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__ */ import_react13.default.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__ */ import_react13.default.createElement("div", { style: { textAlign: "center", marginBottom: "24px" } }, /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ import_react13.default.createElement("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ import_react13.default.createElement("path", { d: "M16 3l-4 4-4-4" })
+  )), /* @__PURE__ */ import_react13.default.createElement("p", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 5px" } }, label), /* @__PURE__ */ import_react13.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", margin: 0 } }, subLabel)), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", marginBottom: "8px" } }, otp.map((val, i) => /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "10px" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: { width: "44px" } })), /* @__PURE__ */ import_react13.default.createElement("div", { style: { width: "10px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { width: "6px", height: "1.5px", background: "rgba(255,255,255,0.15)", borderRadius: "1px" } })), [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: { width: "44px" } })))), errorText && /* @__PURE__ */ import_react13.default.createElement("p", { style: {
+    fontSize: "12px",
+    color: "#f87171",
+    textAlign: "center",
+    margin: "6px 0 0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "5px"
+  } }, /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ import_react13.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ import_react13.default.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ import_react13.default.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ), errorText), /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("p", { style: { textAlign: "center", fontSize: "12px", color: "rgba(255,255,255,0.25)", margin: "14px 0 0" } }, "Didn't receive it?", " ", /* @__PURE__ */ import_react13.default.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
+  )));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Avatar,
   AvatarCard,
   BackgoundImageSlider,
   Charts,
-  CodeBlock,
-  CustomInputField,
-  DividerLine,
-  FileUpload,
   Footer,
   ImageCard,
   ImageSlider,
   Loader,
-  LoadingSpinner,
   Navbar,
   NotificationToast,
-  OtpInput,
+  OTPInput,
+  PageLoader,
   PricingCard,
-  ResponsiveNavbar,
-  SearchBar,
-  Sidebar,
-  SkeletonLoader,
-  SmartButton,
-  StatCard,
-  Tabs,
-  TextArea,
-  ToastNotification
+  Sidebar
 });