primus-react-ui 1.0.14 → 1.1.0

package/dist/index.js

@@ -45,17 +45,24 @@ __export(index_exports, {
   DashboardGrid: () => DashboardGrid,
   DocumentViewer: () => DocumentViewer,
   FeatureFlagToggle: () => FeatureFlagToggle,
+  Field: () => Field,
+  FieldDescription: () => FieldDescription,
+  FieldError: () => FieldError,
   FileUploader: () => FileUploader,
   FraudDetectionDashboard: () => FraudDetectionDashboard,
   Grid: () => Grid,
   Input: () => Input,
+  InputAddon: () => InputAddon,
+  InputGroup: () => InputGroup,
   KYCVerification: () => KYCVerification,
+  Label: () => Label,
   LoanCalculator: () => LoanCalculator,
   LogViewer: () => LogViewer,
   LoginPage: () => LoginPage,
   Modal: () => Modal,
   NotificationBell: () => NotificationBell,
   NotificationFeed: () => PrimusNotificationFeed,
+  PasswordInput: () => PasswordInput,
   PolicyCard: () => PolicyCard,
   PremiumCalculator: () => PremiumCalculator,
   PrimusActivityFeed: () => PrimusActivityFeed,
@@ -71,10 +78,16 @@ __export(index_exports, {
   PrimusDataTable: () => PrimusDataTable,
   PrimusDateRangePicker: () => PrimusDateRangePicker,
   PrimusExportMenu: () => PrimusExportMenu,
+  PrimusField: () => Field,
+  PrimusFieldDescription: () => FieldDescription,
+  PrimusFieldError: () => FieldError,
   PrimusFilterBar: () => PrimusFilterBar,
   PrimusGrid: () => Grid,
   PrimusHeader: () => PrimusHeader,
   PrimusInput: () => Input,
+  PrimusInputAddon: () => InputAddon,
+  PrimusInputGroup: () => InputGroup,
+  PrimusLabel: () => Label,
   PrimusLayout: () => PrimusLayout,
   PrimusLineChart: () => PrimusLineChart,
   PrimusLogin: () => PrimusLogin,
@@ -83,22 +96,31 @@ __export(index_exports, {
   PrimusNotificationCenter: () => PrimusNotificationCenter,
   PrimusNotificationFeed: () => PrimusNotificationFeed,
   PrimusNotifications: () => PrimusNotifications,
+  PrimusPasswordInput: () => PasswordInput,
   PrimusPieChart: () => PrimusPieChart,
   PrimusProvider: () => PrimusProvider,
   PrimusRadioGroup: () => RadioGroup,
   PrimusSearch: () => PrimusSearch,
+  PrimusSearchInput: () => SearchInput,
+  PrimusSection: () => PrimusSection,
   PrimusSelect: () => Select,
   PrimusSidebar: () => PrimusSidebar,
   PrimusSparkline: () => PrimusSparkline,
   PrimusStack: () => Stack,
   PrimusStatCard: () => PrimusStatCard,
+  PrimusStatsCard: () => PrimusStatCard,
+  PrimusStep: () => PrimusStep,
+  PrimusStepper: () => PrimusStepper,
+  PrimusSummaryCard: () => PrimusSummaryCard,
   PrimusTable: () => Table,
   PrimusTextarea: () => Textarea,
   PrimusThemeProvider: () => PrimusThemeProvider,
   PrimusThemeToggle: () => PrimusThemeToggle,
   PrimusToggle: () => Toggle,
+  PrimusWizard: () => PrimusWizard,
   QuoteComparison: () => QuoteComparison,
   RadioGroup: () => RadioGroup,
+  SearchInput: () => SearchInput,
   SecurityDashboard: () => SecurityDashboard,
   Select: () => Select,
   Stack: () => Stack,
@@ -110,6 +132,7 @@ __export(index_exports, {
   themeColors: () => themeColors,
   useNotifications: () => useNotifications,
   usePrimusAuth: () => usePrimusAuth,
+  usePrimusFetch: () => usePrimusFetch,
   usePrimusTheme: () => usePrimusTheme,
   useRealtimeNotifications: () => useRealtimeNotifications
 });
@@ -877,7 +900,7 @@ var SecurityDashboard = ({
 };
 
 // src/components/auth/PrimusLogin.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/context/PrimusThemeProvider.tsx
 var import_react12 = require("react");
@@ -961,55 +984,345 @@ function PrimusThemeToggle() {
   );
 }
 
-// src/components/auth/PrimusLogin.tsx
+// src/context/PrimusProvider.tsx
+var import_react13 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var providerConfigs = {
-  google: {
-    name: "Google",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
-    ] }),
-    colors: { light: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300", dark: "bg-white hover:bg-gray-100 text-gray-700 border-gray-300" }
+var PrimusAuthContext = (0, import_react13.createContext)(void 0);
+var PrimusProvider = ({
+  children,
+  authority,
+  authBasePath = "/api/auth",
+  csrfCookieName = "XSRF-TOKEN",
+  csrfHeaderName = "X-Primus-CSRF",
+  seedCsrfOnLoad = true,
+  clientId,
+  onLoginSuccess,
+  onLoginError,
+  heartbeatInterval = 3e5
+  // 5 minutes
+}) => {
+  void clientId;
+  const [isAuthenticated, setIsAuthenticated] = (0, import_react13.useState)(false);
+  const [user, setUser] = (0, import_react13.useState)(null);
+  const [token, setToken] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const heartbeatRef = (0, import_react13.useRef)(null);
+  const trimTrailingSlash = (value) => value.replace(/\/+$/, "");
+  const ensureLeadingSlash = (value) => value.startsWith("/") ? value : `/${value}`;
+  const joinUrl = (base, path) => `${trimTrailingSlash(base)}${ensureLeadingSlash(path)}`;
+  const authBaseUrl = trimTrailingSlash(joinUrl(authority, authBasePath));
+  const getCookie = (name) => {
+    if (typeof document === "undefined") return null;
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const matches = document.cookie.match(new RegExp(`(?:^|; )${escaped}=([^;]*)`));
+    return matches ? decodeURIComponent(matches[1]) : null;
+  };
+  const fetchSessionUser = (0, import_react13.useCallback)(async () => {
+    const response = await fetch(`${authBaseUrl}/me`, {
+      credentials: "include",
+      headers: {
+        "Accept": "application/json"
+      }
+    });
+    if (!response.ok) return null;
+    const data = await response.json().catch(() => null);
+    if (!data) return null;
+    const resolvedUser = data.user ?? data;
+    return resolvedUser ?? null;
+  }, [authBaseUrl]);
+  const startHeartbeat = (0, import_react13.useCallback)(() => {
+    if (typeof window === "undefined") return;
+    if (heartbeatRef.current) clearInterval(heartbeatRef.current);
+    heartbeatRef.current = setInterval(() => {
+      fetchSessionUser().catch(() => {
+      });
+    }, heartbeatInterval);
+  }, [heartbeatInterval, fetchSessionUser]);
+  const stopHeartbeat = (0, import_react13.useCallback)(() => {
+    if (heartbeatRef.current) {
+      clearInterval(heartbeatRef.current);
+      heartbeatRef.current = null;
+    }
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    return () => stopHeartbeat();
+  }, [stopHeartbeat]);
+  const seedCsrf = (0, import_react13.useCallback)(async () => {
+    try {
+      await fetch(`${authBaseUrl}/providers`, {
+        credentials: "include",
+        headers: { "Accept": "application/json" }
+      });
+    } catch {
+    }
+  }, [authBaseUrl]);
+  (0, import_react13.useEffect)(() => {
+    const checkSession = async () => {
+      setIsLoading(true);
+      try {
+        if (seedCsrfOnLoad) {
+          await seedCsrf();
+        }
+        const userData = await fetchSessionUser();
+        if (userData) {
+          setUser(userData);
+          setIsAuthenticated(true);
+          setToken("session-active");
+          startHeartbeat();
+        } else {
+          stopHeartbeat();
+        }
+      } catch (err) {
+        console.debug("No active session found", err);
+        setIsAuthenticated(false);
+        setUser(null);
+        stopHeartbeat();
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    checkSession();
+  }, [fetchSessionUser, seedCsrf, seedCsrfOnLoad, startHeartbeat, stopHeartbeat]);
+  const login = (0, import_react13.useCallback)(async (credentials) => {
+    setIsLoading(true);
+    try {
+      if ("provider" in credentials) {
+        window.location.href = `${authBaseUrl}/${credentials.provider}`;
+        return { success: true };
+      }
+      const csrfToken = getCookie(csrfCookieName);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (csrfToken) {
+        headers[csrfHeaderName] = csrfToken;
+      }
+      const response = await fetch(`${authBaseUrl}/login`, {
+        method: "POST",
+        headers,
+        credentials: "include",
+        // CRITICAL: Persist HttpOnly Cookie
+        body: JSON.stringify({ email: credentials.email, password: credentials.password })
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const errorMsg = errorData.message || errorData.title || `Login failed (${response.status})`;
+        onLoginError?.(errorMsg);
+        return { success: false, error: errorMsg };
+      }
+      const data = await response.json().catch(() => null);
+      const userData = data ? data.user || data : null;
+      const refreshedUser = userData ?? await fetchSessionUser();
+      setToken("session-active");
+      if (refreshedUser) {
+        setUser(refreshedUser);
+        startHeartbeat();
+      }
+      setIsAuthenticated(true);
+      if (refreshedUser) {
+        onLoginSuccess?.(refreshedUser, "session-active");
+      }
+      return { success: true };
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Network error";
+      onLoginError?.(errorMsg);
+      return { success: false, error: errorMsg };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [authBaseUrl, csrfCookieName, csrfHeaderName, fetchSessionUser, onLoginError, onLoginSuccess, startHeartbeat]);
+  const logout = (0, import_react13.useCallback)(async () => {
+    try {
+      stopHeartbeat();
+      const csrfToken = getCookie(csrfCookieName);
+      const headers = {};
+      if (csrfToken) {
+        headers[csrfHeaderName] = csrfToken;
+      }
+      await fetch(`${authBaseUrl}/logout`, {
+        method: "POST",
+        credentials: "include",
+        headers
+      });
+    } catch (e) {
+      console.error("Logout failed", e);
+    } finally {
+      setToken(null);
+      setIsAuthenticated(false);
+      setUser(null);
+    }
+  }, [authBaseUrl, csrfCookieName, csrfHeaderName, stopHeartbeat]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PrimusAuthContext.Provider, { value: {
+    isAuthenticated,
+    user,
+    login,
+    logout,
+    token,
+    isLoading,
+    csrfCookieName,
+    csrfHeaderName
+  }, children });
+};
+var usePrimusAuth = () => {
+  const context = (0, import_react13.useContext)(PrimusAuthContext);
+  if (context === void 0) {
+    return {
+      isAuthenticated: false,
+      user: null,
+      login: async () => ({ success: false, error: "PrimusProvider not configured" }),
+      logout: async () => {
+      },
+      token: null,
+      isLoading: false,
+      csrfCookieName: "XSRF-TOKEN",
+      csrfHeaderName: "X-Primus-CSRF"
+    };
+  }
+  return context;
+};
+
+// src/components/auth/PrimusLogin.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var styles = {
+  container: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "24px",
+    fontFamily: '"Segoe UI", Arial, sans-serif',
+    transition: "background-color 0.3s, color 0.3s"
   },
-  azure: {
-    name: "Microsoft",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: "h-5 w-5", viewBox: "0 0 23 23", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#81bc06", d: "M12 1h10v10H12z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
-    ] }),
-    colors: { light: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300", dark: "bg-white hover:bg-gray-100 text-gray-700 border-gray-300" }
+  card: {
+    width: "100%",
+    maxWidth: "420px",
+    borderRadius: "16px",
+    padding: "24px",
+    boxShadow: "0 20px 40px rgba(15, 23, 42, 0.08)",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "#ffffff"
   },
-  github: {
-    name: "GitHub",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "h-5 w-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) }),
-    colors: { light: "bg-gray-900 hover:bg-gray-800 text-white border-gray-900", dark: "bg-white hover:bg-gray-100 text-gray-900 border-gray-300" }
+  header: {
+    marginBottom: "24px",
+    textAlign: "center"
   },
-  microsoft: {
-    name: "Microsoft",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#F25022", d: "M1 1h10v10H1z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#00A4EF", d: "M1 13h10v10H1z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#7FBA00", d: "M13 1h10v10H13z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#FFB900", d: "M13 13h10v10H13z" })
-    ] }),
-    colors: { light: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300", dark: "bg-white hover:bg-gray-100 text-gray-700 border-gray-300" }
+  logoStr: {
+    width: "48px",
+    height: "48px",
+    borderRadius: "12px",
+    marginBottom: "16px",
+    objectFit: "cover"
+  },
+  title: {
+    margin: "12px 0 4px",
+    fontSize: "22px",
+    fontWeight: "600"
+  },
+  subtitle: {
+    margin: 0,
+    fontSize: "13px",
+    color: "#64748b"
+  },
+  socialGrid: {
+    display: "grid",
+    gap: "10px",
+    marginTop: "16px"
+  },
+  socialBtn: {
+    border: "1px solid #cbd5e1",
+    background: "#ffffff",
+    padding: "10px",
+    borderRadius: "10px",
+    fontSize: "13px",
+    cursor: "pointer",
+    color: "#0f172a",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    width: "100%",
+    fontWeight: 500,
+    transition: "background-color 0.2s"
+  },
+  divider: {
+    margin: "24px 0",
+    textAlign: "center",
+    fontSize: "12px",
+    color: "#94a3b8",
+    position: "relative"
+  },
+  // Form
+  form: {
+    display: "grid",
+    gap: "16px"
   },
-  apple: {
-    name: "Apple",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "h-5 w-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }),
-    colors: { light: "bg-black hover:bg-gray-900 text-white border-black", dark: "bg-white hover:bg-gray-100 text-black border-gray-300" }
+  label: {
+    display: "block",
+    fontSize: "12px",
+    color: "#64748b",
+    fontWeight: 600,
+    marginBottom: "6px",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  input: {
+    width: "100%",
+    border: "1px solid #cbd5e1",
+    borderRadius: "8px",
+    padding: "10px 12px",
+    background: "#ffffff",
+    color: "#0f172a",
+    fontSize: "14px",
+    outline: "none"
+  },
+  submitBtn: {
+    marginTop: "8px",
+    background: "#0f172a",
+    // Slate-900
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "8px",
+    padding: "12px",
+    cursor: "pointer",
+    fontWeight: 600,
+    fontSize: "14px",
+    width: "100%"
   },
-  facebook: {
-    name: "Facebook",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "h-5 w-5", fill: "white", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) }),
-    colors: { light: "bg-[#1877F2] hover:bg-[#166FE5] text-white border-[#1877F2]", dark: "bg-[#1877F2] hover:bg-[#166FE5] text-white border-[#1877F2]" }
+  error: {
+    marginTop: "12px",
+    color: "#dc2626",
+    fontSize: "12px",
+    textAlign: "center"
   }
 };
+var darkStyles = {
+  container: { backgroundColor: "#0f172a", color: "#f8fafc" },
+  card: { backgroundColor: "#1e293b", borderColor: "#334155", boxShadow: "none" },
+  subtitle: { color: "#94a3b8" },
+  socialBtn: { backgroundColor: "#1e293b", borderColor: "#334155", color: "#f8fafc" },
+  label: { color: "#94a3b8" },
+  input: { backgroundColor: "#0f172a", borderColor: "#334155", color: "#f8fafc" },
+  submitBtn: { backgroundColor: "#8b5cf6" }
+  // Violet for dark mode
+};
+var Icons = {
+  google: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.17.282-1.709V4.958H.957C.347 6.173 0 7.548 0 9c0 1.452.348 2.827.957 4.042l3.007-2.335z", fill: "#FBBC05" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })
+  ] }),
+  microsoft: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M0 0h8.571v8.571H0V0z", fill: "#F25022" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9.429 0H18v8.571H9.429V0z", fill: "#7FBA00" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M0 9.429h8.571V18H0V9.429z", fill: "#00A4EF" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9.429 9.429H18V18H9.429V9.429z", fill: "#FFB900" })
+  ] }),
+  github: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9 0C4.029 0 0 4.029 0 9c0 3.977 2.578 7.348 6.155 8.537.45.082.615-.195.615-.433 0-.213-.008-.923-.012-1.674-2.505.544-3.034-1.073-3.034-1.073-.41-1.04-1-1.316-1-1.316-.817-.558.062-.547.062-.547.903.064 1.378.927 1.378.927.803 1.376 2.107.978 2.62.748.082-.582.314-.978.572-1.203-2-.227-4.1-1-4.1-4.448 0-.983.35-1.786.927-2.416-.093-.228-.402-1.144.088-2.383 0 0 .756-.242 2.475.923A8.63 8.63 0 019 4.347c.765.004 1.535.103 2.254.303 1.718-1.165 2.473-.923 2.473-.923.491 1.239.182 2.155.089 2.383.578.63.926 1.433.926 2.416 0 3.457-2.104 4.218-4.109 4.44.323.278.611.827.611 1.667 0 1.203-.011 2.173-.011 2.469 0 .24.163.52.619.432C15.424 16.345 18 12.976 18 9c0-4.971-4.029-9-9-9z" }) }),
+  apple: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M14.94 13.52c-.36.77-.54 1.12-1.01 1.8-.66.95-1.59 2.13-2.74 2.14-1.02.01-1.29-.66-2.68-.65-1.39.01-1.69.66-2.71.65-1.15-.01-2.01-1.07-2.67-2.02-1.85-2.66-2.04-5.78-.9-7.44.81-1.18 2.09-1.87 3.29-1.87 1.22 0 1.99.67 3 .67.98 0 1.58-.67 2.99-.67 1.07 0 2.2.58 3.01 1.58-2.64 1.45-2.21 5.23.42 6.81zM11.53 3.96c.52-.67.92-1.61.77-2.56-.84.04-1.84.59-2.43 1.29-.52.62-.96 1.58-.79 2.5.94.02 1.91-.53 2.45-1.23z" }) }),
+  auth0: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "#EB5424", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M13.98 0L9 7.83 4.02 0H0l9 15.59L18 0h-4.02zM9 10.41L4.02 18h9.96L9 10.41z" }) }),
+  facebook: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "#1877F2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M18 9.05C18 4.05 13.97 0 9 0S0 4.05 0 9.05C0 13.58 3.29 17.34 7.59 18v-6.28H5.31V9.05h2.28V7.05c0-2.25 1.34-3.49 3.39-3.49.98 0 2.01.18 2.01.18v2.21h-1.13c-1.11 0-1.46.69-1.46 1.4v1.68h2.49l-.4 2.67h-2.09V18C14.71 17.34 18 13.58 18 9.05z" }) })
+};
 function PrimusLogin({
   onLogin,
   socialProviders = [],
@@ -1019,20 +1332,45 @@ function PrimusLogin({
   title = "Welcome Back",
   subtitle = "Enter your credentials to continue",
   logo,
-  theme: themeOverride
+  theme: themeOverride,
+  variant = "standalone",
+  useAuth = false
 }) {
   const themeContext = usePrimusTheme();
+  const auth = usePrimusAuth();
   const theme = themeOverride || themeContext.theme;
   const isLight = theme === "light";
-  const [username, setUsername] = (0, import_react13.useState)("");
-  const [password, setPassword] = (0, import_react13.useState)("");
-  const [loading, setLoading] = (0, import_react13.useState)(false);
+  const isDark = !isLight;
+  const [username, setUsername] = (0, import_react14.useState)("");
+  const [password, setPassword] = (0, import_react14.useState)("");
+  const [loading, setLoading] = (0, import_react14.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react14.useState)("");
+  const currentStyles = {
+    container: { ...styles.container, ...isDark ? darkStyles.container : {} },
+    card: { ...styles.card, ...isDark ? darkStyles.card : {} },
+    title: { ...styles.title, color: isLight ? "#0f172a" : "#f8fafc" },
+    subtitle: { ...styles.subtitle, ...isDark ? darkStyles.subtitle : {} },
+    input: { ...styles.input, ...isDark ? darkStyles.input : {} },
+    socialBtn: { ...styles.socialBtn, ...isDark ? darkStyles.socialBtn : {} },
+    label: { ...styles.label, ...isDark ? darkStyles.label : {} },
+    submitBtn: { ...styles.submitBtn, ...isDark ? darkStyles.submitBtn : {} }
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!username || !password) return;
     setLoading(true);
+    setErrorMessage("");
     try {
+      if (useAuth) {
+        const result = await auth.login({ email: username, password });
+        if (!result.success) {
+          setErrorMessage(result.error || "Login failed");
+          return;
+        }
+      }
       onLogin?.({ username, password });
+    } catch (err) {
+      setErrorMessage("Login failed. Please try again.");
     } finally {
       setLoading(false);
     }
@@ -1041,194 +1379,92 @@ function PrimusLogin({
     if (onSocialLogin) {
       onSocialLogin(provider);
     } else {
-      window.location.href = `${authEndpoint}/${provider}`;
+      const base = authEndpoint.replace(/\/+$/, "");
+      window.location.href = `${base}/${provider}`;
     }
   };
-  const bgGradient = isLight ? "bg-gradient-to-br from-gray-50 via-white to-violet-50" : "bg-gray-950";
-  const cardBg = isLight ? "bg-white border-gray-200 shadow-xl" : "bg-gray-900/50 border-white/10";
-  const headingColor = isLight ? "text-gray-900" : "text-white";
-  const subtextColor = isLight ? "text-gray-500" : "text-slate-400";
-  const labelColor = isLight ? "text-gray-600" : "text-slate-300";
-  const inputClasses = isLight ? "bg-gray-50 border-gray-300 text-gray-900 placeholder:text-gray-400 focus:border-violet-500 focus:ring-violet-500" : "bg-gray-950/50 border-slate-700 text-white placeholder:text-slate-600 focus:border-blue-500 focus:ring-blue-500";
-  const buttonGradient = isLight ? "bg-gradient-to-r from-violet-600 to-purple-600" : "bg-gradient-to-r from-blue-600 to-indigo-600";
-  const logoBg = isLight ? "bg-violet-600 shadow-violet-500/20" : "bg-blue-600 shadow-blue-500/20";
-  const dividerColor = isLight ? "border-gray-200" : "border-slate-700";
-  const hasSocial = socialProviders.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `min-h-screen ${bgGradient} flex items-center justify-center p-4`, children: [
-    !isLight && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-[20%] -left-[10%] w-[50%] h-[50%] bg-blue-600/20 rounded-full blur-[120px]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -bottom-[20%] -right-[10%] w-[50%] h-[50%] bg-purple-600/20 rounded-full blur-[120px]" })
+  const renderSocialIcon = (p) => {
+    const key = p === "azure" ? "microsoft" : p;
+    return Icons[key] || null;
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: currentStyles.card, className: "primus-login-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.header, className: "primus-login-header", children: [
+      logo && (typeof logo === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: logo, alt: "Logo", style: styles.logoStr }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { marginBottom: "16px", display: "flex", justifyContent: "center" }, children: logo })),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: currentStyles.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: currentStyles.subtitle, children: subtitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `w-full max-w-md ${cardBg} p-8 rounded-2xl border backdrop-blur-xl relative z-10`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-center mb-8", children: [
-        logo ? typeof logo === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logo, alt: "Logo", className: "h-12 w-12 mx-auto mb-4 rounded-xl" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-4", children: logo }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `h-12 w-12 ${logoBg} rounded-xl mx-auto flex items-center justify-center mb-4 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-bold text-xl text-white", children: "P" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: `text-2xl font-bold ${headingColor} tracking-tight`, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `${subtextColor} text-sm mt-2`, children: subtitle })
-      ] }),
-      hasSocial && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-3 mb-6", children: socialProviders.map((provider) => {
-        const config = providerConfigs[provider];
-        if (!config) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-          "button",
+    socialProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.socialGrid, className: "primus-social", children: socialProviders.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleSocialClick(provider),
+        style: currentStyles.socialBtn,
+        onMouseOver: (e) => {
+          if (isLight) e.currentTarget.style.backgroundColor = "#f1f5f9";
+          else e.currentTarget.style.backgroundColor = "#334155";
+        },
+        onMouseOut: (e) => {
+          if (isLight) e.currentTarget.style.backgroundColor = "#ffffff";
+          else e.currentTarget.style.backgroundColor = "#1e293b";
+        },
+        children: [
+          renderSocialIcon(provider),
+          "Continue with ",
+          provider === "azure" ? "Microsoft" : provider.charAt(0).toUpperCase() + provider.slice(1)
+        ]
+      },
+      provider
+    )) }),
+    socialProviders.length > 0 && showEmailLogin && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.divider, className: "primus-divider", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { backgroundColor: isLight ? "#fff" : "#1e293b", padding: "0 8px", position: "relative", zIndex: 1 }, children: "Or continue with email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { position: "absolute", top: "50%", left: 0, right: 0, borderTop: isLight ? "1px solid #e2e8f0" : "1px solid #334155", zIndex: 0 } })
+    ] }),
+    showEmailLogin && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit: handleSubmit, style: styles.form, className: "primus-form", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { style: currentStyles.label, children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "input",
           {
-            onClick: () => handleSocialClick(provider),
-            className: `w-full flex items-center justify-center gap-3 px-4 py-2.5 border rounded-lg font-medium text-sm transition-all duration-200 ${isLight ? config.colors.light : config.colors.dark}`,
-            children: [
-              config.icon,
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
-                "Continue with ",
-                config.name
-              ] })
-            ]
-          },
-          provider
-        );
-      }) }),
-      hasSocial && showEmailLogin && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative my-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `w-full border-t ${dividerColor}` }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${isLight ? "bg-white" : "bg-gray-900/50"} px-2 ${subtextColor}`, children: "Or continue with email" }) })
+            type: "text",
+            value: username,
+            onChange: (e) => setUsername(e.target.value),
+            style: currentStyles.input,
+            placeholder: "you@example.com"
+          }
+        )
       ] }),
-      showEmailLogin && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: `text-xs font-medium ${labelColor} ml-1`, children: "EMAIL" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "input",
-            {
-              type: "text",
-              value: username,
-              onChange: (e) => setUsername(e.target.value),
-              className: `w-full px-4 py-2.5 ${inputClasses} border rounded-lg focus:outline-none focus:ring-1 transition-all text-sm`,
-              placeholder: "you@example.com"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: `text-xs font-medium ${labelColor} ml-1`, children: "PASSWORD" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "input",
-            {
-              type: "password",
-              value: password,
-              onChange: (e) => setPassword(e.target.value),
-              className: `w-full px-4 py-2.5 ${inputClasses} border rounded-lg focus:outline-none focus:ring-1 transition-all text-sm`,
-              placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "button",
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { style: currentStyles.label, children: "Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "input",
           {
-            type: "submit",
-            disabled: loading,
-            className: `w-full mt-4 py-2.5 ${buttonGradient} text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50`,
-            children: loading ? "Signing in..." : "Sign In"
+            type: "password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            style: currentStyles.input,
+            placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
           }
         )
-      ] })
-    ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: loading,
+          style: { ...currentStyles.submitBtn, opacity: loading ? 0.7 : 1 },
+          children: loading ? "Signing in..." : "Sign In"
+        }
+      )
+    ] }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: styles.error, children: errorMessage })
   ] });
+  if (variant === "embedded") {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { ...currentStyles.container, background: isLight ? "#f8fafc" : "#0f172a" }, className: `primus-login ${isDark ? "dark" : ""}`, children: content });
 }
 var LoginPage = PrimusLogin;
 
-// src/context/PrimusProvider.tsx
-var import_react14 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var PrimusAuthContext = (0, import_react14.createContext)(void 0);
-var PrimusProvider = ({
-  children,
-  authority,
-  clientId,
-  onLoginSuccess,
-  onLoginError
-}) => {
-  void clientId;
-  const [isAuthenticated, setIsAuthenticated] = (0, import_react14.useState)(false);
-  const [user, setUser] = (0, import_react14.useState)(null);
-  const [token, setToken] = (0, import_react14.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
-    const storedToken = localStorage.getItem("primus_token");
-    const storedUser = localStorage.getItem("primus_user");
-    if (storedToken && storedUser) {
-      try {
-        setToken(storedToken);
-        setUser(JSON.parse(storedUser));
-        setIsAuthenticated(true);
-      } catch {
-        localStorage.removeItem("primus_token");
-        localStorage.removeItem("primus_user");
-      }
-    }
-  }, []);
-  const login = (0, import_react14.useCallback)(async (credentials) => {
-    setIsLoading(true);
-    try {
-      let endpoint;
-      let body;
-      if ("provider" in credentials) {
-        endpoint = `${authority}/auth/${credentials.provider}`;
-        body = {};
-      } else {
-        endpoint = `${authority}/auth/local`;
-        body = { email: credentials.email, password: credentials.password };
-      }
-      const response = await fetch(endpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body)
-      });
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        const errorMsg = errorData.message || `Login failed (${response.status})`;
-        onLoginError?.(errorMsg);
-        return { success: false, error: errorMsg };
-      }
-      const data = await response.json();
-      const accessToken = data.access_token || data.token;
-      const userData = data.user || {
-        name: "Authenticated User",
-        email: "provider" in credentials ? `${credentials.provider}@primus.local` : credentials.email
-      };
-      localStorage.setItem("primus_token", accessToken);
-      localStorage.setItem("primus_user", JSON.stringify(userData));
-      setToken(accessToken);
-      setUser(userData);
-      setIsAuthenticated(true);
-      onLoginSuccess?.(userData, accessToken);
-      return { success: true };
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : "Network error";
-      onLoginError?.(errorMsg);
-      return { success: false, error: errorMsg };
-    } finally {
-      setIsLoading(false);
-    }
-  }, [authority, onLoginSuccess, onLoginError]);
-  const logout = (0, import_react14.useCallback)(async () => {
-    localStorage.removeItem("primus_token");
-    localStorage.removeItem("primus_user");
-    setToken(null);
-    setIsAuthenticated(false);
-    setUser(null);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PrimusAuthContext.Provider, { value: { isAuthenticated, user, login, logout, token, isLoading }, children });
-};
-var usePrimusAuth = () => {
-  const context = (0, import_react14.useContext)(PrimusAuthContext);
-  if (context === void 0) {
-    return {
-      isAuthenticated: false,
-      user: null,
-      login: async () => ({ success: false, error: "PrimusProvider not configured" }),
-      logout: async () => {
-      },
-      token: null,
-      isLoading: false
-    };
-  }
-  return context;
-};
-
 // src/components/shared/Button.tsx
 var import_react15 = __toESM(require("react"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -1373,23 +1609,68 @@ var UserProfile = ({
   ] });
 };
 
-// src/hooks/useNotifications.ts
+// src/hooks/usePrimusFetch.ts
 var import_react16 = require("react");
+function usePrimusFetch() {
+  const { logout, csrfCookieName = "XSRF-TOKEN", csrfHeaderName = "X-Primus-CSRF" } = usePrimusAuth();
+  const getCookie = (0, import_react16.useCallback)((name) => {
+    if (typeof document === "undefined") return null;
+    try {
+      const matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"));
+      return matches ? decodeURIComponent(matches[1]) : null;
+    } catch {
+      return null;
+    }
+  }, []);
+  const primusFetch = (0, import_react16.useCallback)(async (input, init) => {
+    const { skipAuth, ...fetchInit } = init || {};
+    const config = {
+      ...fetchInit,
+      headers: new Headers(fetchInit.headers)
+    };
+    if (!skipAuth) {
+      config.credentials = "include";
+    }
+    const method = (config.method || "GET").toUpperCase();
+    if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+      const csrfToken = getCookie(csrfCookieName);
+      if (csrfToken) {
+        config.headers.set(csrfHeaderName, csrfToken);
+      }
+    }
+    try {
+      const response = await window.fetch(input, config);
+      if (response.status === 401 && !skipAuth) {
+        console.debug("[PrimusFetch] 401 Unauthorized detected. triggering logout.");
+        logout();
+      }
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  }, [getCookie, logout, csrfCookieName, csrfHeaderName]);
+  return {
+    fetch: primusFetch
+  };
+}
+
+// src/hooks/useNotifications.ts
+var import_react17 = require("react");
 var useNotifications = ({
   apiUrl = "http://localhost:5221",
   useMock = false,
   mockData = []
 } = {}) => {
-  const [notifications, setNotifications] = (0, import_react16.useState)([]);
-  const [unreadCount, setUnreadCount] = (0, import_react16.useState)(0);
-  const [loading, setLoading] = (0, import_react16.useState)(true);
-  const safeMockData = (0, import_react16.useMemo)(() => mockData || [], [JSON.stringify(mockData)]);
+  const [notifications, setNotifications] = (0, import_react17.useState)([]);
+  const [unreadCount, setUnreadCount] = (0, import_react17.useState)(0);
+  const [loading, setLoading] = (0, import_react17.useState)(true);
+  const safeMockData = (0, import_react17.useMemo)(() => mockData || [], [JSON.stringify(mockData)]);
   const DEFAULT_MOCK_DATA = [
     { id: "1", title: "Welcome", message: "Welcome to Primus UI", type: "info", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false },
     { id: "2", title: "System Update", message: "Maintenance scheduled", type: "warning", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false },
     { id: "3", title: "Payment Success", message: "Your payment was processed", type: "success", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false }
   ];
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (useMock) {
       const data = safeMockData.length > 0 ? safeMockData : DEFAULT_MOCK_DATA;
       setNotifications(data);
@@ -1440,8 +1721,8 @@ var useNotifications = ({
 
 // src/components/notifications/NotificationFeed.tsx
 var import_outline = require("@heroicons/react/24/outline");
-var import_react17 = require("@headlessui/react");
-var import_react18 = require("react");
+var import_react18 = require("@headlessui/react");
+var import_react19 = require("react");
 var import_clsx = require("clsx");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var NotificationIcon = ({ type }) => {
@@ -1458,8 +1739,8 @@ var NotificationIcon = ({ type }) => {
 };
 var PrimusNotificationFeed = ({ useMock, mockData, apiUrl, className }) => {
   const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications({ useMock, mockData, apiUrl });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Popover, { className: (0, import_clsx.clsx)("relative", className), children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Popover.Button, { className: (0, import_clsx.clsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react18.Popover, { className: (0, import_clsx.clsx)("relative", className), children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react18.Popover.Button, { className: (0, import_clsx.clsx)(
       "relative p-2 rounded-full hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primus-500",
       open && "bg-gray-100"
     ), children: [
@@ -1467,16 +1748,16 @@ var PrimusNotificationFeed = ({ useMock, mockData, apiUrl, className }) => {
       unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "absolute top-1 right-1 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-white" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react17.Transition,
+      import_react18.Transition,
       {
-        as: import_react18.Fragment,
+        as: import_react19.Fragment,
         enter: "transition ease-out duration-200",
         enterFrom: "opacity-0 translate-y-1",
         enterTo: "opacity-100 translate-y-0",
         leave: "transition ease-in duration-150",
         leaveFrom: "opacity-100 translate-y-0",
         leaveTo: "opacity-0 translate-y-1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Popover.Panel, { className: "absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:w-96", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react18.Popover.Panel, { className: "absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:w-96", children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "px-4 py-3 flex items-center justify-between border-b border-gray-100", children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-sm font-semibold text-gray-900", children: "Notifications" }),
             unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -1516,7 +1797,7 @@ var PrimusNotificationFeed = ({ useMock, mockData, apiUrl, className }) => {
 };
 
 // src/components/notifications/PrimusNotificationCenter.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var API_URL = "http://localhost:5222";
@@ -1530,15 +1811,15 @@ function PrimusNotificationCenter({
   const themeContext = usePrimusTheme();
   const theme = themeOverride || themeContext.theme;
   const t = themeColors[theme];
-  const [notifications, setNotifications] = (0, import_react19.useState)([]);
-  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
-  const [showSendForm, setShowSendForm] = (0, import_react19.useState)(false);
-  const [unreadCount, setUnreadCount] = (0, import_react19.useState)(0);
-  const [newTitle, setNewTitle] = (0, import_react19.useState)("");
-  const [newMessage, setNewMessage] = (0, import_react19.useState)("");
-  const [newType, setNewType] = (0, import_react19.useState)("info");
-  const [sending, setSending] = (0, import_react19.useState)(false);
-  const fetchNotifications = (0, import_react19.useCallback)(async () => {
+  const [notifications, setNotifications] = (0, import_react20.useState)([]);
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [showSendForm, setShowSendForm] = (0, import_react20.useState)(false);
+  const [unreadCount, setUnreadCount] = (0, import_react20.useState)(0);
+  const [newTitle, setNewTitle] = (0, import_react20.useState)("");
+  const [newMessage, setNewMessage] = (0, import_react20.useState)("");
+  const [newType, setNewType] = (0, import_react20.useState)("info");
+  const [sending, setSending] = (0, import_react20.useState)(false);
+  const fetchNotifications = (0, import_react20.useCallback)(async () => {
     try {
       const response = await fetch(`${apiUrl}/api/notifications`);
       if (response.ok) {
@@ -1549,7 +1830,7 @@ function PrimusNotificationCenter({
     } catch (error) {
     }
   }, [apiUrl]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (useMock || mockData) {
       const next = mockData ?? [];
       setNotifications(next);
@@ -1762,15 +2043,15 @@ var NotificationBell = PrimusNotificationCenter;
 var PrimusNotifications = PrimusNotificationCenter;
 
 // src/hooks/useRealtimeNotifications.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useRealtimeNotifications = (options) => {
   const { apiUrl, pollInterval = 3e3, userId } = options;
-  const [notifications, setNotifications] = (0, import_react20.useState)([]);
-  const [unreadCount, setUnreadCount] = (0, import_react20.useState)(0);
-  const [loading, setLoading] = (0, import_react20.useState)(true);
-  const [error, setError] = (0, import_react20.useState)(null);
+  const [notifications, setNotifications] = (0, import_react21.useState)([]);
+  const [unreadCount, setUnreadCount] = (0, import_react21.useState)(0);
+  const [loading, setLoading] = (0, import_react21.useState)(true);
+  const [error, setError] = (0, import_react21.useState)(null);
   const baseUrl = `${apiUrl}/api/notifications`;
-  const fetchNotifications = (0, import_react20.useCallback)(async () => {
+  const fetchNotifications = (0, import_react21.useCallback)(async () => {
     try {
       const url = userId ? `${baseUrl}?userId=${userId}` : baseUrl;
       const response = await fetch(url);
@@ -1786,7 +2067,7 @@ var useRealtimeNotifications = (options) => {
       setLoading(false);
     }
   }, [baseUrl, userId]);
-  const sendNotification = (0, import_react20.useCallback)(async (title, message, type = "info") => {
+  const sendNotification = (0, import_react21.useCallback)(async (title, message, type = "info") => {
     try {
       const response = await fetch(baseUrl, {
         method: "POST",
@@ -1802,7 +2083,7 @@ var useRealtimeNotifications = (options) => {
       return false;
     }
   }, [baseUrl, userId, fetchNotifications]);
-  const markAsRead = (0, import_react20.useCallback)(async (id) => {
+  const markAsRead = (0, import_react21.useCallback)(async (id) => {
     try {
       await fetch(`${baseUrl}/${id}/read`, { method: "PUT" });
       setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
@@ -1810,20 +2091,20 @@ var useRealtimeNotifications = (options) => {
     } catch {
     }
   }, [baseUrl]);
-  const markAllAsRead = (0, import_react20.useCallback)(async () => {
+  const markAllAsRead = (0, import_react21.useCallback)(async () => {
     const unread = notifications.filter((n) => !n.read);
     await Promise.all(unread.map((n) => fetch(`${baseUrl}/${n.id}/read`, { method: "PUT" })));
     setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
     setUnreadCount(0);
   }, [notifications, baseUrl]);
-  const deleteNotification = (0, import_react20.useCallback)(async (id) => {
+  const deleteNotification = (0, import_react21.useCallback)(async (id) => {
     try {
       await fetch(`${baseUrl}/${id}`, { method: "DELETE" });
       setNotifications((prev) => prev.filter((n) => n.id !== id));
     } catch {
     }
   }, [baseUrl]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     fetchNotifications();
     const interval = setInterval(fetchNotifications, pollInterval);
     return () => clearInterval(interval);
@@ -1842,10 +2123,10 @@ var useRealtimeNotifications = (options) => {
 };
 
 // src/components/payments/CheckoutForm.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/shared/Input.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_clsx2 = require("clsx");
 var import_solid = require("@heroicons/react/20/solid");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -1859,20 +2140,48 @@ var iconSizeClasses = {
   md: "w-5 h-5 [&>*]:w-full [&>*]:h-full",
   lg: "w-6 h-6 [&>*]:w-full [&>*]:h-full"
 };
-var Input = import_react21.default.forwardRef(
-  ({ className, style, label, error, disabled, startIcon, endIcon, onClear, value, onChange, size = "md", loading = false, ...props }, ref) => {
+var Input = import_react22.default.forwardRef(
+  ({
+    className,
+    style,
+    label,
+    error,
+    disabled,
+    startIcon,
+    endIcon,
+    onClear,
+    value,
+    onChange,
+    onValueChange,
+    size = "md",
+    loading = false,
+    autoSelect = false,
+    onFocus,
+    ...props
+  }, ref) => {
+    const handleFocus = (e) => {
+      if (autoSelect) {
+        e.target.select();
+      }
+      onFocus?.(e);
+    };
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
     const hasValue = value !== void 0 && value !== "" && value !== null;
+    const isDisabled = disabled || loading;
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx2.clsx)("w-full", className), style, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: (0, import_clsx2.clsx)(
         "block font-medium mb-1.5",
         size === "sm" ? "text-xs" : "text-sm",
-        disabled ? "text-gray-400 opacity-70" : "text-gray-700"
+        isDisabled ? "text-gray-400 opacity-70" : "text-gray-700"
       ), children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx2.clsx)(
         "relative flex items-center w-full rounded-lg transition-all duration-200 ease-in-out bg-white overflow-hidden",
         "border",
         error ? "border-red-500 hover:border-red-600 focus-within:ring-2 focus-within:ring-red-500/20 focus-within:border-red-500" : "border-gray-200 hover:border-gray-300 focus-within:ring-2 focus-within:ring-primus-500/20 focus-within:border-primus-500",
-        disabled && "bg-gray-50 opacity-60 cursor-not-allowed"
+        isDisabled && "bg-gray-50 opacity-60 cursor-not-allowed"
       ), children: [
         startIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx2.clsx)(
           "flex-shrink-0 pl-3 pr-2 text-gray-400 select-none pointer-events-none flex items-center justify-center",
@@ -1882,9 +2191,10 @@ var Input = import_react21.default.forwardRef(
           "input",
           {
             ref,
-            disabled,
+            disabled: isDisabled,
             value,
-            onChange,
+            onChange: handleChange,
+            onFocus: handleFocus,
             className: (0, import_clsx2.clsx)(
               "flex-1 w-full border-none bg-transparent p-0 placeholder:text-gray-400 focus:ring-0 outline-none",
               sizeClasses[size],
@@ -1895,7 +2205,7 @@ var Input = import_react21.default.forwardRef(
             ...props
           }
         ),
-        onClear && hasValue && !disabled && !loading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-shrink-0 pr-2 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        onClear && hasValue && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-shrink-0 pr-2 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -1903,7 +2213,8 @@ var Input = import_react21.default.forwardRef(
               e.stopPropagation();
               onClear();
             },
-            className: "p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors",
+            className: "p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-primus-500",
+            tabIndex: 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_solid.XMarkIcon, { className: "h-4 w-4" })
           }
         ) }),
@@ -1932,13 +2243,13 @@ var CheckoutForm = ({
   onSuccess,
   onError
 }) => {
-  const [loading, setLoading] = (0, import_react22.useState)(false);
-  const [cardholderName, setCardholderName] = (0, import_react22.useState)("");
-  const [cardNumber, setCardNumber] = (0, import_react22.useState)("");
-  const [expiry, setExpiry] = (0, import_react22.useState)("");
-  const [cvc, setCvc] = (0, import_react22.useState)("");
-  const [error, setError] = (0, import_react22.useState)(null);
-  const [success, setSuccess] = (0, import_react22.useState)(false);
+  const [loading, setLoading] = (0, import_react23.useState)(false);
+  const [cardholderName, setCardholderName] = (0, import_react23.useState)("");
+  const [cardNumber, setCardNumber] = (0, import_react23.useState)("");
+  const [expiry, setExpiry] = (0, import_react23.useState)("");
+  const [cvc, setCvc] = (0, import_react23.useState)("");
+  const [error, setError] = (0, import_react23.useState)(null);
+  const [success, setSuccess] = (0, import_react23.useState)(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -2331,14 +2642,14 @@ var ClaimStatusTracker = ({
 };
 
 // src/components/featureflags/FeatureFlagToggle.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var FeatureFlagToggle = ({
   apiUrl = "http://localhost:5221"
 }) => {
-  const [flags, setFlags] = (0, import_react23.useState)([]);
-  const [loading, setLoading] = (0, import_react23.useState)(true);
-  (0, import_react23.useEffect)(() => {
+  const [flags, setFlags] = (0, import_react24.useState)([]);
+  const [loading, setLoading] = (0, import_react24.useState)(true);
+  (0, import_react24.useEffect)(() => {
     fetchFlags();
   }, []);
   const fetchFlags = async () => {
@@ -2375,15 +2686,15 @@ var FeatureFlagToggle = ({
 };
 
 // src/components/logging/LogViewer.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var LogViewer = ({
   apiUrl = "http://localhost:5221"
 }) => {
-  const [logs, setLogs] = (0, import_react24.useState)([]);
-  const [filter, setFilter] = (0, import_react24.useState)("");
-  const [loading, setLoading] = (0, import_react24.useState)(true);
-  (0, import_react24.useEffect)(() => {
+  const [logs, setLogs] = (0, import_react25.useState)([]);
+  const [filter, setFilter] = (0, import_react25.useState)("");
+  const [loading, setLoading] = (0, import_react25.useState)(true);
+  (0, import_react25.useEffect)(() => {
     fetchLogs();
     const interval = setInterval(fetchLogs, 1e4);
     return () => clearInterval(interval);
@@ -2503,7 +2814,7 @@ var PrimusSidebar = ({
 };
 
 // src/components/layout/PrimusHeader.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var PrimusHeader = ({
   title,
@@ -2514,7 +2825,7 @@ var PrimusHeader = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-4", children: [
-      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("nav", { className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react25.default.Fragment, { children: [
+      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("nav", { className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react26.default.Fragment, { children: [
         index > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-gray-500", children: "/" }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: index === breadcrumbs.length - 1 ? "text-white" : "text-gray-400 hover:text-white cursor-pointer", children: crumb.label })
       ] }, index)) }),
@@ -2540,20 +2851,41 @@ var PrimusHeader = ({
   ] });
 };
 
-// src/components/crud/PrimusDataTable.tsx
-var import_react26 = require("react");
+// src/components/layout/PrimusSection.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-function PrimusDataTable({
-  data,
-  columns,
-  rowKey,
-  loading = false,
-  selectable = false,
-  selectedKeys = [],
-  onSelectionChange,
-  onRowClick,
-  actions,
-  emptyMessage = "No data available",
+var PrimusSection = ({
+  title,
+  subtitle,
+  children,
+  className = "",
+  actions
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: `py-6 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-end justify-between mb-6 border-b border-gray-200 dark:border-gray-800 pb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { className: "text-2xl font-bold tracking-tight text-gray-900 dark:text-white", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mt-1 text-base text-gray-500 dark:text-gray-400", children: subtitle })
+      ] }),
+      actions && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center gap-2", children: actions })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children })
+  ] });
+};
+
+// src/components/crud/PrimusDataTable.tsx
+var import_react27 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function PrimusDataTable({
+  data,
+  columns,
+  rowKey,
+  loading = false,
+  selectable = false,
+  selectedKeys = [],
+  onSelectionChange,
+  onRowClick,
+  actions,
+  emptyMessage = "No data available",
   searchPlaceholder = "Filter...",
   searchable = true,
   paginated = false,
@@ -2561,11 +2893,11 @@ function PrimusDataTable({
   pageIndex,
   onPageChange
 }) {
-  const [search, setSearch] = (0, import_react26.useState)("");
-  const [sortKey, setSortKey] = (0, import_react26.useState)(null);
-  const [sortDir, setSortDir] = (0, import_react26.useState)("asc");
-  const [internalPageIndex, setInternalPageIndex] = (0, import_react26.useState)(0);
-  const filteredData = (0, import_react26.useMemo)(() => {
+  const [search, setSearch] = (0, import_react27.useState)("");
+  const [sortKey, setSortKey] = (0, import_react27.useState)(null);
+  const [sortDir, setSortDir] = (0, import_react27.useState)("asc");
+  const [internalPageIndex, setInternalPageIndex] = (0, import_react27.useState)(0);
+  const filteredData = (0, import_react27.useMemo)(() => {
     let result = [...data];
     if (search) {
       const lowerSearch = search.toLowerCase();
@@ -2621,10 +2953,10 @@ function PrimusDataTable({
       onSelectionChange?.(scopeKeys);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col space-y-4", children: [
-    searchable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { className: "h-4 w-4 text-gray-500 group-focus-within:text-purple-400 transition-colors", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col space-y-4", children: [
+    searchable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { className: "h-4 w-4 text-gray-500 group-focus-within:text-purple-400 transition-colors", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "input",
         {
           type: "text",
@@ -2640,9 +2972,9 @@ function PrimusDataTable({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `overflow-hidden rounded-xl border border-white/5 bg-slate-900/40 backdrop-blur-md shadow-xl ring-1 ring-white/5 ${loading ? "opacity-80" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("thead", { className: "bg-white/5 border-b border-white/5 backdrop-blur-md sticky top-0 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("tr", { children: [
-        selectable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { className: "w-12 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `overflow-hidden rounded-xl border border-white/5 bg-slate-900/40 backdrop-blur-md shadow-xl ring-1 ring-white/5 ${loading ? "opacity-80" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { className: "bg-white/5 border-b border-white/5 backdrop-blur-md sticky top-0 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
+        selectable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "w-12 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2651,25 +2983,25 @@ function PrimusDataTable({
             className: "rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 transition-colors cursor-pointer"
           }
         ) }),
-        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "th",
           {
             className: `px-6 py-4 text-xs font-semibold text-gray-400 uppercase tracking-wider ${col.sortable ? "cursor-pointer hover:text-white group" : ""}`,
             style: { width: col.width },
             onClick: () => col.sortable && handleSort(String(col.key)),
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
               col.header,
-              col.sortable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `transition-opacity duration-200 ${sortKey === col.key ? "opacity-100 text-purple-400" : "opacity-0 group-hover:opacity-50"}`, children: sortDir === "asc" ? "\u2191" : "\u2193" })
+              col.sortable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `transition-opacity duration-200 ${sortKey === col.key ? "opacity-100 text-purple-400" : "opacity-0 group-hover:opacity-50"}`, children: sortDir === "asc" ? "\u2191" : "\u2193" })
             ] })
           },
           String(col.key)
         )),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { className: "w-24 px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider" })
+        actions && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "w-24 px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { className: "divide-y divide-white/5", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-medium", children: "Loading data..." })
-      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm", children: emptyMessage }) }) }) : pageData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { className: "divide-y divide-white/5", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm font-medium", children: "Loading data..." })
+      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm", children: emptyMessage }) }) }) : pageData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "tr",
         {
           onClick: () => onRowClick?.(row),
@@ -2679,7 +3011,7 @@ function PrimusDataTable({
                                             ${selectedKeys.includes(row[rowKey]) ? "bg-purple-500/10 hover:bg-purple-500/20" : ""}
                                         `,
           children: [
-            selectable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { className: "px-6 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            selectable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-6 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -2688,15 +3020,15 @@ function PrimusDataTable({
                 className: "rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 cursor-pointer"
               }
             ) }),
-            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { className: "px-6 py-4 text-sm text-gray-300 group-hover:text-white transition-colors", children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, String(col.key))),
-            actions && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { className: "px-6 py-4 text-right", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0", children: actions(row) }) })
+            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-6 py-4 text-sm text-gray-300 group-hover:text-white transition-colors", children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, String(col.key))),
+            actions && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-6 py-4 text-right", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0", children: actions(row) }) })
           ]
         },
         String(row[rowKey])
       )) })
     ] }) }) }),
-    paginated && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between text-sm text-gray-400 px-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    paginated && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between text-sm text-gray-400 px-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -2706,13 +3038,13 @@ function PrimusDataTable({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
         "Page ",
         currentPageIndex + 1,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -2727,7 +3059,7 @@ function PrimusDataTable({
 }
 
 // src/components/crud/PrimusModal.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PrimusModal = ({
   open,
   onClose,
@@ -2743,34 +3075,34 @@ var PrimusModal = ({
     lg: "max-w-lg",
     xl: "max-w-xl"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `relative w-full ${sizeClasses2[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-700", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-lg font-semibold text-white", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `relative w-full ${sizeClasses2[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-700", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "text-lg font-semibold text-white", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             onClick: onClose,
             className: "text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-6", children }),
-      footer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50", children: footer })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-6", children }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50", children: footer })
     ] })
   ] });
 };
 
 // src/components/dashboard/PrimusDashboard.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var PrimusStatCard = ({
   title,
   value,
@@ -2806,35 +3138,35 @@ var PrimusStatCard = ({
     const linePath = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
     const areaPath = `${linePath} L 100 100 L 0 100 Z`;
     const gradientId = `gradient-${title.replace(/\s/g, "")}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: "w-full h-12 opacity-60 absolute bottom-0 left-0", viewBox: "0 0 100 100", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "w-full h-12 opacity-60 absolute bottom-0 left-0", viewBox: "0 0 100 100", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: "1.8", opacity: "0.6" })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: "1.8", opacity: "0.6" })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-6 relative z-10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-2.5 rounded-lg bg-white/5 text-gray-300 ring-1 ring-white/10 group-hover:bg-purple-500/20 group-hover:text-purple-300 transition-colors", children: icon || /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-5 h-5 bg-current opacity-20" }) }),
-        change && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 ${changeColors[change.type]}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "p-6 relative z-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "p-2.5 rounded-lg bg-white/5 text-gray-300 ring-1 ring-white/10 group-hover:bg-purple-500/20 group-hover:text-purple-300 transition-colors", children: icon || /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-5 h-5 bg-current opacity-20" }) }),
+        change && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 ${changeColors[change.type]}`, children: [
           changeIcons[change.type],
           " ",
           Math.abs(change.value),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-sm font-medium text-gray-400 tracking-wide", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-1 flex items-baseline gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400", children: value }) }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-gray-500 mt-2 font-medium", children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-sm font-medium text-gray-400 tracking-wide", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-1 flex items-baseline gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400", children: value }) }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs text-gray-500 mt-2 font-medium", children: description })
       ] })
     ] }),
     renderSparkline(),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `absolute -bottom-2 -right-4 w-32 h-32 blur-2xl opacity-20 rounded-full transition-colors duration-500 ${change?.type === "increase" ? "bg-emerald-500" : change?.type === "decrease" ? "bg-rose-500" : "bg-blue-500"}` })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `absolute -bottom-2 -right-4 w-32 h-32 blur-2xl opacity-20 rounded-full transition-colors duration-500 ${change?.type === "increase" ? "bg-emerald-500" : change?.type === "decrease" ? "bg-rose-500" : "bg-blue-500"}` })
   ] });
 };
 var PrimusDashboard = ({
@@ -2843,13 +3175,13 @@ var PrimusDashboard = ({
   subtitle,
   actions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-8 animate-enter", children: [
-    (title || actions) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-white/5 pb-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h1", { className: "text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 tracking-tight", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-gray-400 mt-2 text-lg font-light leading-relaxed", children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-8 animate-enter", children: [
+    (title || actions) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-white/5 pb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 tracking-tight", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-gray-400 mt-2 text-lg font-light leading-relaxed", children: subtitle })
       ] }),
-      actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-3", children: actions })
+      actions && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-3", children: actions })
     ] }),
     children
   ] });
@@ -2864,12 +3196,106 @@ var DashboardGrid = ({
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `grid gap-6 ${colClasses[columns]}`, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `grid gap-6 ${colClasses[columns]}`, children });
+};
+
+// src/components/shared/Card.tsx
+var import_react28 = __toESM(require("react"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Card = import_react28.default.forwardRef(
+  ({ style, variant = "default", padding = "md", children, ...props }, ref) => {
+    const [isHovered, setIsHovered] = import_react28.default.useState(false);
+    const paddingStyles = {
+      none: "0",
+      sm: "0.75rem",
+      md: "1.5rem",
+      lg: "2rem"
+    };
+    const variantStyles = {
+      default: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e5e7eb",
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+        },
+        hover: {
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        }
+      },
+      outlined: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "2px solid #e5e7eb",
+          boxShadow: "none"
+        },
+        hover: {
+          borderColor: "#d1d5db"
+        }
+      },
+      elevated: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "none",
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        },
+        hover: {
+          boxShadow: "0 10px 15px rgba(0, 0, 0, 0.15)",
+          transform: "translateY(-2px)"
+        }
+      }
+    };
+    const baseStyles = {
+      borderRadius: "0.5rem",
+      padding: paddingStyles[padding],
+      transition: "all 0.2s ease"
+    };
+    const currentVariant = variantStyles[variant];
+    const combinedStyles = {
+      ...baseStyles,
+      ...currentVariant.normal,
+      ...isHovered ? currentVariant.hover : {},
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      {
+        ref,
+        style: combinedStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/dashboard/PrimusSummaryCard.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var PrimusSummaryCard = ({
+  title,
+  subtitle,
+  actionLabel,
+  onAction,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { className, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: subtitle })
+      ] }),
+      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "outline", size: "sm", onClick: onAction, children: actionLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-4", children })
+  ] }) });
 };
 
 // src/components/dashboard/PrimusActivityFeed.tsx
-var import_react27 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var statusClasses = {
   success: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
   warning: "bg-amber-500/10 text-amber-300 border-amber-500/30",
@@ -2883,8 +3309,8 @@ var PrimusActivityFeed = ({
   groupByDate = false,
   loading = false
 }) => {
-  const visibleItems = (0, import_react27.useMemo)(() => items.slice(0, maxItems), [items, maxItems]);
-  const groups = (0, import_react27.useMemo)(() => {
+  const visibleItems = (0, import_react29.useMemo)(() => items.slice(0, maxItems), [items, maxItems]);
+  const groups = (0, import_react29.useMemo)(() => {
     if (!groupByDate) {
       return [{ label: "", items: visibleItems }];
     }
@@ -2898,18 +3324,18 @@ var PrimusActivityFeed = ({
     return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
   }, [groupByDate, visibleItems]);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 text-sm text-gray-400", children: "Loading activity..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 text-sm text-gray-400", children: "Loading activity..." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 space-y-6", children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-    group.label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs uppercase tracking-wide text-gray-500 mb-3", children: group.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "space-y-4", children: group.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `mt-1 h-2.5 w-2.5 rounded-full border ${statusClasses[item.status ?? "info"]}` }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-sm font-medium text-gray-100", children: item.title }),
-          showTimestamps && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-gray-500", children: formatTime(item.timestamp) })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 space-y-6", children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+    group.label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-xs uppercase tracking-wide text-gray-500 mb-3", children: group.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-4", children: group.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `mt-1 h-2.5 w-2.5 rounded-full border ${statusClasses[item.status ?? "info"]}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-sm font-medium text-gray-100", children: item.title }),
+          showTimestamps && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-xs text-gray-500", children: formatTime(item.timestamp) })
         ] }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-gray-400 mt-1", children: item.description })
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-xs text-gray-400 mt-1", children: item.description })
       ] })
     ] }, item.id ?? `${itemIndex}-${item.title}`)) })
   ] }, `${group.label}-${index}`)) });
@@ -2936,9 +3362,9 @@ var formatTime = (value) => {
 };
 
 // src/components/charts/PrimusChartBase.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_chart = require("chart.js");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var registered = false;
 var ensureRegistered = () => {
   if (!registered) {
@@ -2961,9 +3387,9 @@ var PrimusChartBase = ({
   className,
   datasetTransform
 }) => {
-  const canvasRef = (0, import_react28.useRef)(null);
-  const chartRef = (0, import_react28.useRef)(null);
-  const builtData = (0, import_react28.useMemo)(() => {
+  const canvasRef = (0, import_react30.useRef)(null);
+  const chartRef = (0, import_react30.useRef)(null);
+  const builtData = (0, import_react30.useMemo)(() => {
     if (data) {
       return data;
     }
@@ -2987,7 +3413,7 @@ var PrimusChartBase = ({
       datasets
     };
   }, [data, labels, series, datasetTransform]);
-  const builtOptions = (0, import_react28.useMemo)(() => {
+  const builtOptions = (0, import_react30.useMemo)(() => {
     const mergedPlugins = {
       ...options?.plugins ?? {},
       legend: {
@@ -3005,7 +3431,7 @@ var PrimusChartBase = ({
       }
     };
   }, [options, responsive, maintainAspectRatio, legend]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     ensureRegistered();
     const canvas = canvasRef.current;
     if (!canvas) {
@@ -3029,13 +3455,13 @@ var PrimusChartBase = ({
       chartRef.current = null;
     };
   }, [type, builtData, builtOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("canvas", { ref: canvasRef, "aria-label": ariaLabel, role: "img" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("canvas", { ref: canvasRef, "aria-label": ariaLabel, role: "img" }) });
 };
 
 // src/components/charts/PrimusLineChart.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var PrimusLineChart = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     PrimusChartBase,
     {
       ...props,
@@ -3053,9 +3479,9 @@ var PrimusLineChart = (props) => {
 };
 
 // src/components/charts/PrimusAreaChart.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var PrimusAreaChart = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     PrimusChartBase,
     {
       ...props,
@@ -3073,7 +3499,7 @@ var PrimusAreaChart = (props) => {
 };
 
 // src/components/charts/PrimusBarChart.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var PrimusBarChart = ({ stacked = false, options, ...props }) => {
   const mergedOptions = {
     ...options,
@@ -3083,7 +3509,7 @@ var PrimusBarChart = ({ stacked = false, options, ...props }) => {
       ...options?.scales ?? {}
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     PrimusChartBase,
     {
       ...props,
@@ -3099,13 +3525,13 @@ var PrimusBarChart = ({ stacked = false, options, ...props }) => {
 };
 
 // src/components/charts/PrimusPieChart.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var PrimusPieChart = ({ donut = false, cutout = "55%", options, ...props }) => {
   const mergedOptions = {
     ...options,
     cutout: donut ? cutout : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     PrimusChartBase,
     {
       ...props,
@@ -3121,8 +3547,8 @@ var PrimusPieChart = ({ donut = false, cutout = "55%", options, ...props }) => {
 };
 
 // src/components/charts/PrimusSparkline.tsx
-var import_react29 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var PrimusSparkline = ({
   series = [],
   data,
@@ -3135,7 +3561,7 @@ var PrimusSparkline = ({
 }) => {
   const values = data ?? series[0]?.data ?? [];
   const color = series[0]?.color ?? series[0]?.borderColor ?? "#3b82f6";
-  const { linePath, areaPath } = (0, import_react29.useMemo)(() => {
+  const { linePath, areaPath } = (0, import_react31.useMemo)(() => {
     if (!values.length) {
       return { linePath: "", areaPath: "" };
     }
@@ -3155,7 +3581,7 @@ var PrimusSparkline = ({
   if (!values.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "svg",
     {
       className,
@@ -3166,17 +3592,17 @@ var PrimusSparkline = ({
       "aria-label": ariaLabel,
       role: "img",
       children: [
-        type === "area" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: areaPath, fill: color, opacity: 0.2, stroke: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth })
+        type === "area" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: areaPath, fill: color, opacity: 0.2, stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth })
       ]
     }
   );
 };
 
 // src/components/shared/Checkbox.tsx
-var import_react30 = __toESM(require("react"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Checkbox = import_react30.default.forwardRef(
+var import_react32 = __toESM(require("react"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Checkbox = import_react32.default.forwardRef(
   ({ style, label, error, disabled, className, ...props }, ref) => {
     const containerStyles = {
       display: "flex",
@@ -3213,9 +3639,9 @@ var Checkbox = import_react30.default.forwardRef(
       marginTop: "0.25rem",
       marginLeft: "1.75rem"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: containerStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: checkboxWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: containerStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: checkboxWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "input",
           {
             ref,
@@ -3228,21 +3654,21 @@ var Checkbox = import_react30.default.forwardRef(
             ...props
           }
         ) }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { style: labelStyles, onClick: (e) => {
+        label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { style: labelStyles, onClick: (e) => {
           if (!disabled) {
             const input = e.currentTarget.previousElementSibling?.querySelector("input");
             input?.click();
           }
         }, children: label })
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { style: errorTextStyles, children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { style: errorTextStyles, children: error })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/components/shared/RadioGroup.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var RadioGroup = ({
   name,
   options,
@@ -3282,9 +3708,9 @@ var RadioGroup = ({
     color: "#ef4444",
     marginTop: "0.5rem"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: containerStyles, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: optionStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: containerStyles, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: optionStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "input",
         {
           type: "radio",
@@ -3296,7 +3722,7 @@ var RadioGroup = ({
           style: radioStyles
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "label",
         {
           style: {
@@ -3312,17 +3738,17 @@ var RadioGroup = ({
         }
       )
     ] }, option.value)) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { style: errorTextStyles, children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { style: errorTextStyles, children: error })
   ] });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/shared/Select.tsx
-var import_react31 = __toESM(require("react"));
-var import_react32 = require("@headlessui/react");
+var import_react33 = __toESM(require("react"));
+var import_react34 = require("@headlessui/react");
 var import_solid4 = require("@heroicons/react/20/solid");
 var import_clsx7 = require("clsx");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Select = ({
   label,
   error,
@@ -3334,7 +3760,7 @@ var Select = ({
   disabled = false,
   className
 }) => {
-  const [query, setQuery] = (0, import_react31.useState)("");
+  const [query, setQuery] = (0, import_react33.useState)("");
   const filteredOptions = query === "" ? options : options.filter(
     (option) => option.label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
   );
@@ -3344,8 +3770,8 @@ var Select = ({
       onChange?.(value.filter((v) => v !== valToRemove));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_clsx7.clsx)("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_react32.Combobox,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_clsx7.clsx)("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_react34.Combobox,
     {
       value,
       onChange: (val) => {
@@ -3353,21 +3779,21 @@ var Select = ({
       },
       multiple,
       disabled,
-      children: ({}) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react32.Combobox.Label, { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx7.clsx)(
+      children: ({}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react34.Combobox.Label, { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx7.clsx)(
           "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left focus-within:ring-2 focus-within:ring-primus-500",
           "border transition-all duration-200 ease-in-out",
           error ? "border-red-500 focus-within:ring-red-500" : "border-gray-300",
           disabled && "opacity-50 cursor-not-allowed bg-gray-50"
         ), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx7.clsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx7.clsx)(
             "flex flex-wrap items-center gap-1.5 w-full py-1.5 pl-3 pr-10 text-sm",
             "min-h-[2.5rem]"
           ), children: [
-            multiple && Array.isArray(value) && value.map((val) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "inline-flex items-center gap-1 rounded bg-primus-50 px-2 py-0.5 text-xs font-medium text-primus-700 ring-1 ring-inset ring-primus-700/10 max-w-[150px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "truncate", children: getLabel(val) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            multiple && Array.isArray(value) && value.map((val) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "inline-flex items-center gap-1 rounded bg-primus-50 px-2 py-0.5 text-xs font-medium text-primus-700 ring-1 ring-inset ring-primus-700/10 max-w-[150px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "truncate", children: getLabel(val) }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -3379,14 +3805,14 @@ var Select = ({
                   },
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "sr-only", children: "Remove" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_solid4.XMarkIcon, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sr-only", children: "Remove" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_solid4.XMarkIcon, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
                   ]
                 }
               )
             ] }, val)),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-              import_react32.Combobox.Input,
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              import_react34.Combobox.Input,
               {
                 className: "border-none p-0 text-gray-900 focus:ring-0 outline-none placeholder:text-gray-400 bg-transparent min-w-[50px] flex-1 text-sm leading-5 py-0.5",
                 displayValue: (val) => !multiple && val ? getLabel(val) : query,
@@ -3395,7 +3821,7 @@ var Select = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react32.Combobox.Button, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react34.Combobox.Button, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             import_solid4.ChevronUpDownIcon,
             {
               className: "h-5 w-5 text-gray-400",
@@ -3403,16 +3829,16 @@ var Select = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          import_react32.Transition,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_react34.Transition,
           {
-            as: import_react31.default.Fragment,
+            as: import_react33.default.Fragment,
             leave: "transition ease-in duration-100",
             leaveFrom: "opacity-100",
             leaveTo: "opacity-0",
             afterLeave: () => setQuery(""),
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react32.Combobox.Options, { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "relative cursor-default select-none py-2 px-4 text-gray-700", children: "Nothing found." }) : filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-              import_react32.Combobox.Option,
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react34.Combobox.Options, { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "relative cursor-default select-none py-2 px-4 text-gray-700", children: "Nothing found." }) : filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              import_react34.Combobox.Option,
               {
                 className: ({ active }) => (0, import_clsx7.clsx)(
                   "relative cursor-default select-none py-2 pl-10 pr-4",
@@ -3420,16 +3846,16 @@ var Select = ({
                 ),
                 value: option.value,
                 disabled: option.disabled,
-                children: ({ selected, active }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_clsx7.clsx)("block truncate", selected ? "font-medium" : "font-normal"), children: option.label }),
-                  selected ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                children: ({ selected, active }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: (0, import_clsx7.clsx)("block truncate", selected ? "font-medium" : "font-normal"), children: option.label }),
+                  selected ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     "span",
                     {
                       className: (0, import_clsx7.clsx)(
                         "absolute inset-y-0 left-0 flex items-center pl-3",
                         active ? "text-white" : "text-primus-600"
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_solid4.CheckIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_solid4.CheckIcon, { className: "h-5 w-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ] })
@@ -3438,15 +3864,15 @@ var Select = ({
             )) })
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-1 text-sm text-red-500", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "mt-1 text-sm text-red-500", children: error })
       ] })
     }
   ) });
 };
 
 // src/components/shared/Toggle.tsx
-var import_react33 = __toESM(require("react"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react35 = __toESM(require("react"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Toggle = ({
   checked = false,
   onChange,
@@ -3454,7 +3880,7 @@ var Toggle = ({
   label,
   size = "md"
 }) => {
-  const [isHovered, setIsHovered] = import_react33.default.useState(false);
+  const [isHovered, setIsHovered] = import_react35.default.useState(false);
   const sizes = {
     sm: { width: "2.25rem", height: "1.25rem", thumbSize: "0.875rem" },
     md: { width: "2.75rem", height: "1.5rem", thumbSize: "1.125rem" },
@@ -3501,8 +3927,8 @@ var Toggle = ({
       onChange?.(!checked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: containerStyles, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: containerStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       {
         style: switchStyles,
@@ -3518,20 +3944,23 @@ var Toggle = ({
             handleClick();
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: thumbStyles })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: thumbStyles })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { style: labelStyles, onClick: handleClick, children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { style: labelStyles, onClick: handleClick, children: label })
   ] });
 };
 Toggle.displayName = "Toggle";
 
 // src/components/shared/Textarea.tsx
-var import_react34 = __toESM(require("react"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Textarea = import_react34.default.forwardRef(
-  ({ style, label, error, disabled, resize = "vertical", ...props }, ref) => {
-    const [isFocused, setIsFocused] = import_react34.default.useState(false);
+var import_react36 = __toESM(require("react"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Textarea = import_react36.default.forwardRef(
+  ({ style, label, error, disabled, resize = "vertical", onChange, onValueChange, className, ...props }, ref) => {
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
     const containerStyles = {
       width: "100%"
     };
@@ -3539,11 +3968,11 @@ var Textarea = import_react34.default.forwardRef(
       fontSize: "0.875rem",
       lineHeight: "1.25rem",
       fontWeight: "500",
-      marginBottom: "0.5rem",
+      marginBottom: "0.375rem",
       display: "block",
       color: "#374151",
-      cursor: disabled ? "not-allowed" : "default",
-      opacity: disabled ? 0.7 : 1
+      opacity: disabled ? 0.7 : 1,
+      cursor: disabled ? "not-allowed" : "default"
     };
     const textareaStyles = {
       display: "flex",
@@ -3556,12 +3985,11 @@ var Textarea = import_react34.default.forwardRef(
       fontSize: "0.875rem",
       lineHeight: "1.5rem",
       outline: "none",
-      transition: "all 0.2s ease",
-      cursor: disabled ? "not-allowed" : "text",
+      transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
       opacity: disabled ? 0.5 : 1,
+      cursor: disabled ? "not-allowed" : "text",
       resize,
-      fontFamily: "inherit",
-      boxShadow: isFocused ? error ? "0 0 0 2px rgba(239, 68, 68, 0.2)" : "0 0 0 2px rgba(3, 7, 18, 0.1)" : "none"
+      fontFamily: "inherit"
     };
     const errorTextStyles = {
       fontSize: "0.875rem",
@@ -3569,9 +3997,9 @@ var Textarea = import_react34.default.forwardRef(
       color: "#ef4444",
       marginTop: "0.25rem"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: containerStyles, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { style: labelStyles, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: containerStyles, className, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { style: labelStyles, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "textarea",
         {
           ref,
@@ -3579,94 +4007,28 @@ var Textarea = import_react34.default.forwardRef(
             ...textareaStyles,
             ...style
           },
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
           disabled,
+          onChange: handleChange,
+          className: `primus-textarea ${error ? "error" : ""}`,
           ...props
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { style: errorTextStyles, children: error })
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("style", { children: `
+                    .primus-textarea:focus {
+                        border-color: ${error ? "#ef4444" : "#6366f1"};
+                        box-shadow: 0 0 0 1px ${error ? "#ef4444" : "#6366f1"};
+                    }
+                    ` }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { style: errorTextStyles, children: error })
     ] });
   }
 );
 Textarea.displayName = "Textarea";
 
-// src/components/shared/Card.tsx
-var import_react35 = __toESM(require("react"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Card = import_react35.default.forwardRef(
-  ({ style, variant = "default", padding = "md", children, ...props }, ref) => {
-    const [isHovered, setIsHovered] = import_react35.default.useState(false);
-    const paddingStyles = {
-      none: "0",
-      sm: "0.75rem",
-      md: "1.5rem",
-      lg: "2rem"
-    };
-    const variantStyles = {
-      default: {
-        normal: {
-          backgroundColor: "#ffffff",
-          border: "1px solid #e5e7eb",
-          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
-        },
-        hover: {
-          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
-        }
-      },
-      outlined: {
-        normal: {
-          backgroundColor: "#ffffff",
-          border: "2px solid #e5e7eb",
-          boxShadow: "none"
-        },
-        hover: {
-          borderColor: "#d1d5db"
-        }
-      },
-      elevated: {
-        normal: {
-          backgroundColor: "#ffffff",
-          border: "none",
-          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
-        },
-        hover: {
-          boxShadow: "0 10px 15px rgba(0, 0, 0, 0.15)",
-          transform: "translateY(-2px)"
-        }
-      }
-    };
-    const baseStyles = {
-      borderRadius: "0.5rem",
-      padding: paddingStyles[padding],
-      transition: "all 0.2s ease"
-    };
-    const currentVariant = variantStyles[variant];
-    const combinedStyles = {
-      ...baseStyles,
-      ...currentVariant.normal,
-      ...isHovered ? currentVariant.hover : {},
-      ...style
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      "div",
-      {
-        ref,
-        style: combinedStyles,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Card.displayName = "Card";
-
 // src/components/shared/Badge.tsx
-var import_react36 = __toESM(require("react"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Badge = import_react36.default.forwardRef(
+var import_react37 = __toESM(require("react"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Badge = import_react37.default.forwardRef(
   ({ style, variant = "default", size = "md", children, ...props }, ref) => {
     const variantStyles = {
       default: {
@@ -3720,14 +4082,14 @@ var Badge = import_react36.default.forwardRef(
       ...sizeStyles[size],
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref, style: combinedStyles, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { ref, style: combinedStyles, ...props, children });
   }
 );
 Badge.displayName = "Badge";
 
 // src/components/shared/Table.tsx
-var import_react37 = __toESM(require("react"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react38 = __toESM(require("react"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Table({
   columns,
   data,
@@ -3736,7 +4098,7 @@ function Table({
   bordered = true,
   style
 }) {
-  const [hoveredRow, setHoveredRow] = import_react37.default.useState(null);
+  const [hoveredRow, setHoveredRow] = import_react38.default.useState(null);
   const tableStyles = {
     width: "100%",
     borderCollapse: "collapse",
@@ -3761,8 +4123,8 @@ function Table({
     backgroundColor: hoverable && hoveredRow === rowIndex ? "#f9fafb" : striped && rowIndex % 2 === 1 ? "#f9fafb" : "#ffffff",
     transition: "background-color 0.15s ease"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { overflowX: "auto", borderRadius: "0.5rem", border: bordered ? "1px solid #e5e7eb" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { style: tableStyles, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { style: theadStyles, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { overflowX: "auto", borderRadius: "0.5rem", border: bordered ? "1px solid #e5e7eb" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("table", { style: tableStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("thead", { style: theadStyles, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "th",
       {
         style: {
@@ -3773,12 +4135,12 @@ function Table({
       },
       column.key
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "tr",
       {
         onMouseEnter: () => hoverable && setHoveredRow(rowIndex),
         onMouseLeave: () => hoverable && setHoveredRow(null),
-        children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { style: getTdStyles(rowIndex), children: column.render ? column.render(row) : row[column.key] }, column.key))
+        children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", { style: getTdStyles(rowIndex), children: column.render ? column.render(row) : row[column.key] }, column.key))
       },
       rowIndex
     )) })
@@ -3787,9 +4149,9 @@ function Table({
 Table.displayName = "Table";
 
 // src/components/shared/Container.tsx
-var import_react38 = __toESM(require("react"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var Container = import_react38.default.forwardRef(
+var import_react39 = __toESM(require("react"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Container = import_react39.default.forwardRef(
   ({ style, maxWidth = "lg", padding = "md", children, ...props }, ref) => {
     const maxWidthStyles = {
       sm: "640px",
@@ -3814,15 +4176,15 @@ var Container = import_react38.default.forwardRef(
       paddingRight: paddingStyles[padding],
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, style: containerStyles, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref, style: containerStyles, ...props, children });
   }
 );
 Container.displayName = "Container";
 
 // src/components/shared/Grid.tsx
-var import_react39 = __toESM(require("react"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var Grid = import_react39.default.forwardRef(
+var import_react40 = __toESM(require("react"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Grid = import_react40.default.forwardRef(
   ({ style, columns = 3, rows, gap = "md", width = "100%", height = "auto", responsive = true, children, ...props }, ref) => {
     const gapStyles = {
       none: "0",
@@ -3840,15 +4202,15 @@ var Grid = import_react39.default.forwardRef(
       height,
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref, style: gridStyles, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref, style: gridStyles, ...props, children });
   }
 );
 Grid.displayName = "Grid";
 
 // src/components/shared/Stack.tsx
-var import_react40 = __toESM(require("react"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var Stack = import_react40.default.forwardRef(
+var import_react41 = __toESM(require("react"));
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Stack = import_react41.default.forwardRef(
   ({ style, direction = "vertical", gap = "md", align = "stretch", justify = "start", children, ...props }, ref) => {
     const gapStyles = {
       none: "0",
@@ -3878,14 +4240,14 @@ var Stack = import_react40.default.forwardRef(
       justifyContent: justifyStyles[justify],
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref, style: stackStyles, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref, style: stackStyles, ...props, children });
   }
 );
 Stack.displayName = "Stack";
 
 // src/components/shared/Modal.tsx
-var import_react41 = __toESM(require("react"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react42 = __toESM(require("react"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Modal = ({
   isOpen,
   onClose,
@@ -3894,7 +4256,7 @@ var Modal = ({
   size = "md",
   closeOnOverlayClick = true
 }) => {
-  import_react41.default.useEffect(() => {
+  import_react42.default.useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -3963,20 +4325,20 @@ var Modal = ({
     overflowY: "auto",
     flex: 1
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       style: overlayStyles,
       onClick: closeOnOverlayClick ? onClose : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
         "div",
         {
           style: modalStyles,
           onClick: (e) => e.stopPropagation(),
           children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: headerStyles, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h2", { style: titleStyles, children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            title && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: headerStyles, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h2", { style: titleStyles, children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 "button",
                 {
                   style: closeButtonStyles,
@@ -3986,7 +4348,7 @@ var Modal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: contentStyles, children })
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { style: contentStyles, children })
           ]
         }
       )
@@ -3996,8 +4358,8 @@ var Modal = ({
 Modal.displayName = "Modal";
 
 // src/components/shared/DateRangePicker.tsx
-var import_react42 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var PrimusDateRangePicker = ({
   startDate = null,
   endDate = null,
@@ -4007,15 +4369,15 @@ var PrimusDateRangePicker = ({
   disabled = false,
   onRangeChange
 }) => {
-  const [start, setStart] = (0, import_react42.useState)(startDate ?? "");
-  const [end, setEnd] = (0, import_react42.useState)(endDate ?? "");
-  (0, import_react42.useEffect)(() => {
+  const [start, setStart] = (0, import_react43.useState)(startDate ?? "");
+  const [end, setEnd] = (0, import_react43.useState)(endDate ?? "");
+  (0, import_react43.useEffect)(() => {
     setStart(startDate ?? "");
   }, [startDate]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     setEnd(endDate ?? "");
   }, [endDate]);
-  const normalizedRanges = (0, import_react42.useMemo)(() => {
+  const normalizedRanges = (0, import_react43.useMemo)(() => {
     return ranges.map((range) => typeof range === "string" ? resolvePreset(range) : range).filter((range) => !!range);
   }, [ranges]);
   const handleStartChange = (value) => {
@@ -4033,8 +4395,8 @@ var PrimusDateRangePicker = ({
     setEnd(nextEnd);
     onRangeChange?.({ startDate: nextStart, endDate: nextEnd, label: range.label });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-3", children: [
-    normalizedRanges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-wrap gap-2", children: normalizedRanges.map((range) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "space-y-3", children: [
+    normalizedRanges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-wrap gap-2", children: normalizedRanges.map((range) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "button",
       {
         type: "button",
@@ -4045,8 +4407,8 @@ var PrimusDateRangePicker = ({
       },
       range.label
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col md:flex-row gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col md:flex-row gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "input",
         {
           type: "date",
@@ -4058,7 +4420,7 @@ var PrimusDateRangePicker = ({
           className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "input",
         {
           type: "date",
@@ -4109,7 +4471,7 @@ var toDateInputValue = (value) => {
 };
 
 // src/components/shared/FilterBar.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var PrimusFilterBar = ({
   filters,
   activeFilters,
@@ -4123,9 +4485,9 @@ var PrimusFilterBar = ({
     };
     onChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-wrap gap-4 items-end", children: [
-    filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-[220px]", children: [
-      filter.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-wrap gap-4 items-end", children: [
+    filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "min-w-[220px]", children: [
+      filter.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Select,
         {
           label: filter.label,
@@ -4135,7 +4497,7 @@ var PrimusFilterBar = ({
           onChange: (value) => updateFilter(filter.key, value)
         }
       ),
-      filter.type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      filter.type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Toggle,
         {
           label: filter.label,
@@ -4143,7 +4505,7 @@ var PrimusFilterBar = ({
           onChange: (checked) => updateFilter(filter.key, checked)
         }
       ),
-      filter.type === "search" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      filter.type === "search" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Input,
         {
           label: filter.label,
@@ -4158,8 +4520,8 @@ var PrimusFilterBar = ({
 };
 
 // src/components/shared/ExportMenu.tsx
-var import_react43 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var PrimusExportMenu = ({
   formats = ["CSV", "PDF", "PNG", "JSON"],
   includeCharts = true,
@@ -4167,11 +4529,11 @@ var PrimusExportMenu = ({
   includeTables = true,
   onExport
 }) => {
-  const [format, setFormat] = (0, import_react43.useState)(formats[0] ?? "CSV");
-  const [charts, setCharts] = (0, import_react43.useState)(includeCharts);
-  const [stats, setStats] = (0, import_react43.useState)(includeStats);
-  const [tables, setTables] = (0, import_react43.useState)(includeTables);
-  (0, import_react43.useEffect)(() => {
+  const [format, setFormat] = (0, import_react44.useState)(formats[0] ?? "CSV");
+  const [charts, setCharts] = (0, import_react44.useState)(includeCharts);
+  const [stats, setStats] = (0, import_react44.useState)(includeStats);
+  const [tables, setTables] = (0, import_react44.useState)(includeTables);
+  (0, import_react44.useEffect)(() => {
     if (!formats.includes(format)) {
       setFormat(formats[0] ?? "CSV");
     }
@@ -4184,29 +4546,29 @@ var PrimusExportMenu = ({
       includeTables: tables
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "select",
       {
         value: format,
         onChange: (event) => setFormat(event.target.value),
         className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm",
-        children: formats.map((item) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("option", { value: item, children: item }, item))
+        children: formats.map((item) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("option", { value: item, children: item }, item))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("input", { type: "checkbox", checked: charts, onChange: (e) => setCharts(e.target.checked) }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: "checkbox", checked: charts, onChange: (e) => setCharts(e.target.checked) }),
       "Charts"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("input", { type: "checkbox", checked: stats, onChange: (e) => setStats(e.target.checked) }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: "checkbox", checked: stats, onChange: (e) => setStats(e.target.checked) }),
       "Stats"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("input", { type: "checkbox", checked: tables, onChange: (e) => setTables(e.target.checked) }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: "checkbox", checked: tables, onChange: (e) => setTables(e.target.checked) }),
       "Tables"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "button",
       {
         type: "button",
@@ -4219,8 +4581,8 @@ var PrimusExportMenu = ({
 };
 
 // src/components/shared/Search.tsx
-var import_react44 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react45 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var PrimusSearch = ({
   placeholder = "Search...",
   debounce = 300,
@@ -4229,17 +4591,17 @@ var PrimusSearch = ({
   suggestions = [],
   onSearch
 }) => {
-  const [query, setQuery] = (0, import_react44.useState)(value);
-  (0, import_react44.useEffect)(() => {
+  const [query, setQuery] = (0, import_react45.useState)(value);
+  (0, import_react45.useEffect)(() => {
     setQuery(value);
   }, [value]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const handle = window.setTimeout(() => {
       onSearch?.(query);
     }, debounce);
     return () => window.clearTimeout(handle);
   }, [query, debounce, onSearch]);
-  const visibleSuggestions = (0, import_react44.useMemo)(() => {
+  const visibleSuggestions = (0, import_react45.useMemo)(() => {
     if (!showSuggestions || !suggestions.length) {
       return [];
     }
@@ -4248,8 +4610,8 @@ var PrimusSearch = ({
     }
     return suggestions.filter((item) => item.toLowerCase().includes(query.toLowerCase())).slice(0, 5);
   }, [suggestions, query, showSuggestions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "input",
       {
         type: "text",
@@ -4259,7 +4621,7 @@ var PrimusSearch = ({
         className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
       }
     ),
-    visibleSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "absolute mt-2 w-full rounded-lg border border-white/10 bg-slate-900/90 backdrop-blur-sm shadow-lg z-10", children: visibleSuggestions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    visibleSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute mt-2 w-full rounded-lg border border-white/10 bg-slate-900/90 backdrop-blur-sm shadow-lg z-10", children: visibleSuggestions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "button",
       {
         type: "button",
@@ -4271,6 +4633,304 @@ var PrimusSearch = ({
     )) })
   ] });
 };
+
+// src/components/shared/PrimusWizard.tsx
+var import_react46 = __toESM(require("react"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var PrimusStep = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children });
+};
+var PrimusStepper = ({ steps, currentStep }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("nav", { "aria-label": "Progress", className: "mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ol", { role: "list", className: "overflow-hidden rounded-md items-center flex md:border md:border-gray-200 dark:md:border-gray-800", children: steps.map((step, stepIdx) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("li", { className: "relative md:flex-1 md:flex", children: stepIdx < currentStep ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "group flex flex-1 items-center md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 py-2 pl-4 md:py-3 md:pl-6 bg-white dark:bg-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "flex items-center text-sm font-medium text-purple-600 dark:text-purple-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-purple-600 hover:bg-purple-800 text-white dark:bg-purple-500 dark:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { fillRule: "evenodd", d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z", clipRule: "evenodd" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ml-4 text-sm font-medium", children: step.label })
+  ] }) }) : stepIdx === currentStep ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-1 items-center md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 py-2 pl-4 md:py-3 md:pl-6 bg-white dark:bg-gray-900", "aria-current": "step", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "flex items-center text-sm font-medium text-purple-600 dark:text-purple-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-purple-600 dark:border-purple-500", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-purple-600 dark:text-purple-500 font-bold", children: stepIdx + 1 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ml-4 text-sm font-medium text-gray-900 dark:text-white", children: step.label })
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "group flex flex-1 items-center md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 py-2 pl-4 md:py-3 md:pl-6 bg-gray-50 dark:bg-gray-800/50", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "flex items-center text-sm font-medium text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-gray-500 dark:text-gray-400 font-medium", children: stepIdx + 1 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ml-4", children: step.label })
+  ] }) }) }, step.label)) }) });
+};
+var PrimusWizard = ({
+  title,
+  subtitle,
+  children,
+  onComplete,
+  className,
+  startStep = 0
+}) => {
+  const [currentStep, setCurrentStep] = (0, import_react46.useState)(startStep);
+  const steps = import_react46.default.Children.toArray(children).filter(
+    (child) => import_react46.default.isValidElement(child) && (child.type === PrimusStep || child.type.name === "PrimusStep")
+  );
+  const totalSteps = steps.length;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const handleNext = () => {
+    if (isLastStep) {
+      onComplete?.();
+    } else {
+      setCurrentStep((prev) => prev + 1);
+    }
+  };
+  const handleBack = () => {
+    if (!isFirstStep) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  };
+  if (totalSteps === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-red-500", children: "Error: PrimusWizard requires PrimusStep children" });
+  }
+  const currentStepConfig = steps[currentStep].props;
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `space-y-6 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "mt-1 text-gray-500 dark:text-gray-400", children: subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      PrimusStepper,
+      {
+        steps: steps.map((s) => ({ label: s.props.label, description: s.props.description })),
+        currentStep
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Card, { className: "p-6 min-h-[300px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mb-8", children: steps[currentStep] }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex justify-between pt-6 border-t border-gray-100 dark:border-gray-800", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            onClick: handleBack,
+            disabled: isFirstStep,
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          Button,
+          {
+            onClick: handleNext,
+            disabled: currentStepConfig.isValid === false,
+            children: isLastStep ? "Complete" : "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/shared/Field.tsx
+var import_react47 = __toESM(require("react"));
+var import_clsx8 = require("clsx");
+var import_solid5 = require("@heroicons/react/20/solid");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var FieldContext = import_react47.default.createContext(void 0);
+var useFieldContext = () => import_react47.default.useContext(FieldContext);
+var Field = ({ children, error, disabled, dense, className, ...props }) => {
+  const id = import_react47.default.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FieldContext.Provider, { value: { id, error, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "div",
+    {
+      className: (0, import_clsx8.clsx)(
+        "flex flex-col w-full",
+        dense ? "gap-1" : "gap-1.5",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var Label = ({ className, children, required, indicator, ...props }) => {
+  const context = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    "label",
+    {
+      htmlFor: context?.id,
+      className: (0, import_clsx8.clsx)(
+        "block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        context?.disabled ? "text-gray-400 opacity-70" : "text-gray-700",
+        props.onClick ? "cursor-pointer" : "cursor-default",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" }),
+        indicator
+      ]
+    }
+  );
+};
+var FieldDescription = ({ className, children, ...props }) => {
+  const context = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "p",
+    {
+      className: (0, import_clsx8.clsx)(
+        "text-[0.8rem] text-muted-foreground text-gray-500",
+        context?.disabled && "opacity-70",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var FieldError = ({ className, children, forceVisible, ...props }) => {
+  const context = useFieldContext();
+  const error = context?.error || children;
+  if (!error && !forceVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    "p",
+    {
+      className: (0, import_clsx8.clsx)(
+        "text-[0.8rem] font-medium text-red-500 flex items-center gap-1.5 animate-in slide-in-from-top-1 fade-in-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_solid5.ExclamationCircleIcon, { className: "h-4 w-4 shrink-0" }),
+        error
+      ]
+    }
+  );
+};
+
+// src/components/shared/InputGroup.tsx
+var import_react48 = __toESM(require("react"));
+var import_clsx9 = require("clsx");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var InputGroup = ({ className, children, size = "md", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "div",
+    {
+      className: (0, import_clsx9.clsx)(
+        "flex items-stretch w-full rounded-lg shadow-sm",
+        // Target direct children to remove borders and rounded corners where they touch
+        "[&>*:first-child]:rounded-r-none",
+        "[&>*:last-child]:rounded-l-none",
+        "[&>*:not(:first-child):not(:last-child)]:rounded-none",
+        // Handle borders to prevent double borders
+        "[&>*:not(:first-child)]:-ml-px",
+        // Ensure z-index handling for focus rings
+        "[&>*:focus-within]:z-10",
+        className
+      ),
+      ...props,
+      children: import_react48.default.Children.map(children, (child) => {
+        if (import_react48.default.isValidElement(child)) {
+          return import_react48.default.cloneElement(child, { size });
+        }
+        return child;
+      })
+    }
+  );
+};
+var InputAddon = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "div",
+    {
+      className: (0, import_clsx9.clsx)(
+        "flex items-center px-3 border border-gray-200 bg-gray-50 text-gray-500 text-sm whitespace-nowrap",
+        // These will be overridden by the group's first/last child selectors usually, but good defaults:
+        "first:rounded-l-lg last:rounded-r-lg",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/shared/PasswordInput.tsx
+var import_react49 = __toESM(require("react"));
+var import_solid6 = require("@heroicons/react/20/solid");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var PasswordInput = import_react49.default.forwardRef(
+  (props, ref) => {
+    const [showPassword, setShowPassword] = (0, import_react49.useState)(false);
+    const toggleVisibility = () => {
+      setShowPassword(!showPassword);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      Input,
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        endIcon: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: toggleVisibility,
+            className: "text-gray-400 hover:text-gray-600 focus:outline-none focus:text-primus-600 transition-colors pointer-events-auto cursor-pointer p-0.5 rounded",
+            tabIndex: -1,
+            children: [
+              showPassword ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_solid6.EyeSlashIcon, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_solid6.EyeIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "sr-only", children: showPassword ? "Hide password" : "Show password" })
+            ]
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/components/shared/SearchInput.tsx
+var import_react50 = __toESM(require("react"));
+var import_solid7 = require("@heroicons/react/20/solid");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var SearchInput = import_react50.default.forwardRef(
+  ({ value, onSearch, debounceMs = 300, className, ...props }, ref) => {
+    const [localValue, setLocalValue] = (0, import_react50.useState)(value || "");
+    const [isDebouncing, setIsDebouncing] = (0, import_react50.useState)(false);
+    (0, import_react50.useEffect)(() => {
+      if (value !== void 0) {
+        setLocalValue(value);
+      }
+    }, [value]);
+    (0, import_react50.useEffect)(() => {
+      if (debounceMs === 0) {
+        onSearch?.(localValue);
+        return;
+      }
+      const handler = setTimeout(() => {
+        onSearch?.(localValue);
+        setIsDebouncing(false);
+      }, debounceMs);
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [localValue, debounceMs]);
+    const handleChange = (e) => {
+      const newVal = e.target.value;
+      setLocalValue(newVal);
+      if (debounceMs > 0) setIsDebouncing(true);
+    };
+    const handleClear = () => {
+      setLocalValue("");
+      props.onClear?.();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      Input,
+      {
+        ref,
+        type: "text",
+        startIcon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_solid7.MagnifyingGlassIcon, { className: "h-4 w-4" }),
+        value: localValue,
+        onChange: handleChange,
+        onClear: handleClear,
+        loading: props.loading || props.loading === void 0 && isDebouncing,
+        className,
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AICopilot,
@@ -4288,17 +4948,24 @@ var PrimusSearch = ({
   DashboardGrid,
   DocumentViewer,
   FeatureFlagToggle,
+  Field,
+  FieldDescription,
+  FieldError,
   FileUploader,
   FraudDetectionDashboard,
   Grid,
   Input,
+  InputAddon,
+  InputGroup,
   KYCVerification,
+  Label,
   LoanCalculator,
   LogViewer,
   LoginPage,
   Modal,
   NotificationBell,
   NotificationFeed,
+  PasswordInput,
   PolicyCard,
   PremiumCalculator,
   PrimusActivityFeed,
@@ -4314,10 +4981,16 @@ var PrimusSearch = ({
   PrimusDataTable,
   PrimusDateRangePicker,
   PrimusExportMenu,
+  PrimusField,
+  PrimusFieldDescription,
+  PrimusFieldError,
   PrimusFilterBar,
   PrimusGrid,
   PrimusHeader,
   PrimusInput,
+  PrimusInputAddon,
+  PrimusInputGroup,
+  PrimusLabel,
   PrimusLayout,
   PrimusLineChart,
   PrimusLogin,
@@ -4326,22 +4999,31 @@ var PrimusSearch = ({
   PrimusNotificationCenter,
   PrimusNotificationFeed,
   PrimusNotifications,
+  PrimusPasswordInput,
   PrimusPieChart,
   PrimusProvider,
   PrimusRadioGroup,
   PrimusSearch,
+  PrimusSearchInput,
+  PrimusSection,
   PrimusSelect,
   PrimusSidebar,
   PrimusSparkline,
   PrimusStack,
   PrimusStatCard,
+  PrimusStatsCard,
+  PrimusStep,
+  PrimusStepper,
+  PrimusSummaryCard,
   PrimusTable,
   PrimusTextarea,
   PrimusThemeProvider,
   PrimusThemeToggle,
   PrimusToggle,
+  PrimusWizard,
   QuoteComparison,
   RadioGroup,
+  SearchInput,
   SecurityDashboard,
   Select,
   Stack,
@@ -4353,6 +5035,7 @@ var PrimusSearch = ({
   themeColors,
   useNotifications,
   usePrimusAuth,
+  usePrimusFetch,
   usePrimusTheme,
   useRealtimeNotifications
 });