@sudobility/building_blocks 0.0.137 → 0.0.138

package/dist/index.js

@@ -1,20 +1,19 @@
+import { b, a, S, u } from "./SafeSubscriptionContext-CNuEKeqJ.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { SubscriptionLayout, SubscriptionTile, SegmentedControl } from "@sudobility/subscription-components";
+import { useSubscriptionPeriods, useSubscriptionForPeriod, useSubscribable, useUserSubscription, refreshSubscription } from "@sudobility/subscription_lib";
 import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, AspectFitView, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, MasterListItem, Section, MasterDetailLayout } from "@sudobility/components";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
-import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
-import { cva } from "class-variance-authority";
-import { createUserWithEmailAndPassword, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
-import { b, a, S, u } from "./SafeSubscriptionContext-CNuEKeqJ.js";
-import { SubscriptionLayout, SubscriptionTile, SegmentedControl } from "@sudobility/subscription-components";
-import { useSubscriptionPeriods, useSubscriptionForPeriod, useSubscribable, useUserSubscription, refreshSubscription } from "@sudobility/subscription_lib";
 import i18n from "i18next";
 import { default as default2 } from "i18next";
 import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
+import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
+import { cva } from "class-variance-authority";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -223,7 +222,7 @@ const LanguageSelector = ({
     helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: helperText })
   ] });
 };
-const DefaultLinkComponent$2 = ({
+const DefaultLinkComponent$1 = ({
   href,
   className,
   children,
@@ -241,7 +240,7 @@ const AppTopBar = ({
   renderAccountSection,
   renderCenterSection,
   renderMobileContent,
-  LinkComponent = DefaultLinkComponent$2,
+  LinkComponent = DefaultLinkComponent$1,
   sticky = true,
   variant = "default",
   mobileMenuLabel = "Menu",
@@ -483,7 +482,11 @@ const ShareDropdown = ({
   const [shareUrl, setShareUrl] = useState("");
   const [isPreparingShare, setIsPreparingShare] = useState(false);
   const [showCopiedFeedback, setShowCopiedFeedback] = useState(false);
-  React.useEffect(() => {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const itemRefs = useRef([]);
+  useEffect(() => {
     const onBeforeShare = shareConfig.onBeforeShare;
     if (onBeforeShare && !shareUrl) {
       const prepareUrl = async () => {
@@ -502,26 +505,37 @@ const ShareDropdown = ({
       prepareUrl();
     }
   }, [shareConfig, shareUrl]);
-  const url = shareUrl || (typeof window !== "undefined" ? window.location.href : "");
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(url);
-      setShowCopiedFeedback(true);
-      setTimeout(() => {
-        setShowCopiedFeedback(false);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
-      }, 1500);
-    } catch {
+        setFocusedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      var _a;
+      if (event.key === "Escape") {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  useEffect(() => {
+    var _a;
+    if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {
+      (_a = itemRefs.current[focusedIndex]) == null ? void 0 : _a.focus();
     }
-  };
-  const handleSocialShare = (platformUrl) => {
-    window.open(
-      platformUrl,
-      "_blank",
-      "noopener,noreferrer,width=600,height=400"
-    );
-    setIsOpen(false);
-  };
+  }, [focusedIndex]);
+  const url = shareUrl || (typeof window !== "undefined" ? window.location.href : "");
   const sharePlatforms = [
     {
       name: "Twitter",
@@ -558,14 +572,73 @@ const ShareDropdown = ({
       color: "text-gray-600"
     }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  const totalItems = sharePlatforms.length + 1;
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setShowCopiedFeedback(true);
+      setTimeout(() => {
+        setShowCopiedFeedback(false);
+        setIsOpen(false);
+      }, 1500);
+    } catch {
+    }
+  };
+  const handleSocialShare = (platformUrl) => {
+    window.open(
+      platformUrl,
+      "_blank",
+      "noopener,noreferrer,width=600,height=400"
+    );
+    setIsOpen(false);
+  };
+  const handleToggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    if (next) {
+      setFocusedIndex(0);
+    } else {
+      setFocusedIndex(-1);
+    }
+  };
+  const handleMenuKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex((prev) => (prev + 1) % totalItems);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex((prev) => (prev - 1 + totalItems) % totalItems);
+          break;
+        case "Home":
+          event.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setFocusedIndex(totalItems - 1);
+          break;
+        case "Tab":
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          break;
+      }
+    },
+    [totalItems]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: dropdownRef, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => setIsOpen(!isOpen),
+        ref: triggerRef,
+        onClick: handleToggle,
         disabled: isPreparingShare,
         className: "flex items-center justify-center w-8 h-8 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-        title: "Share this page",
+        "aria-label": "Share this page",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
         children: isPreparingShare ? /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsx(
           "svg",
           {
@@ -573,6 +646,7 @@ const ShareDropdown = ({
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
+            "aria-hidden": "true",
             children: /* @__PURE__ */ jsx(
               "path",
               {
@@ -586,35 +660,51 @@ const ShareDropdown = ({
         )
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "fixed inset-0 z-[999998]",
-          onClick: () => setIsOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-10 z-[999999] w-40 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1", children: [
-        sharePlatforms.map((platform) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => handleSocialShare(platform.url),
-            className: "w-full flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors",
-            children: /* @__PURE__ */ jsx("span", { className: `text-sm ${platform.color}`, children: platform.name })
-          },
-          platform.name
-        )),
-        /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 my-1" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: copyToClipboard,
-            className: "w-full flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors",
-            children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: showCopiedFeedback ? "Copied!" : "Copy Link" })
-          }
-        )
-      ] })
-    ] })
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute right-0 top-10 z-[999999] w-40 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1",
+        role: "menu",
+        "aria-label": "Share options",
+        onKeyDown: handleMenuKeyDown,
+        children: [
+          sharePlatforms.map((platform, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              onClick: () => handleSocialShare(platform.url),
+              className: "w-full flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors focus:bg-gray-50 dark:focus:bg-gray-700 focus:outline-none",
+              role: "menuitem",
+              tabIndex: focusedIndex === index ? 0 : -1,
+              children: /* @__PURE__ */ jsx("span", { className: `text-sm ${platform.color}`, children: platform.name })
+            },
+            platform.name
+          )),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "border-t border-gray-200 dark:border-gray-700 my-1",
+              role: "separator"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[sharePlatforms.length] = el;
+              },
+              onClick: copyToClipboard,
+              className: "w-full flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors focus:bg-gray-50 dark:focus:bg-gray-700 focus:outline-none",
+              role: "menuitem",
+              tabIndex: focusedIndex === sharePlatforms.length ? 0 : -1,
+              children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: showCopiedFeedback ? "Copied!" : "Copy Link" })
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 const TalkToFounderButton = ({
@@ -674,13 +764,13 @@ const AppBreadcrumbs = ({
     ] })
   ] }) }) });
 };
-const DefaultLinkComponent$1 = ({
+const DefaultLinkComponent = ({
   href,
   className,
   children,
   onClick
 }) => /* @__PURE__ */ jsx("a", { href, className, onClick, children });
-function getCopyrightYear$1(startYear = 2025) {
+function getCopyrightYear(startYear = 2025) {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   if (currentYear === startYear) {
     return String(startYear);
@@ -698,13 +788,13 @@ const AppFooter = ({
   statusIndicator,
   StatusIndicatorComponent,
   links = [],
-  LinkComponent = DefaultLinkComponent$1,
+  LinkComponent = DefaultLinkComponent,
   sticky = true,
   isNetworkOnline = true,
   className,
   onTrack
 }) => {
-  const year = copyrightYear || getCopyrightYear$1();
+  const year = copyrightYear || getCopyrightYear();
   const track = useCallback(
     (label, params) => {
       onTrack == null ? void 0 : onTrack({
@@ -788,21 +878,6 @@ const AppFooter = ({
     }
   );
 };
-const DefaultLinkComponent = ({
-  href,
-  className,
-  children,
-  onClick
-}) => /* @__PURE__ */ jsx("a", { href, className, onClick, children });
-function getCopyrightYear(startYear = 2025) {
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  if (currentYear === startYear) {
-    return String(startYear);
-  } else if (currentYear > startYear) {
-    return `${startYear}-${currentYear}`;
-  }
-  return String(startYear);
-}
 function getGridColumnsClass(sectionCount, explicit) {
   const cols = explicit || Math.min(sectionCount, 4);
   switch (cols) {
@@ -1004,6 +1079,13 @@ const AppPageLayout = ({
   mainClassName,
   aspectRatio
 }) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (!topBar) {
+      console.warn(
+        "[AppPageLayout] No topBar provided. The layout will render without a navigation bar. Pass an AppTopBar variant or custom component via the topBar prop."
+      );
+    }
+  }
   const content = aspectRatio ? /* @__PURE__ */ jsx(AspectFitView, { aspectRatio, children }) : children;
   return /* @__PURE__ */ jsx(LayoutProvider, { mode: layoutMode, children: /* @__PURE__ */ jsxs("div", { className: cn(layoutVariants({ background }), className), children: [
     /* @__PURE__ */ jsx("header", { children: topBar }),
@@ -1172,6 +1254,20 @@ const GlobalSettingsPage = ({
   showAppearanceInfoBox = true,
   onTrack
 }) => {
+  if (process.env.NODE_ENV !== "production") {
+    const ids = additionalSections.map((s) => s.id);
+    const duplicateIds = ids.filter((id, i) => ids.indexOf(id) !== i);
+    if (duplicateIds.length > 0) {
+      console.warn(
+        `[GlobalSettingsPage] Duplicate section IDs found: ${duplicateIds.join(", ")}. Each section must have a unique id.`
+      );
+    }
+    if (ids.includes("appearance")) {
+      console.warn(
+        '[GlobalSettingsPage] additionalSections contains a section with id "appearance" which conflicts with the built-in Appearance section. Use a different id to avoid unexpected behavior.'
+      );
+    }
+  }
   const [selectedSection, setSelectedSection] = useState("appearance");
   const [mobileView, setMobileView] = useState(
     "navigation"
@@ -1545,17 +1641,82 @@ const USER_ACTION_ERROR_CODES = [
   "auth/cancelled-popup-request",
   "auth/user-cancelled"
 ];
+const colorVariantClasses = {
+  primary: {
+    title: "text-primary-600",
+    inputFocus: "focus:ring-primary-500 focus:border-primary-500",
+    submitButton: "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 disabled:bg-primary-300",
+    googleButtonFocusRing: "focus:ring-primary-500",
+    toggleLink: "text-primary-600 hover:text-primary-500"
+  },
+  blue: {
+    title: "text-blue-600",
+    inputFocus: "focus:ring-blue-500 focus:border-blue-500",
+    submitButton: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 disabled:bg-blue-300",
+    googleButtonFocusRing: "focus:ring-blue-500",
+    toggleLink: "text-blue-600 hover:text-blue-500"
+  },
+  indigo: {
+    title: "text-indigo-600",
+    inputFocus: "focus:ring-indigo-500 focus:border-indigo-500",
+    submitButton: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 disabled:bg-indigo-300",
+    googleButtonFocusRing: "focus:ring-indigo-500",
+    toggleLink: "text-indigo-600 hover:text-indigo-500"
+  },
+  violet: {
+    title: "text-violet-600",
+    inputFocus: "focus:ring-violet-500 focus:border-violet-500",
+    submitButton: "bg-violet-600 hover:bg-violet-700 focus:ring-violet-500 disabled:bg-violet-300",
+    googleButtonFocusRing: "focus:ring-violet-500",
+    toggleLink: "text-violet-600 hover:text-violet-500"
+  },
+  orange: {
+    title: "text-orange-600",
+    inputFocus: "focus:ring-orange-500 focus:border-orange-500",
+    submitButton: "bg-orange-600 hover:bg-orange-700 focus:ring-orange-500 disabled:bg-orange-300",
+    googleButtonFocusRing: "focus:ring-orange-500",
+    toggleLink: "text-orange-600 hover:text-orange-500"
+  },
+  emerald: {
+    title: "text-emerald-600",
+    inputFocus: "focus:ring-emerald-500 focus:border-emerald-500",
+    submitButton: "bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500 disabled:bg-emerald-300",
+    googleButtonFocusRing: "focus:ring-emerald-500",
+    toggleLink: "text-emerald-600 hover:text-emerald-500"
+  },
+  rose: {
+    title: "text-rose-600",
+    inputFocus: "focus:ring-rose-500 focus:border-rose-500",
+    submitButton: "bg-rose-600 hover:bg-rose-700 focus:ring-rose-500 disabled:bg-rose-300",
+    googleButtonFocusRing: "focus:ring-rose-500",
+    toggleLink: "text-rose-600 hover:text-rose-500"
+  }
+};
 function LoginPage({
   appName,
   logo,
-  auth,
+  onEmailSignIn,
+  onEmailSignUp,
+  onGoogleSignIn,
   onSuccess,
   onAuthError,
   showGoogleSignIn = true,
   showSignUp = true,
   className = "",
-  primaryColorClass = "primary"
+  colorVariant = "primary"
 }) {
+  if (process.env.NODE_ENV !== "production") {
+    if (showSignUp && !onEmailSignUp) {
+      console.warn(
+        "[LoginPage] showSignUp is true but onEmailSignUp handler is not provided. Sign-up will fall back to onEmailSignIn. Provide onEmailSignUp for proper account creation."
+      );
+    }
+    if (showGoogleSignIn && !onGoogleSignIn) {
+      console.warn(
+        "[LoginPage] showGoogleSignIn is true but onGoogleSignIn handler is not provided. Google sign-in button will not be rendered. Provide onGoogleSignIn or set showGoogleSignIn to false."
+      );
+    }
+  }
   const [isSignUp, setIsSignUp] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -1563,6 +1724,7 @@ function LoginPage({
   const [isLoading, setIsLoading] = useState(false);
   const [isGoogleSignInPending, setIsGoogleSignInPending] = useState(false);
   const googleSignInStartTime = useRef(null);
+  const colors = colorVariantClasses[colorVariant];
   useEffect(() => {
     const handleFocus = () => {
       if (isGoogleSignInPending && googleSignInStartTime.current) {
@@ -1593,11 +1755,10 @@ function LoginPage({
     setError(null);
     setIsLoading(true);
     try {
-      if (!auth) throw new Error("Firebase not configured");
-      if (isSignUp && showSignUp) {
-        await createUserWithEmailAndPassword(auth, email, password);
+      if (isSignUp && showSignUp && onEmailSignUp) {
+        await onEmailSignUp(email, password);
       } else {
-        await signInWithEmailAndPassword(auth, email, password);
+        await onEmailSignIn(email, password);
       }
       onSuccess();
     } catch (err) {
@@ -1607,14 +1768,13 @@ function LoginPage({
     }
   };
   const handleGoogleSignIn = async () => {
+    if (!onGoogleSignIn) return;
     setError(null);
     setIsLoading(true);
     setIsGoogleSignInPending(true);
     googleSignInStartTime.current = Date.now();
     try {
-      if (!auth) throw new Error("Firebase not configured");
-      const provider = new GoogleAuthProvider();
-      await signInWithPopup(auth, provider);
+      await onGoogleSignIn();
       onSuccess();
     } catch (err) {
       handleAuthError(err);
@@ -1628,27 +1788,31 @@ function LoginPage({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 ${className}`,
+      className: cn(
+        "min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8",
+        className
+      ),
       children: /* @__PURE__ */ jsxs("div", { className: "max-w-md w-full space-y-8", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: logo }),
-          /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: `text-center text-3xl font-bold text-${primaryColorClass}-600`,
-              children: appName
-            }
-          ),
+          /* @__PURE__ */ jsx("h1", { className: cn("text-center text-3xl font-bold", colors.title), children: appName }),
           /* @__PURE__ */ jsx("h2", { className: "mt-6 text-center text-2xl font-semibold text-gray-900", children: isSignUp && showSignUp ? text.createAccount : text.signInToAccount })
         ] }),
         /* @__PURE__ */ jsxs("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, children: [
-          error && /* @__PURE__ */ jsx("div", { className: "bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-md text-sm", children: error }),
+          error && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-md text-sm",
+              role: "alert",
+              children: error
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx(
                 "label",
                 {
-                  htmlFor: "email",
+                  htmlFor: "login-email",
                   className: "block text-sm font-medium text-gray-700",
                   children: text.emailLabel
                 }
@@ -1656,7 +1820,7 @@ function LoginPage({
               /* @__PURE__ */ jsx(
                 "input",
                 {
-                  id: "email",
+                  id: "login-email",
                   name: "email",
                   type: "email",
                   autoComplete: "email",
@@ -1664,7 +1828,10 @@ function LoginPage({
                   value: email,
                   onChange: (e) => setEmail(e.target.value),
                   placeholder: text.emailPlaceholder,
-                  className: `mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-${primaryColorClass}-500 focus:border-${primaryColorClass}-500 sm:text-sm`
+                  className: cn(
+                    "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm",
+                    colors.inputFocus
+                  )
                 }
               )
             ] }),
@@ -1672,7 +1839,7 @@ function LoginPage({
               /* @__PURE__ */ jsx(
                 "label",
                 {
-                  htmlFor: "password",
+                  htmlFor: "login-password",
                   className: "block text-sm font-medium text-gray-700",
                   children: text.passwordLabel
                 }
@@ -1680,7 +1847,7 @@ function LoginPage({
               /* @__PURE__ */ jsx(
                 "input",
                 {
-                  id: "password",
+                  id: "login-password",
                   name: "password",
                   type: "password",
                   autoComplete: isSignUp ? "new-password" : "current-password",
@@ -1688,7 +1855,10 @@ function LoginPage({
                   value: password,
                   onChange: (e) => setPassword(e.target.value),
                   placeholder: text.passwordPlaceholder,
-                  className: `mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-${primaryColorClass}-500 focus:border-${primaryColorClass}-500 sm:text-sm`
+                  className: cn(
+                    "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm",
+                    colors.inputFocus
+                  )
                 }
               )
             ] })
@@ -1698,7 +1868,10 @@ function LoginPage({
             {
               type: "submit",
               disabled: isLoading,
-              className: `w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-${primaryColorClass}-600 text-white hover:bg-${primaryColorClass}-700 focus:ring-${primaryColorClass}-500 disabled:bg-${primaryColorClass}-300 px-4 py-2 text-sm`,
+              className: cn(
+                "w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-white px-4 py-2 text-sm",
+                colors.submitButton
+              ),
               children: [
                 isLoading && /* @__PURE__ */ jsxs(
                   "svg",
@@ -1707,6 +1880,7 @@ function LoginPage({
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
                     viewBox: "0 0 24 24",
+                    "aria-hidden": "true",
                     children: [
                       /* @__PURE__ */ jsx(
                         "circle",
@@ -1734,7 +1908,7 @@ function LoginPage({
               ]
             }
           ) }),
-          showGoogleSignIn && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showGoogleSignIn && onGoogleSignIn && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-gray-300" }) }),
               /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "px-2 bg-gray-50 text-gray-500", children: text.orContinueWith }) })
@@ -1745,7 +1919,10 @@ function LoginPage({
                 type: "button",
                 onClick: handleGoogleSignIn,
                 disabled: isLoading,
-                className: `w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-${primaryColorClass}-500 disabled:bg-gray-100 px-4 py-2 text-sm`,
+                className: cn(
+                  "w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100 px-4 py-2 text-sm",
+                  colors.googleButtonFocusRing
+                ),
                 children: [
                   isLoading ? /* @__PURE__ */ jsxs(
                     "svg",
@@ -1754,6 +1931,7 @@ function LoginPage({
                       xmlns: "http://www.w3.org/2000/svg",
                       fill: "none",
                       viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
                       children: [
                         /* @__PURE__ */ jsx(
                           "circle",
@@ -1791,7 +1969,7 @@ function LoginPage({
             {
               type: "button",
               onClick: () => setIsSignUp(!isSignUp),
-              className: `font-medium text-${primaryColorClass}-600 hover:text-${primaryColorClass}-500`,
+              className: cn("font-medium", colors.toggleLink),
               children: isSignUp ? text.signIn : text.signUp
             }
           )
@@ -2618,6 +2796,7 @@ export {
   AuthStatus,
   ChainType,
   DEFAULT_LANGUAGES,
+  DefaultLinkComponent,
   FontSize,
   GlobalSettingsPage,
   LanguageSelector,
@@ -2628,6 +2807,7 @@ export {
   S as SudobilityApp,
   Theme,
   cn,
+  getCopyrightYear,
   getI18n,
   default2 as i18n,
   initializeI18n,