@petrarca/sonnet-shell 0.4.2 → 0.6.0

package/dist/auth/index.js

@@ -1,51 +1,50 @@
 // src/auth/Login.tsx
 import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Button as Button2 } from "@petrarca/sonnet-ui";
 import { Input } from "@petrarca/sonnet-ui";
 import { Label } from "@petrarca/sonnet-ui";
-import { Alert as Alert2 } from "@petrarca/sonnet-ui";
+import { Spinner } from "@petrarca/sonnet-ui";
 
-// src/auth/TenantSelection.tsx
+// src/auth/OrgSelection.tsx
 import { useState, useCallback } from "react";
 import { Check } from "lucide-react";
 import { Button } from "@petrarca/sonnet-ui";
 import { Alert } from "@petrarca/sonnet-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-function TenantSelection({
-  tenants,
+function OrgSelection({
+  orgs,
   isLoading,
   error,
   onSelect
 }) {
   const [selectedId, setSelectedId] = useState(null);
   const handleContinue = useCallback(() => {
-    if (selectedId) {
-      onSelect(selectedId);
-    }
+    if (selectedId) onSelect(selectedId);
   }, [selectedId, onSelect]);
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-slate-100", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg p-8", children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-center mb-2", children: "Select Tenant" }),
-    /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground mb-6", children: "Choose the tenant you want to work in." }),
-    error && /* @__PURE__ */ jsx(Alert, { className: "mb-4 border-red-200 bg-red-50 text-red-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: error }) }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-6 max-h-64 overflow-y-auto", children: tenants.map((tenant) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-slate-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm bg-white rounded-xl shadow-sm border border-slate-200 p-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-slate-900 text-center", children: "Select organization" }),
+      /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-slate-500 mt-1", children: "Choose the organization you want to work in." })
+    ] }),
+    error ? /* @__PURE__ */ jsx(Alert, { className: "mb-4 border-red-200 bg-red-50 text-red-700 text-sm py-2.5 px-3", children: error }) : null,
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-6 max-h-64 overflow-y-auto", children: orgs.map((org) => /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: () => setSelectedId(tenant.id),
-        className: `w-full flex items-center justify-between px-4 py-3 rounded-md border text-left text-sm transition-colors ${selectedId === tenant.id ? "border-blue-500 bg-blue-50 text-blue-900" : "border-slate-200 hover:bg-slate-50"}`,
+        onClick: () => setSelectedId(org.id),
+        className: `w-full flex items-center justify-between px-4 py-3 rounded-lg border text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 ${selectedId === org.id ? "border-blue-500 bg-blue-50 text-blue-900" : "border-slate-200 hover:bg-slate-50 text-slate-700"}`,
         children: [
-          /* @__PURE__ */ jsx("span", { children: tenant.name }),
-          selectedId === tenant.id && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-blue-500" })
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: org.name }),
+          selectedId === org.id ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-blue-500 shrink-0" }) : null
         ]
       },
-      tenant.id
+      org.id
     )) }),
     /* @__PURE__ */ jsx(
       Button,
       {
         onClick: handleContinue,
         disabled: !selectedId || isLoading,
-        className: "w-full",
+        className: "w-full h-10",
         children: isLoading ? "Loading..." : "Continue"
       }
     )
@@ -60,43 +59,65 @@ function useLoginFlow(props) {
     config,
     isAuthenticated,
     activeTenantId,
-    tenants,
+    orgs,
     onLogin,
     onFetchCurrentUser,
-    onSwitchTenant,
-    onClearError
+    onSelectOrg,
+    onClearError,
+    onDiscover,
+    onExternalLogin
   } = props;
   const navigate = useNavigate();
   const location = useLocation();
   const locationState = location.state;
+  const identifierFirst = Boolean(onDiscover);
+  const initial = locationState?.step ?? (identifierFirst ? "identifier" : "credentials");
   const [redirectTo] = useState2(() => locationState?.from?.pathname ?? "/");
-  const [step, setStep] = useState2(
-    () => locationState?.step ?? "credentials"
-  );
+  const [step, setStep] = useState2(initial);
   const [identifier, setIdentifier] = useState2("");
   const [password, setPassword] = useState2("");
-  const [tenantError, setTenantError] = useState2(null);
+  const [providers, setProviders] = useState2([]);
+  const [discoverError, setDiscoverError] = useState2(null);
+  const [isRedirecting, setIsRedirecting] = useState2(false);
+  const [orgError, setOrgError] = useState2(null);
   useEffect(() => {
     if (isAuthenticated && activeTenantId)
       navigate(redirectTo, { replace: true });
   }, [isAuthenticated, activeTenantId, navigate, redirectTo]);
   useEffect(() => {
-    if (!isAuthenticated || !tenants || activeTenantId) return;
-    if (tenants.length === 1) {
-      onSwitchTenant(tenants[0].id).catch((err) => {
-        setTenantError(
-          normalizeError(err).message || "Failed to select tenant"
+    if (!isAuthenticated || !orgs || activeTenantId) return;
+    if (orgs.length === 1) {
+      onSelectOrg(orgs[0].id).catch((err) => {
+        setOrgError(
+          normalizeError(err).message || "Failed to select organization"
         );
-        setStep("tenant-selection");
+        setStep("org-selection");
       });
-    } else if (tenants.length > 1) {
-      setStep("tenant-selection");
+    } else if (orgs.length > 1) {
+      setStep("org-selection");
     }
-  }, [isAuthenticated, tenants, activeTenantId, onSwitchTenant]);
+  }, [isAuthenticated, orgs, activeTenantId, onSelectOrg]);
   useEffect(() => {
     if (config?.ui.direct_redirect)
       window.location.href = config.ui.direct_redirect;
   }, [config]);
+  const handleIdentifierSubmit = useCallback2(
+    async (e) => {
+      e.preventDefault();
+      if (!onDiscover || !identifier.trim()) return;
+      setDiscoverError(null);
+      try {
+        const resolved = await onDiscover(identifier.trim());
+        setProviders(resolved);
+        setStep("auth");
+      } catch (err) {
+        setDiscoverError(
+          normalizeError(err).message || "Failed to look up providers"
+        );
+      }
+    },
+    [identifier, onDiscover]
+  );
   const handleCredentialSubmit = useCallback2(
     async (e) => {
       e.preventDefault();
@@ -109,94 +130,164 @@ function useLoginFlow(props) {
     },
     [identifier, password, onLogin, onFetchCurrentUser, onClearError]
   );
-  const handleTenantSelect = useCallback2(
+  const handleExternalLogin = useCallback2(
+    async (provider) => {
+      if (!onExternalLogin) return;
+      setIsRedirecting(true);
+      try {
+        await onExternalLogin(provider);
+      } catch {
+        setIsRedirecting(false);
+      }
+    },
+    [onExternalLogin]
+  );
+  const handleOrgSelect = useCallback2(
     async (id) => {
-      setTenantError(null);
+      setOrgError(null);
       try {
-        await onSwitchTenant(id);
+        await onSelectOrg(id);
       } catch (err) {
-        setTenantError(
-          normalizeError(err).message || "Failed to select tenant"
+        setOrgError(
+          normalizeError(err).message || "Failed to select organization"
         );
       }
     },
-    [onSwitchTenant]
+    [onSelectOrg]
   );
+  const goBack = useCallback2(() => {
+    setPassword("");
+    setDiscoverError(null);
+    onClearError();
+    setStep(identifierFirst ? "identifier" : "credentials");
+  }, [identifierFirst, onClearError]);
   return {
     step,
     identifier,
     setIdentifier,
     password,
     setPassword,
-    tenantError,
+    providers,
+    discoverError,
+    isRedirecting,
+    orgError,
+    handleIdentifierSubmit,
     handleCredentialSubmit,
-    handleTenantSelect
+    handleExternalLogin,
+    handleOrgSelect,
+    goBack
   };
 }
 function Login(props) {
-  const { config, isLoading, error, tenants } = props;
+  const { config, isLoading, isDiscovering, error, orgs, appName, logoUrl } = props;
   const flow = useLoginFlow(props);
-  if (config?.ui.direct_redirect) {
+  if (config?.ui.direct_redirect || flow.isRedirecting)
     return /* @__PURE__ */ jsx2(RedirectingMessage, {});
-  }
-  if (flow.step === "tenant-selection" && tenants) {
+  if (flow.step === "org-selection" && orgs) {
     return /* @__PURE__ */ jsx2(
-      TenantSelection,
+      OrgSelection,
       {
-        tenants,
+        orgs,
         isLoading,
-        error: flow.tenantError,
-        onSelect: flow.handleTenantSelect
+        error: flow.orgError,
+        onSelect: flow.handleOrgSelect
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
-    CredentialPage,
-    {
-      config,
-      error,
-      isLoading,
-      flow
-    }
-  );
-}
-function RedirectingMessage() {
-  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground", children: "Redirecting to authentication..." }) });
-}
-function CredentialPage({
-  config,
-  error,
-  isLoading,
-  flow
-}) {
-  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center min-h-screen bg-slate-100", children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg p-8", children: [
-    /* @__PURE__ */ jsx2("h1", { className: "text-center mb-6", children: "Sign In" }),
-    error && /* @__PURE__ */ jsx2(Alert2, { className: "mb-4 border-red-200 bg-red-50 text-red-700", children: /* @__PURE__ */ jsx2("p", { className: "text-sm", children: error }) }),
-    config?.features.local_auth && /* @__PURE__ */ jsx2(
-      CredentialForm,
+  return /* @__PURE__ */ jsx2(PageShell, { children: /* @__PURE__ */ jsxs2(Card, { children: [
+    flow.step === "identifier" && /* @__PURE__ */ jsx2(
+      IdentifierStep,
       {
+        appName,
+        logoUrl,
         identifier: flow.identifier,
+        error: flow.discoverError,
+        isLoading: isDiscovering ?? false,
+        onIdentifierChange: flow.setIdentifier,
+        onSubmit: flow.handleIdentifierSubmit
+      }
+    ),
+    flow.step === "auth" && /* @__PURE__ */ jsx2(
+      AuthStep,
+      {
+        appName,
+        logoUrl,
+        identifier: flow.identifier,
+        providers: flow.providers,
         password: flow.password,
+        error,
         isLoading,
-        onIdentifierChange: flow.setIdentifier,
         onPasswordChange: flow.setPassword,
-        onSubmit: flow.handleCredentialSubmit
+        onCredentialSubmit: flow.handleCredentialSubmit,
+        onExternalLogin: flow.handleExternalLogin,
+        onBack: flow.goBack
       }
     ),
-    config?.features.oauth && config.oauth?.providers && /* @__PURE__ */ jsx2(OAuthProviders, { providers: config.oauth.providers })
+    flow.step === "credentials" && /* @__PURE__ */ jsx2(
+      CredentialsStep,
+      {
+        appName,
+        logoUrl,
+        config,
+        identifier: flow.identifier,
+        password: flow.password,
+        error,
+        isLoading,
+        onIdentifierChange: flow.setIdentifier,
+        onPasswordChange: flow.setPassword,
+        onSubmit: flow.handleCredentialSubmit,
+        onExternalLogin: flow.handleExternalLogin
+      }
+    )
   ] }) });
 }
-function CredentialForm({
+function PageShell({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 px-4", children });
+}
+function Card({ children }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "w-full max-w-sm bg-white rounded-xl border border-gray-200 p-8",
+      style: {
+        boxShadow: "0 24px 48px rgba(15,23,42,0.10), 0 2px 4px rgba(15,23,42,0.06)"
+      },
+      children
+    }
+  );
+}
+function BrandHeader({
+  appName,
+  logoUrl
+}) {
+  if (!appName && !logoUrl) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center mb-6", children: logoUrl ? /* @__PURE__ */ jsx2("img", { src: logoUrl, alt: appName ?? "Logo", className: "h-10 w-auto" }) : /* @__PURE__ */ jsx2("span", { className: "text-lg font-semibold text-slate-500 tracking-wide", children: appName }) });
+}
+function IdentifierStep({
+  appName,
+  logoUrl,
   identifier,
-  password,
+  error,
   isLoading,
   onIdentifierChange,
-  onPasswordChange,
   onSubmit
 }) {
-  return /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx2(Label, { htmlFor: "identifier", children: "Email or Username" }),
+  return /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-6", children: [
+    /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-slate-900 leading-tight", children: "Welcome" }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-gray-500", children: "Enter your email or username to continue." })
+    ] }),
+    error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2(
+        Label,
+        {
+          htmlFor: "identifier",
+          className: "block text-sm font-medium text-gray-700 mb-1.5",
+          children: "Email or username"
+        }
+      ),
       /* @__PURE__ */ jsx2(
         Input,
         {
@@ -205,54 +296,256 @@ function CredentialForm({
           value: identifier,
           onChange: (e) => onIdentifierChange(e.target.value),
           required: true,
-          placeholder: "Enter your email or username"
+          autoFocus: true,
+          autoComplete: "email",
+          placeholder: "you@company.com",
+          className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
+    /* @__PURE__ */ jsx2(
+      PrimaryButton,
+      {
+        type: "submit",
+        disabled: isLoading || !identifier.trim(),
+        loading: isLoading,
+        loadingText: "Looking up...",
+        children: "Continue"
+      }
+    )
+  ] });
+}
+function AuthStep({
+  appName,
+  logoUrl,
+  identifier,
+  providers,
+  password,
+  error,
+  isLoading,
+  onPasswordChange,
+  onCredentialSubmit,
+  onExternalLogin,
+  onBack
+}) {
+  const external = providers.filter((p) => p.type === "external");
+  const hasLocal = providers.some((p) => p.type === "local");
+  const hasBoth = external.length > 0 && hasLocal;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-4",
+          children: [
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u2190" }),
+            " Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-slate-900 leading-tight", children: "Welcome back" }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-gray-500", children: identifier })
+    ] }),
+    error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
+    hasLocal ? /* @__PURE__ */ jsxs2("form", { onSubmit: onCredentialSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(
+          Label,
+          {
+            htmlFor: "password",
+            className: "block text-sm font-medium text-gray-700 mb-1.5",
+            children: "Password"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            id: "password",
+            type: "password",
+            value: password,
+            onChange: (e) => onPasswordChange(e.target.value),
+            required: true,
+            autoFocus: true,
+            autoComplete: "current-password",
+            placeholder: "Enter your password",
+            className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx2(
-        Input,
+        PrimaryButton,
         {
-          id: "password",
-          type: "password",
-          value: password,
-          onChange: (e) => onPasswordChange(e.target.value),
-          required: true,
-          placeholder: "Enter your password"
+          type: "submit",
+          disabled: isLoading,
+          loading: isLoading,
+          loadingText: "Signing in...",
+          children: "Sign in"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx2(Button2, { type: "submit", disabled: isLoading, className: "w-full", children: isLoading ? "Signing in..." : "Sign In" })
+    ] }) : null,
+    hasBoth ? /* @__PURE__ */ jsx2(Separator, {}) : null,
+    external.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: external.map((p) => /* @__PURE__ */ jsx2(
+      SsoButton,
+      {
+        label: p.label,
+        onClick: () => onExternalLogin(p)
+      },
+      p.name
+    )) }) : null,
+    providers.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-500 text-center py-2", children: "No login methods available." }) : null
   ] });
 }
-function OAuthProviders({ providers }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "mt-6", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative mb-4", children: [
-      /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2("div", { className: "w-full border-t border-slate-300" }) }),
-      /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx2("span", { className: "px-2 bg-white text-muted-foreground", children: "Or continue with" }) })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: Object.entries(providers).map(
-      ([key, provider]) => provider.enabled ? /* @__PURE__ */ jsxs2(
-        "a",
+function resolveOAuthProviders(config) {
+  return config?.features.oauth && config.oauth?.providers ? Object.entries(config.oauth.providers).filter(([, p]) => p.enabled) : [];
+}
+function CredentialsStep({
+  appName,
+  logoUrl,
+  config,
+  identifier,
+  password,
+  error,
+  isLoading,
+  onIdentifierChange,
+  onPasswordChange,
+  onSubmit,
+  onExternalLogin
+}) {
+  const oauthProviders = resolveOAuthProviders(config);
+  const hasBoth = config?.features.local_auth && oauthProviders.length > 0;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
+    /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-slate-900 leading-tight text-center", children: "Welcome" }),
+    error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
+    config?.features.local_auth ? /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(
+          Label,
+          {
+            htmlFor: "identifier",
+            className: "block text-sm font-medium text-gray-700 mb-1.5",
+            children: "Email or username"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            id: "identifier",
+            type: "text",
+            value: identifier,
+            onChange: (e) => onIdentifierChange(e.target.value),
+            required: true,
+            autoFocus: true,
+            autoComplete: "email",
+            placeholder: "you@company.com",
+            className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(
+          Label,
+          {
+            htmlFor: "password",
+            className: "block text-sm font-medium text-gray-700 mb-1.5",
+            children: "Password"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            id: "password",
+            type: "password",
+            value: password,
+            onChange: (e) => onPasswordChange(e.target.value),
+            required: true,
+            autoComplete: "current-password",
+            placeholder: "Enter your password",
+            className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        PrimaryButton,
         {
-          href: provider.login_url,
-          className: "w-full flex items-center justify-center py-2 px-4 border border-slate-300 rounded-md hover:bg-slate-50",
-          children: [
-            "Continue with ",
-            provider.name
-          ]
-        },
-        key
-      ) : null
-    ) })
+          type: "submit",
+          disabled: isLoading,
+          loading: isLoading,
+          loadingText: "Signing in...",
+          children: "Sign in"
+        }
+      )
+    ] }) : null,
+    hasBoth ? /* @__PURE__ */ jsx2(Separator, {}) : null,
+    oauthProviders.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: oauthProviders.map(([key, p]) => /* @__PURE__ */ jsx2(
+      SsoButton,
+      {
+        label: `Continue with ${p.name}`,
+        onClick: () => onExternalLogin({ type: "external", name: key, label: p.name })
+      },
+      key
+    )) }) : null
   ] });
 }
+function RedirectingMessage() {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 gap-3 text-gray-500", children: [
+    /* @__PURE__ */ jsx2(Spinner, { size: "lg" }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm", children: "Redirecting..." })
+  ] });
+}
+function ErrorAlert({ message }) {
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-sm text-red-700", children: message });
+}
+function Separator() {
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2("div", { className: "w-full border-t border-gray-200" }) }),
+    /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-xs", children: /* @__PURE__ */ jsx2("span", { className: "bg-white px-2 text-gray-400", children: "or continue with" }) })
+  ] });
+}
+function PrimaryButton({
+  type = "button",
+  disabled,
+  loading,
+  loadingText,
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      className: "w-full inline-flex items-center justify-center rounded-full bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md transition duration-150 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      style: {
+        boxShadow: disabled ? void 0 : "0 4px 14px rgba(79,70,229,0.30)"
+      },
+      children: [
+        loading ? /* @__PURE__ */ jsx2(Spinner, { size: "sm", className: "mr-2" }) : null,
+        loading && loadingText ? loadingText : children
+      ]
+    }
+  );
+}
+function SsoButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "w-full flex items-center justify-center gap-2.5 h-10 px-4 rounded-lg border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
+      children: label
+    }
+  );
+}
 
 // src/auth/ProtectedRoute.tsx
 import { Navigate, useLocation as useLocation2 } from "react-router-dom";
 import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { Spinner } from "@petrarca/sonnet-ui";
+import { Spinner as Spinner2 } from "@petrarca/sonnet-ui";
 import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 function ProtectedRoute({
   children,
@@ -270,7 +563,7 @@ function ProtectedRoute({
     initRef.current().finally(() => setInitializing(false));
   }, []);
   if (authConfigLoading || initializing) {
-    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx3(Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx3(Spinner2, { size: "lg" }) });
   }
   if (!authEnabled) {
     return /* @__PURE__ */ jsx3(Fragment, { children });
@@ -299,7 +592,7 @@ function ProtectedRoute({
 }
 export {
   Login,
-  ProtectedRoute,
-  TenantSelection
+  OrgSelection,
+  ProtectedRoute
 };
 //# sourceMappingURL=index.js.map