@arbidocs/blocks 0.3.184 → 0.4.0

package/dist/chunk-QN42OA5J.js

@@ -0,0 +1,887 @@
+"use client";
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { ArrowRight, EyeOff, Eye, AlertCircle, Loader2, WifiOff, MoreVertical, Key, Shield, Upload } from 'lucide-react';
+import { cn, Input, Button, Checkbox, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@arbidocs/react/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useId, useMemo, useContext, useState, useRef } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+function AuthLayout({
+  children,
+  headerRight,
+  aside,
+  brand,
+  corner,
+  className,
+  testId = "auth-layout"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-layout",
+      className: cn(
+        "min-h-screen bg-background text-foreground",
+        // The hero needs height: a phone held sideways (under 32rem tall) gets the form alone.
+        aside && "md:grid [@media(min-height:32rem)]:md:grid-cols-2",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        corner,
+        /* @__PURE__ */ jsxs("section", { className: "flex min-h-screen flex-col px-4 py-5 sm:px-8 md:px-12 md:py-6", children: [
+          brand && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 font-semibold text-foreground", children: brand }),
+          /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-10 flex w-full max-w-sm flex-col gap-5 py-8 md:mt-[14vh]", children: [
+            headerRight && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: headerRight }),
+            children
+          ] })
+        ] }),
+        aside && /* @__PURE__ */ jsx("div", { className: "hidden [@media(min-height:32rem)]:md:flex", children: aside })
+      ]
+    }
+  );
+}
+function AuthHero({
+  headline,
+  emphasis,
+  lead,
+  pillars = [],
+  link,
+  backgroundImage,
+  children,
+  className,
+  testId = "product-pillars"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-hero",
+      className: cn(
+        "relative flex w-full flex-col justify-center gap-6 overflow-hidden bg-hero px-12 py-16 text-white",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        backgroundImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "auth-hero-image",
+              className: "absolute inset-0 bg-cover bg-center",
+              style: { backgroundImage: `url(${backgroundImage})` }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-hero/70" })
+        ] }),
+        headline && /* @__PURE__ */ jsxs("h2", { className: "relative max-w-[18ch] text-3xl font-semibold leading-tight text-white", children: [
+          headline,
+          emphasis && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("span", { className: "italic text-theme-cyan-bright", children: emphasis })
+          ] })
+        ] }),
+        lead && /* @__PURE__ */ jsx("p", { className: "relative max-w-[44ch] text-base text-white/70", children: lead }),
+        /* @__PURE__ */ jsx("ul", { className: "relative flex max-w-[46ch] flex-col gap-5", children: pillars.map(({ icon: Icon, title, body }) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 h-5 w-5 shrink-0 text-theme-cyan-bright", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug text-white", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-white/70", children: body })
+          ] })
+        ] }, title)) }),
+        children && /* @__PURE__ */ jsx("div", { className: "relative", children }),
+        link && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "relative inline-flex items-center gap-1 text-sm font-medium text-theme-cyan-bright transition-colors hover:text-white",
+            children: [
+              link.label,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AuthHeading({ title, description }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-heading", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: description })
+  ] });
+}
+function AuthLink({ className, type = "button", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      "data-slot": "auth-link",
+      className: cn(
+        "text-sm text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var AuthFieldContext = createContext(null);
+function joinIds(...ids) {
+  const joined = ids.filter(Boolean).join(" ");
+  return joined || void 0;
+}
+function AuthField({
+  htmlFor,
+  error,
+  errorTestId,
+  label,
+  required,
+  labelAction,
+  trailing,
+  className,
+  children
+}) {
+  const generatedId = useId();
+  const id = htmlFor ?? generatedId;
+  const errorId = error ? `${id}-error` : void 0;
+  const context = useMemo(() => ({ id, errorId }), [id, errorId]);
+  return /* @__PURE__ */ jsx(AuthFieldContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { "data-slot": "auth-field", className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "block text-sm font-medium text-foreground", children: [
+        label,
+        " ",
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-text", children: "*" })
+      ] }),
+      labelAction
+    ] }),
+    trailing ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children,
+      trailing
+    ] }) : children,
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        role: "alert",
+        className: "mt-1 text-sm text-red-text",
+        "data-testid": errorTestId,
+        children: error
+      }
+    )
+  ] }) });
+}
+function AuthInput({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  const field = useContext(AuthFieldContext);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: id ?? field?.id,
+      "aria-describedby": joinIds(describedBy, field?.errorId),
+      "aria-invalid": invalid ?? (field?.errorId ? true : void 0),
+      className: cn("placeholder:text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var DEFAULT_REVEALABLE_PASSWORD_INPUT_LABELS = {
+  hidePassword: "Hide password",
+  showPassword: "Show password"
+};
+var DEFAULT_AUTH_OFFLINE_BADGE_LABELS = {
+  offline: "Offline"
+};
+function RevealablePasswordInput({
+  isRevealed: controlledRevealed,
+  defaultRevealed = false,
+  onToggleReveal,
+  className,
+  labels,
+  toggleTestId,
+  ...props
+}) {
+  const [innerRevealed, setInnerRevealed] = useState(defaultRevealed);
+  const isControlled = controlledRevealed !== void 0;
+  const isRevealed = isControlled ? controlledRevealed : innerRevealed;
+  const l = useMemo(() => ({ ...DEFAULT_REVEALABLE_PASSWORD_INPUT_LABELS, ...labels }), [labels]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      AuthInput,
+      {
+        type: isRevealed ? "text" : "password",
+        className: cn("pr-10", className),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (!isControlled) setInnerRevealed((prev) => !prev);
+          onToggleReveal?.();
+        },
+        "aria-label": isRevealed ? l.hidePassword : l.showPassword,
+        "aria-pressed": isRevealed,
+        className: "absolute inset-y-0 right-0 flex w-10 items-center justify-center rounded-r-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:w-11",
+        "data-testid": testIdOr(toggleTestId, { testId: "toggle-password-visibility" }),
+        children: isRevealed ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+function AuthFieldBadge({
+  icon,
+  children,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1 text-xs font-medium text-green-text",
+      "data-testid": testId,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+function AuthNote({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm text-muted-foreground", className), ...props });
+}
+function AuthAlert({
+  children,
+  withIcon = false,
+  testId,
+  id
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      role: "alert",
+      "data-testid": testId,
+      className: "flex gap-2 rounded-md bg-red-bg p-3 text-sm text-red-text",
+      children: [
+        withIcon && /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 flex-shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { children })
+      ]
+    }
+  );
+}
+function AuthSubmitButton({
+  isBusy,
+  testId,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "submit",
+      className: cn("w-full", className),
+      "aria-busy": isBusy || void 0,
+      "data-testid": testId,
+      ...props,
+      children: [
+        isBusy && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+        children
+      ]
+    }
+  );
+}
+function AuthDivider({ label, testId }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-divider",
+      "data-testid": testIdOr(testId, { testId: "login-divider" }),
+      className: "relative",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border" }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs", children: /* @__PURE__ */ jsx("span", { className: "bg-background px-2 text-muted-foreground", children: label }) })
+      ]
+    }
+  );
+}
+function AuthTabs({
+  value,
+  onChange,
+  tabs,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange: (next) => onChange(next), children: [
+    /* @__PURE__ */ jsx(TabsPrimitive.List, { "aria-label": ariaLabel, className: "inline-flex items-center gap-6", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      TabsPrimitive.Trigger,
+      {
+        value: tab.value,
+        "data-testid": tab.testId,
+        className: cn(
+          "-mb-px border-b-2 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-w-11 pointer-coarse:py-3",
+          tab.value === value ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+        ),
+        children: tab.label
+      },
+      tab.value
+    )) }),
+    tabs.map((tab) => /* @__PURE__ */ jsx(
+      TabsPrimitive.Content,
+      {
+        value: tab.value,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        className: "hidden"
+      },
+      tab.value
+    ))
+  ] });
+}
+function AuthOfflineBadge({
+  label,
+  title,
+  testId,
+  labels
+}) {
+  const text = label ?? labels?.offline ?? DEFAULT_AUTH_OFFLINE_BADGE_LABELS.offline;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-testid": testIdOr(testId, { testId: "login-offline-indicator" }),
+      className: "inline-flex items-center gap-1.5 rounded-md bg-yellow-bg px-2.5 py-1.5 text-sm font-medium text-yellow-text",
+      title,
+      children: [
+        /* @__PURE__ */ jsx(WifiOff, { className: "h-4 w-4 shrink-0" }),
+        text
+      ]
+    }
+  );
+}
+var DEFAULT_SSO_LOGIN_BUTTON_LABELS = {
+  loginWith: "Login with",
+  brandIconAlt: "ARBI Docs"
+};
+function SsoLoginButton({
+  onClick,
+  brandIconSrc = "/favicon.svg",
+  brandIconAlt,
+  testId,
+  containerTestId,
+  labels
+}) {
+  const l = useMemo(() => ({ ...DEFAULT_SSO_LOGIN_BUTTON_LABELS, ...labels }), [labels]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sso-login",
+      "data-testid": testIdOr(containerTestId, { testId: "sso-login-button-container" }),
+      className: "text-center",
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick,
+          className: "flex w-full items-center justify-center gap-3",
+          variant: "outline",
+          "data-testid": testIdOr(testId, { testId: "login-with-arbi-button" }),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: l.loginWith }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pr-1", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: brandIconSrc,
+                  alt: brandIconAlt ?? l.brandIconAlt,
+                  className: "h-5 w-5 rounded object-contain"
+                }
+              ),
+              /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "#0A66C2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) }),
+              /* @__PURE__ */ jsxs("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+var DEFAULT_AUTH_CONSENT_LABELS = {
+  acknowledge: "I acknowledge the",
+  and: "and",
+  downloadRecoveryKey: "Download my recovery key"
+};
+var DEFAULT_AUTH_FOOTER_LINKS_LABELS = {
+  installOptions: "Install options",
+  install: "Install"
+};
+var LEGAL_LINK_CLASS = "underline transition-colors hover:text-primary";
+function AuthConsent({
+  termsAccepted,
+  onTermsAcceptedChange,
+  saveRecoveryKey,
+  onSaveRecoveryKeyChange,
+  termsLink,
+  privacyLink,
+  noRecoveryKeyWarning,
+  labels,
+  testIds
+}) {
+  const l = useMemo(() => ({ ...DEFAULT_AUTH_CONSENT_LABELS, ...labels }), [labels]);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-consent", className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: "accept-terms",
+          checked: termsAccepted,
+          onCheckedChange: (checked) => onTermsAcceptedChange(checked === true),
+          "data-testid": testIdOr(testIds?.termsCheckbox, { testId: "accept-terms-checkbox" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: "accept-terms",
+          className: "cursor-pointer text-sm leading-relaxed text-muted-foreground",
+          children: [
+            l.acknowledge,
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: termsLink.href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: LEGAL_LINK_CLASS,
+                children: termsLink.label
+              }
+            ),
+            " ",
+            l.and,
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: privacyLink.href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: LEGAL_LINK_CLASS,
+                children: privacyLink.label
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: "save-recovery-key",
+          checked: saveRecoveryKey,
+          onCheckedChange: (checked) => onSaveRecoveryKeyChange(checked === true),
+          "data-testid": testIdOr(testIds?.recoveryKeyCheckbox, {
+            testId: "save-recovery-key-checkbox"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "save-recovery-key",
+          className: "cursor-pointer text-sm leading-relaxed text-muted-foreground",
+          children: l.downloadRecoveryKey
+        }
+      )
+    ] }),
+    !saveRecoveryKey && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-sm text-red-text",
+        role: "alert",
+        "data-testid": testIdOr(testIds?.noRecoveryKeyWarning, {
+          testId: "no-recovery-key-warning"
+        }),
+        children: noRecoveryKeyWarning
+      }
+    )
+  ] });
+}
+function AuthFooterLinks({
+  privacyLink,
+  installOptions = [],
+  children,
+  labels,
+  installTriggerTestId
+}) {
+  const l = useMemo(() => ({ ...DEFAULT_AUTH_FOOTER_LINKS_LABELS, ...labels }), [labels]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-footer-links",
+      className: "flex items-center justify-between pt-2 text-sm text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: privacyLink.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center transition-colors hover:text-primary pointer-coarse:min-h-11",
+            children: privacyLink.label
+          }
+        ),
+        installOptions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxs(
+            DropdownMenuTrigger,
+            {
+              className: "flex items-center gap-1 rounded-md px-1.5 py-1 transition-colors hover:text-primary focus:outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:min-h-11",
+              "aria-label": l.installOptions,
+              "data-testid": testIdOr(installTriggerTestId, { testId: "install-options-trigger" }),
+              children: [
+                l.install,
+                /* @__PURE__ */ jsx(MoreVertical, { size: 14 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: installOptions.map((option) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: option.onSelect,
+              disabled: option.disabled,
+              className: "gap-2",
+              "data-testid": option.testId,
+              children: [
+                option.icon,
+                option.label
+              ]
+            },
+            option.id
+          )) })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function ErrorBox({ message, id }) {
+  return /* @__PURE__ */ jsx("div", { id, role: "alert", className: "rounded-md bg-red-bg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 flex-shrink-0 text-red-text", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-red-text", children: message })
+  ] }) });
+}
+var DEFAULT_RECOVERY_KEY_DIALOG_LABELS = {
+  title: "Save your recovery key",
+  verifiedDescription: "If you forget your password, this is the only way to get back into your account. Save it to your password manager so it's there when you need it.",
+  unverifiedDescription: "Confirm your password to continue.",
+  done: "Done",
+  currentPassword: "Current Password",
+  passwordPlaceholder: "Enter your password",
+  cancel: "Cancel",
+  verifying: "Verifying...",
+  verify: "Verify"
+};
+var DEFAULT_ACCOUNT_RECOVERY_DIALOG_LABELS = {
+  title: "Recover Your Account",
+  description: "Upload your recovery key to regain access to your account",
+  emailAddress: "Email Address",
+  emailPlaceholder: "Enter your email",
+  keyLoadedFromLink: "Recovery key loaded from link",
+  ssoProtectedKeyNotice: "SSO-protected key \u2014 you must be signed into the matching SSO account.",
+  recoveryKey: "Recovery Key",
+  ssoProtectedKey: "SSO Protected Key",
+  dropKeyHere: "Drop your recovery key here",
+  uploadKeyPrompt: "Click or drag to upload your recovery key (.key file)",
+  ssoSignInNotice: "This account signs in with single sign-on. Sign in with your identity provider to continue \u2014 you won\u2019t need your forgotten master password for that step.",
+  ssoSignIn: "Sign in with Auth0 to continue",
+  afterRecoveryNotice: "After successful recovery, you will be prompted to set a new password to secure your account.",
+  cancel: "Cancel",
+  recovering: "Recovering...",
+  recoverAccount: "Recover Account"
+};
+function RecoveryKeyDialog({
+  open,
+  onClose,
+  verified,
+  password,
+  onPasswordChange,
+  onVerify,
+  isVerifying,
+  error,
+  title,
+  verifiedDescription,
+  unverifiedDescription,
+  labels,
+  testId,
+  testIds
+}) {
+  const verifyPasswordId = useId();
+  const l = useMemo(() => ({ ...DEFAULT_RECOVERY_KEY_DIALOG_LABELS, ...labels }), [labels]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onVerify();
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      presentation: "sheet",
+      className: "sm:max-w-md",
+      "data-testid": testIdOr(testId, { testId: "download-recovery-key-dialog" }),
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "font-heading", children: title ?? l.title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: verified ? verifiedDescription ?? l.verifiedDescription : unverifiedDescription ?? l.unverifiedDescription })
+        ] }),
+        verified ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          verified,
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { onClick: onClose, children: l.done }) })
+        ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: verifyPasswordId, className: "text-sm font-medium", children: l.currentPassword }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: verifyPasswordId,
+                type: "password",
+                value: password,
+                onChange: (e) => onPasswordChange(e.target.value),
+                placeholder: l.passwordPlaceholder,
+                disabled: isVerifying,
+                autoComplete: "current-password",
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": error ? `${verifyPasswordId}-error` : void 0,
+                "data-testid": testIdOr(testIds?.passwordInput, { testId: "verify-password-input" })
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx(ErrorBox, { message: error, id: `${verifyPasswordId}-error` }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col-reverse sm:flex-row sm:justify-end gap-3", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isVerifying, children: l.cancel }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isVerifying || !password, children: isVerifying ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+              l.verifying
+            ] }) : l.verify })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function AccountRecoveryDialog({
+  open,
+  onClose,
+  email,
+  onEmailChange,
+  isKeyFromLink,
+  keyFileName,
+  isKeyEncrypted,
+  onKeyFile,
+  error,
+  needsSsoSignIn,
+  onSsoSignIn,
+  isProcessing,
+  canSubmit,
+  onSubmit,
+  labels,
+  testId,
+  testIds
+}) {
+  const recoveryEmailId = useId();
+  const l = useMemo(() => ({ ...DEFAULT_ACCOUNT_RECOVERY_DIALOG_LABELS, ...labels }), [labels]);
+  const fileInputRef = useRef(null);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) onKeyFile(file);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      presentation: "sheet",
+      className: "sm:max-w-md",
+      "data-testid": testIdOr(testId, { testId: "forgot-password-modal" }),
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Key, { className: "h-5 w-5 text-primary" }),
+            l.title
+          ] }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: l.description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: recoveryEmailId, className: "text-sm font-medium", children: l.emailAddress }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: recoveryEmailId,
+                type: "email",
+                value: email,
+                onChange: (e) => onEmailChange(e.target.value),
+                placeholder: l.emailPlaceholder,
+                disabled: isProcessing,
+                "data-testid": testIdOr(testIds?.emailInput, { testId: "recovery-email-input" })
+              }
+            )
+          ] }),
+          isKeyFromLink ? /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-green-bg p-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(Key, { className: "h-4 w-4 text-green-text" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-green-text", children: l.keyLoadedFromLink })
+            ] }),
+            isKeyEncrypted && /* @__PURE__ */ jsxs("p", { className: "mt-1 inline-flex items-center gap-1 text-sm text-primary", children: [
+              /* @__PURE__ */ jsx(Shield, { className: "h-3 w-3" }),
+              l.ssoProtectedKeyNotice
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: l.recoveryKey }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                className: cn(
+                  "cursor-pointer rounded-lg p-4 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  isDragActive ? "bg-accent" : "bg-muted hover:bg-muted/70"
+                ),
+                onClick: () => fileInputRef.current?.click(),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    fileInputRef.current?.click();
+                  }
+                },
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: handleDrop,
+                "data-testid": testIdOr(testIds?.keyDropzone, { testId: "recovery-key-dropzone" }),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: ".key",
+                      onClick: (e) => e.stopPropagation(),
+                      onChange: (e) => {
+                        const file = e.target.files?.[0];
+                        if (file) onKeyFile(file);
+                      },
+                      className: "hidden",
+                      "data-testid": testIdOr(testIds?.keyInput, { testId: "recovery-key-input" })
+                    }
+                  ),
+                  keyFileName ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
+                      /* @__PURE__ */ jsx(Key, { className: "h-4 w-4 text-green-text" }),
+                      /* @__PURE__ */ jsx("span", { className: "font-medium text-green-text", children: keyFileName })
+                    ] }),
+                    isKeyEncrypted && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-primary", children: [
+                      /* @__PURE__ */ jsx(Shield, { className: "h-3 w-3" }),
+                      l.ssoProtectedKey
+                    ] })
+                  ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx(Upload, { className: "mx-auto h-8 w-8 text-muted-foreground" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? l.dropKeyHere : l.uploadKeyPrompt })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx(ErrorBox, { message: error }),
+          needsSsoSignIn ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-lg bg-muted p-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(Shield, { className: "h-5 w-5 flex-shrink-0 text-primary" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: l.ssoSignInNotice })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: onSsoSignIn,
+                className: "w-full",
+                "data-testid": testIdOr(testIds?.ssoSignIn, { testId: "recovery-sso-signin-button" }),
+                children: l.ssoSignIn
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: l.afterRecoveryNotice }) })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: onClose,
+              disabled: isProcessing,
+              "data-testid": testIdOr(testIds?.cancel, { testId: "forgot-password-cancel" }),
+              children: l.cancel
+            }
+          ),
+          !needsSsoSignIn && /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: onSubmit,
+              disabled: isProcessing || !canSubmit,
+              "data-testid": testIdOr(testIds?.submit, { testId: "forgot-password-submit" }),
+              children: isProcessing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+                l.recovering
+              ] }) : l.recoverAccount
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { AccountRecoveryDialog, AuthAlert, AuthConsent, AuthDivider, AuthField, AuthFieldBadge, AuthFooterLinks, AuthHeading, AuthHero, AuthInput, AuthLayout, AuthLink, AuthNote, AuthOfflineBadge, AuthSubmitButton, AuthTabs, DEFAULT_ACCOUNT_RECOVERY_DIALOG_LABELS, DEFAULT_AUTH_CONSENT_LABELS, DEFAULT_AUTH_FOOTER_LINKS_LABELS, DEFAULT_AUTH_OFFLINE_BADGE_LABELS, DEFAULT_RECOVERY_KEY_DIALOG_LABELS, DEFAULT_REVEALABLE_PASSWORD_INPUT_LABELS, DEFAULT_SSO_LOGIN_BUTTON_LABELS, RecoveryKeyDialog, RevealablePasswordInput, SsoLoginButton };
+//# sourceMappingURL=chunk-QN42OA5J.js.map
+//# sourceMappingURL=chunk-QN42OA5J.js.map