@wildo-ai/saas-frontend-lib 1.1.4 → 1.1.6

package/dist/esm/components/auth/pages/AuthPage_PasswordLost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage_PasswordLost.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/pages/AuthPage_PasswordLost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAkBzC,CAAC"}
+{"version":3,"file":"AuthPage_PasswordLost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/pages/AuthPage_PasswordLost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAkBzC,CAAC"}

package/dist/esm/components/auth/pages/AuthPage_PasswordLost.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage_PasswordLost.js","sourceRoot":"","sources":["../../../../../src/components/auth/pages/AuthPage_PasswordLost.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+DAA+D,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAE1F,MAAM,CAAC,MAAM,qBAAqB,GAAa,GAAG,EAAE;IAClD,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC;IAC1D,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC;IAErD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;QAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,OAAO,GAAG,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,0BAA0B,IAAC,aAAa,EAAE,IAAI,YAC7C,KAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,GAChC,CAC9B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { PublicLayout_MainContainer } from '~wildo-frontend-lib/components/app/PublicLayout_MainContainer';\nimport { Auth_PasswordLost } from '~wildo-frontend-lib/components/auth/Auth_PasswordLost';\n\nexport const AuthPage_PasswordLost: React.FC = () => {\n  const [searchParams] = useSearchParams();\n  const resetToken = searchParams.get('token') || undefined;\n  const email = searchParams.get('email') || undefined;\n\n  React.useEffect(() => {\n    const meta = document.createElement('meta');\n    meta.name = 'referrer';\n    meta.content = 'no-referrer';\n    document.head.appendChild(meta);\n    return () => { document.head.removeChild(meta); };\n  }, []);\n\n  return (\n    <PublicLayout_MainContainer useCardLayout={true}>\n      <Auth_PasswordLost resetToken={resetToken} email={email} />\n    </PublicLayout_MainContainer>\n  );\n};\n"]}
+{"version":3,"file":"AuthPage_PasswordLost.js","sourceRoot":"","sources":["../../../../../../src/components/auth/pages/AuthPage_PasswordLost.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+DAA+D,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAE1F,MAAM,CAAC,MAAM,qBAAqB,GAAa,GAAG,EAAE;IAClD,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC;IAC1D,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC;IAErD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;QAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,OAAO,GAAG,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,0BAA0B,IAAC,aAAa,EAAE,IAAI,YAC7C,KAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,GAChC,CAC9B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { PublicLayout_MainContainer } from '~wildo-frontend-lib/components/app/PublicLayout_MainContainer';\nimport { Auth_PasswordLost } from '~wildo-frontend-lib/components/auth/Auth_PasswordLost';\n\nexport const AuthPage_PasswordLost: React.FC = () => {\n  const [searchParams] = useSearchParams();\n  const resetToken = searchParams.get('token') || undefined;\n  const email = searchParams.get('email') || undefined;\n\n  React.useEffect(() => {\n    const meta = document.createElement('meta');\n    meta.name = 'referrer';\n    meta.content = 'no-referrer';\n    document.head.appendChild(meta);\n    return () => { document.head.removeChild(meta); };\n  }, []);\n\n  return (\n    <PublicLayout_MainContainer useCardLayout={true}>\n      <Auth_PasswordLost resetToken={resetToken} email={email} />\n    </PublicLayout_MainContainer>\n  );\n};\n"]}

package/dist/esm/components/auth/pages/AuthPage_ReAuthenticationCallback.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AuthPage_ReAuthenticationCallback: React.FC;
+//# sourceMappingURL=AuthPage_ReAuthenticationCallback.d.ts.map

package/dist/esm/components/auth/pages/AuthPage_ReAuthenticationCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthPage_ReAuthenticationCallback.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/pages/AuthPage_ReAuthenticationCallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA0B3D,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,EAgCrD,CAAC"}

package/dist/esm/components/auth/pages/AuthPage_ReAuthenticationCallback.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { AuthCallbackLabel, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { PublicLayout_MainContainer } from '../../../components/app/PublicLayout_MainContainer.js';
+import { Text } from '../../../components/typography/text.js';
+import { useI18n } from '../../../core/i18n/useI18n.js';
+import { reportReAuthenticationCallback } from '../../../core/security/federated-reauthentication.frontend.js';
+/**
+ * The page a federated re-authentication returns to, inside the popup the step-up dialog opened (#1441).
+ * Mounted at `REAUTHENTICATION_CALLBACK_PAGE_PATH`, where the backend redirects with `?code=` (a one-time
+ * code for the proof) or `?error=`.
+ *
+ * It does exactly one thing: hand the result to the application window waiting for it, then close. It
+ * redeems nothing itself, so it needs no session. The code is redeemed by the waiting window, with its
+ * own bearer. See `federated-reauthentication.frontend.ts` for why the hand-over is a `BroadcastChannel`
+ * and not `window.opener`.
+ */
+/** What the page did with the URL it landed on. */
+var ReAuthenticationCallbackOutcome;
+(function (ReAuthenticationCallbackOutcome) {
+    /** A code or an error was handed to the waiting window. */
+    ReAuthenticationCallbackOutcome["REPORTED"] = "reported";
+    /** The URL carried neither, so there was nothing to hand over. */
+    ReAuthenticationCallbackOutcome["NOTHING_TO_REPORT"] = "nothing_to_report";
+})(ReAuthenticationCallbackOutcome || (ReAuthenticationCallbackOutcome = {}));
+export const AuthPage_ReAuthenticationCallback = () => {
+    const [searchParams] = useSearchParams();
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.PUBLIC_LAYOUTS_AUTH_CALLBACK });
+    const [outcome, setOutcome] = useState(null);
+    // Report once: StrictMode runs effects twice in development, and a second report is a second answer.
+    const reportedRef = useRef(false);
+    useEffect(() => {
+        if (reportedRef.current)
+            return;
+        reportedRef.current = true;
+        const code = searchParams.get('code');
+        const error = searchParams.get('error');
+        if (!code && !error) {
+            setOutcome(ReAuthenticationCallbackOutcome.NOTHING_TO_REPORT);
+            return;
+        }
+        reportReAuthenticationCallback(code ? { code } : { error: error ?? undefined });
+        setOutcome(ReAuthenticationCallbackOutcome.REPORTED);
+        window.close();
+    }, [searchParams]);
+    if (!isReady || outcome === null)
+        return null;
+    return (_jsx(PublicLayout_MainContainer, { useCardLayout: true, children: _jsx(Text, { className: "text-sm", children: tComponent(FrontendComponentType.PUBLIC_LAYOUTS_AUTH_CALLBACK, outcome === ReAuthenticationCallbackOutcome.REPORTED ? AuthCallbackLabel.REAUTH_RETURNING : AuthCallbackLabel.REAUTH_NO_RESULT) }) }));
+};
+//# sourceMappingURL=AuthPage_ReAuthenticationCallback.js.map

package/dist/esm/components/auth/pages/AuthPage_ReAuthenticationCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthPage_ReAuthenticationCallback.js","sourceRoot":"","sources":["../../../../../../src/components/auth/pages/AuthPage_ReAuthenticationCallback.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,+DAA+D,CAAC;AAC3G,OAAO,EAAE,IAAI,EAAE,MAAM,gDAAgD,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,8BAA8B,EAAE,MAAM,uEAAuE,CAAC;AAEvH;;;;;;;;;GASG;AACH,mDAAmD;AACnD,IAAK,+BAKJ;AALD,WAAK,+BAA+B;IAClC,2DAA2D;IAC3D,wDAAqB,CAAA;IACrB,kEAAkE;IAClE,0EAAuC,CAAA;AACzC,CAAC,EALI,+BAA+B,KAA/B,+BAA+B,QAKnC;AAED,MAAM,CAAC,MAAM,iCAAiC,GAAa,GAAG,EAAE;IAC9D,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,EAAE,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,4BAA4B,EAAE,CAAC,CAAC;IAC3G,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAyC,IAAI,CAAC,CAAC;IACrF,qGAAqG;IACrG,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO;YAAE,OAAO;QAChC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,MAAM,IAAI,GAAG,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,UAAU,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,CAAC;YAC9D,OAAO;QACT,CAAC;QACD,8BAA8B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,CAAC,CAAC;QAChF,UAAU,CAAC,+BAA+B,CAAC,QAAQ,CAAC,CAAC;QACrD,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAC9C,OAAO,CACL,KAAC,0BAA0B,IAAC,aAAa,EAAE,IAAI,YAC7C,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,YACtB,UAAU,CACT,qBAAqB,CAAC,4BAA4B,EAClD,OAAO,KAAK,+BAA+B,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,gBAAgB,CAC/H,GACI,GACoB,CAC9B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { AuthCallbackLabel, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { PublicLayout_MainContainer } from '~wildo-frontend-lib/components/app/PublicLayout_MainContainer';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { reportReAuthenticationCallback } from '~wildo-frontend-lib/core/security/federated-reauthentication.frontend';\n\n/**\n * The page a federated re-authentication returns to, inside the popup the step-up dialog opened (#1441).\n * Mounted at `REAUTHENTICATION_CALLBACK_PAGE_PATH`, where the backend redirects with `?code=` (a one-time\n * code for the proof) or `?error=`.\n *\n * It does exactly one thing: hand the result to the application window waiting for it, then close. It\n * redeems nothing itself, so it needs no session. The code is redeemed by the waiting window, with its\n * own bearer. See `federated-reauthentication.frontend.ts` for why the hand-over is a `BroadcastChannel`\n * and not `window.opener`.\n */\n/** What the page did with the URL it landed on. */\nenum ReAuthenticationCallbackOutcome {\n  /** A code or an error was handed to the waiting window. */\n  REPORTED = 'reported',\n  /** The URL carried neither, so there was nothing to hand over. */\n  NOTHING_TO_REPORT = 'nothing_to_report',\n}\n\nexport const AuthPage_ReAuthenticationCallback: React.FC = () => {\n  const [searchParams] = useSearchParams();\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.PUBLIC_LAYOUTS_AUTH_CALLBACK });\n  const [outcome, setOutcome] = useState<ReAuthenticationCallbackOutcome | null>(null);\n  // Report once: StrictMode runs effects twice in development, and a second report is a second answer.\n  const reportedRef = useRef(false);\n\n  useEffect(() => {\n    if (reportedRef.current) return;\n    reportedRef.current = true;\n    const code = searchParams.get('code');\n    const error = searchParams.get('error');\n    if (!code && !error) {\n      setOutcome(ReAuthenticationCallbackOutcome.NOTHING_TO_REPORT);\n      return;\n    }\n    reportReAuthenticationCallback(code ? { code } : { error: error ?? undefined });\n    setOutcome(ReAuthenticationCallbackOutcome.REPORTED);\n    window.close();\n  }, [searchParams]);\n\n  if (!isReady || outcome === null) return null;\n  return (\n    <PublicLayout_MainContainer useCardLayout={true}>\n      <Text className=\"text-sm\">\n        {tComponent(\n          FrontendComponentType.PUBLIC_LAYOUTS_AUTH_CALLBACK,\n          outcome === ReAuthenticationCallbackOutcome.REPORTED ? AuthCallbackLabel.REAUTH_RETURNING : AuthCallbackLabel.REAUTH_NO_RESULT,\n        )}\n      </Text>\n    </PublicLayout_MainContainer>\n  );\n};\n"]}

package/dist/esm/components/auth/pages/AuthPage_Register.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage_Register.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/pages/AuthPage_Register.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAMrC,CAAC"}
+{"version":3,"file":"AuthPage_Register.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/pages/AuthPage_Register.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAMrC,CAAC"}

package/dist/esm/components/auth/pages/AuthPage_Register.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage_Register.js","sourceRoot":"","sources":["../../../../../src/components/auth/pages/AuthPage_Register.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+DAA+D,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAElF,MAAM,CAAC,MAAM,iBAAiB,GAAa,GAAG,EAAE;IAC9C,OAAO,CACL,KAAC,0BAA0B,IAAC,aAAa,EAAE,IAAI,YAC7C,KAAC,aAAa,KAAG,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { PublicLayout_MainContainer } from '~wildo-frontend-lib/components/app/PublicLayout_MainContainer';\nimport { Auth_Register } from '~wildo-frontend-lib/components/auth/Auth_Register';\n\nexport const AuthPage_Register: React.FC = () => {\n  return (\n    <PublicLayout_MainContainer useCardLayout={true}>\n      <Auth_Register />\n    </PublicLayout_MainContainer>\n  );\n};\n"]}
+{"version":3,"file":"AuthPage_Register.js","sourceRoot":"","sources":["../../../../../../src/components/auth/pages/AuthPage_Register.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+DAA+D,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAElF,MAAM,CAAC,MAAM,iBAAiB,GAAa,GAAG,EAAE;IAC9C,OAAO,CACL,KAAC,0BAA0B,IAAC,aAAa,EAAE,IAAI,YAC7C,KAAC,aAAa,KAAG,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { PublicLayout_MainContainer } from '~wildo-frontend-lib/components/app/PublicLayout_MainContainer';\nimport { Auth_Register } from '~wildo-frontend-lib/components/auth/Auth_Register';\n\nexport const AuthPage_Register: React.FC = () => {\n  return (\n    <PublicLayout_MainContainer useCardLayout={true}>\n      <Auth_Register />\n    </PublicLayout_MainContainer>\n  );\n};\n"]}

package/dist/esm/components/auth/utils/AuthMethodChoiceList.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { AuthMethod } from '@wildo-ai/saas-models';
+/**
+ * How a set of authentication-method choices is arranged.
+ */
+export declare enum AuthMethodChoiceLayout {
+    /**
+     * SECONDARY choices beside a method already on screen ("other sign-in methods"). Buttons share rows
+     * and reflow: each asks for a comfortable minimum width and grows to fill its row, so two short labels
+     * sit side by side, a third that does not fit takes a row of its own, and a long translation wraps
+     * inside its button instead of being truncated or overflowing the card.
+     */
+    REFLOW = "reflow",
+    /**
+     * The PRIMARY choice of a screen ("choose how to verify"). One full-width row per method, icon and
+     * label aligned to the start, so the options scan as a list.
+     */
+    LIST = "list"
+}
+export interface AuthMethodChoiceListProps {
+    methods: readonly AuthMethod[];
+    /** The label naming a method, already translated. */
+    labelFor: (method: AuthMethod) => string;
+    onSelect: (method: AuthMethod) => void;
+    disabled?: boolean;
+    layout?: AuthMethodChoiceLayout;
+    className?: string;
+}
+/**
+ * The buttons that let a person pick an authentication method — one component for the sign-in,
+ * registration, invitation and second-factor screens, which each rendered their own copy.
+ *
+ * ## Why labels WRAP rather than truncate
+ *
+ * A method label is translated, and translations run long ("Anmeldelink per E-Mail"). The button preset
+ * is single-line by default (`whitespace-nowrap`, fixed height), which is right for toolbars and wrong
+ * here: a chooser that cuts a method's name hides what the button does. Both layouts therefore ask the
+ * BUTTON for `ButtonLabelOverflow.WRAP`, which keeps the active theme's height as a minimum — so a
+ * one-line choice is as tall as the submit button beside it in every theme — and lets a long word break.
+ * Sizing is never overridden here: an `h-auto min-h-9` override pinned the default theme's height into
+ * cozy (`h-11`) and dense (`h-8`) and made the choices a different height from their neighbours.
+ *
+ * ## Why REFLOW uses flex-basis and not a grid
+ *
+ * `repeat(auto-fit, minmax(…, 1fr))` gives equal columns but leaves an odd last item alone in the first
+ * column. Flex items with a shared basis that may grow fill every row edge to edge: 2 → one row,
+ * 3 → two plus one full-width, 4 → two rows. The 10rem basis is the width at which an icon plus a short
+ * method name ("Passkey", "Magic link") fits on one line at the body size.
+ *
+ * Each button carries `data-auth-method` so tests and browser drives address a method by its enum value
+ * rather than by translated text.
+ */
+export declare const AuthMethodChoiceList: ({ methods, labelFor, onSelect, disabled, layout, className, }: AuthMethodChoiceListProps) => React.JSX.Element | null;
+//# sourceMappingURL=AuthMethodChoiceList.d.ts.map

package/dist/esm/components/auth/utils/AuthMethodChoiceList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthMethodChoiceList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthMethodChoiceList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD;;GAEG;AACH,oBAAY,sBAAsB;IAChC;;;;;OAKG;IACH,MAAM,WAAW;IACjB;;;OAGG;IACH,IAAI,SAAS;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,qDAAqD;IACrD,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAC;IACzC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,oBAAoB,GAAI,+DAOlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAwBlD,CAAC"}

package/dist/esm/components/auth/utils/AuthMethodChoiceList.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonLabelOverflow, ButtonVariants_Variant } from '../../../components/actions/button.js';
+import { cn } from '../../../core/ui/cn.js';
+import { AuthMethodIcon } from '../../../components/auth/utils/AuthMethodIcon.js';
+/**
+ * How a set of authentication-method choices is arranged.
+ */
+export var AuthMethodChoiceLayout;
+(function (AuthMethodChoiceLayout) {
+    /**
+     * SECONDARY choices beside a method already on screen ("other sign-in methods"). Buttons share rows
+     * and reflow: each asks for a comfortable minimum width and grows to fill its row, so two short labels
+     * sit side by side, a third that does not fit takes a row of its own, and a long translation wraps
+     * inside its button instead of being truncated or overflowing the card.
+     */
+    AuthMethodChoiceLayout["REFLOW"] = "reflow";
+    /**
+     * The PRIMARY choice of a screen ("choose how to verify"). One full-width row per method, icon and
+     * label aligned to the start, so the options scan as a list.
+     */
+    AuthMethodChoiceLayout["LIST"] = "list";
+})(AuthMethodChoiceLayout || (AuthMethodChoiceLayout = {}));
+/**
+ * The buttons that let a person pick an authentication method — one component for the sign-in,
+ * registration, invitation and second-factor screens, which each rendered their own copy.
+ *
+ * ## Why labels WRAP rather than truncate
+ *
+ * A method label is translated, and translations run long ("Anmeldelink per E-Mail"). The button preset
+ * is single-line by default (`whitespace-nowrap`, fixed height), which is right for toolbars and wrong
+ * here: a chooser that cuts a method's name hides what the button does. Both layouts therefore ask the
+ * BUTTON for `ButtonLabelOverflow.WRAP`, which keeps the active theme's height as a minimum — so a
+ * one-line choice is as tall as the submit button beside it in every theme — and lets a long word break.
+ * Sizing is never overridden here: an `h-auto min-h-9` override pinned the default theme's height into
+ * cozy (`h-11`) and dense (`h-8`) and made the choices a different height from their neighbours.
+ *
+ * ## Why REFLOW uses flex-basis and not a grid
+ *
+ * `repeat(auto-fit, minmax(…, 1fr))` gives equal columns but leaves an odd last item alone in the first
+ * column. Flex items with a shared basis that may grow fill every row edge to edge: 2 → one row,
+ * 3 → two plus one full-width, 4 → two rows. The 10rem basis is the width at which an icon plus a short
+ * method name ("Passkey", "Magic link") fits on one line at the body size.
+ *
+ * Each button carries `data-auth-method` so tests and browser drives address a method by its enum value
+ * rather than by translated text.
+ */
+export const AuthMethodChoiceList = ({ methods, labelFor, onSelect, disabled, layout = AuthMethodChoiceLayout.REFLOW, className, }) => {
+    if (methods.length === 0)
+        return null;
+    const isReflow = layout === AuthMethodChoiceLayout.REFLOW;
+    return (_jsx("div", { className: cn(isReflow ? 'flex flex-wrap gap-element' : 'flex flex-col gap-item', className), children: methods.map((method) => (_jsxs(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, labelOverflow: ButtonLabelOverflow.WRAP, className: isReflow ? 'grow basis-[10rem] max-w-full text-center' : 'w-full justify-start text-start', onClick: () => onSelect(method), disabled: disabled, "data-auth-method": method, children: [_jsx(AuthMethodIcon, { method: method }), _jsx("span", { children: labelFor(method) })] }, method))) }));
+};
+//# sourceMappingURL=AuthMethodChoiceList.js.map

package/dist/esm/components/auth/utils/AuthMethodChoiceList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthMethodChoiceList.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthMethodChoiceList.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AACpH,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAN,IAAY,sBAaX;AAbD,WAAY,sBAAsB;IAChC;;;;;OAKG;IACH,2CAAiB,CAAA;IACjB;;;OAGG;IACH,uCAAa,CAAA;AACf,CAAC,EAbW,sBAAsB,KAAtB,sBAAsB,QAajC;AAYD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,sBAAsB,CAAC,MAAM,EACtC,SAAS,GACiB,EAA4B,EAAE;IACxD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,MAAM,QAAQ,GAAG,MAAM,KAAK,sBAAsB,CAAC,MAAM,CAAC;IAE1D,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,wBAAwB,EAAE,SAAS,CAAC,YAC9F,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,MAAC,MAAM,IAEL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,sBAAsB,CAAC,OAAO,EACvC,aAAa,EAAE,mBAAmB,CAAC,IAAI,EACvC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,iCAAiC,EACrG,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC/B,QAAQ,EAAE,QAAQ,sBACA,MAAM,aAExB,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAClC,yBAAO,QAAQ,CAAC,MAAM,CAAC,GAAQ,KAV1B,MAAM,CAWJ,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport type { AuthMethod } from '@wildo-ai/saas-models';\nimport { Button, ButtonLabelOverflow, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { AuthMethodIcon } from '~wildo-frontend-lib/components/auth/utils/AuthMethodIcon';\n\n/**\n * How a set of authentication-method choices is arranged.\n */\nexport enum AuthMethodChoiceLayout {\n  /**\n   * SECONDARY choices beside a method already on screen (\"other sign-in methods\"). Buttons share rows\n   * and reflow: each asks for a comfortable minimum width and grows to fill its row, so two short labels\n   * sit side by side, a third that does not fit takes a row of its own, and a long translation wraps\n   * inside its button instead of being truncated or overflowing the card.\n   */\n  REFLOW = 'reflow',\n  /**\n   * The PRIMARY choice of a screen (\"choose how to verify\"). One full-width row per method, icon and\n   * label aligned to the start, so the options scan as a list.\n   */\n  LIST = 'list',\n}\n\nexport interface AuthMethodChoiceListProps {\n  methods: readonly AuthMethod[];\n  /** The label naming a method, already translated. */\n  labelFor: (method: AuthMethod) => string;\n  onSelect: (method: AuthMethod) => void;\n  disabled?: boolean;\n  layout?: AuthMethodChoiceLayout;\n  className?: string;\n}\n\n/**\n * The buttons that let a person pick an authentication method — one component for the sign-in,\n * registration, invitation and second-factor screens, which each rendered their own copy.\n *\n * ## Why labels WRAP rather than truncate\n *\n * A method label is translated, and translations run long (\"Anmeldelink per E-Mail\"). The button preset\n * is single-line by default (`whitespace-nowrap`, fixed height), which is right for toolbars and wrong\n * here: a chooser that cuts a method's name hides what the button does. Both layouts therefore ask the\n * BUTTON for `ButtonLabelOverflow.WRAP`, which keeps the active theme's height as a minimum — so a\n * one-line choice is as tall as the submit button beside it in every theme — and lets a long word break.\n * Sizing is never overridden here: an `h-auto min-h-9` override pinned the default theme's height into\n * cozy (`h-11`) and dense (`h-8`) and made the choices a different height from their neighbours.\n *\n * ## Why REFLOW uses flex-basis and not a grid\n *\n * `repeat(auto-fit, minmax(…, 1fr))` gives equal columns but leaves an odd last item alone in the first\n * column. Flex items with a shared basis that may grow fill every row edge to edge: 2 → one row,\n * 3 → two plus one full-width, 4 → two rows. The 10rem basis is the width at which an icon plus a short\n * method name (\"Passkey\", \"Magic link\") fits on one line at the body size.\n *\n * Each button carries `data-auth-method` so tests and browser drives address a method by its enum value\n * rather than by translated text.\n */\nexport const AuthMethodChoiceList = ({\n  methods,\n  labelFor,\n  onSelect,\n  disabled,\n  layout = AuthMethodChoiceLayout.REFLOW,\n  className,\n}: AuthMethodChoiceListProps): React.JSX.Element | null => {\n  if (methods.length === 0) return null;\n\n  const isReflow = layout === AuthMethodChoiceLayout.REFLOW;\n\n  return (\n    <div className={cn(isReflow ? 'flex flex-wrap gap-element' : 'flex flex-col gap-item', className)}>\n      {methods.map((method) => (\n        <Button\n          key={method}\n          type=\"button\"\n          variant={ButtonVariants_Variant.OUTLINE}\n          labelOverflow={ButtonLabelOverflow.WRAP}\n          className={isReflow ? 'grow basis-[10rem] max-w-full text-center' : 'w-full justify-start text-start'}\n          onClick={() => onSelect(method)}\n          disabled={disabled}\n          data-auth-method={method}\n        >\n          <AuthMethodIcon method={method} />\n          <span>{labelFor(method)}</span>\n        </Button>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/esm/components/auth/utils/AuthMethodIcon.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { AuthMethod } from '@wildo-ai/saas-models';
+export interface AuthMethodIconProps {
+    method: AuthMethod;
+}
+/**
+ * The icon of one authentication method, resolved through the application's icon registry so a theme
+ * or an application that re-registers `StandardIconReference.KEY` restyles it here too.
+ *
+ * Sized for a button: the button preset owns the glyph's box (`[&_svg]:size-4`) and its gap to the
+ * label, so this renders the registry's small size and adds no spacing of its own. Decorative — the
+ * button's text names the method.
+ */
+export declare const AuthMethodIcon: ({ method }: AuthMethodIconProps) => React.JSX.Element;
+//# sourceMappingURL=AuthMethodIcon.d.ts.map

package/dist/esm/components/auth/utils/AuthMethodIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthMethodIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthMethodIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,YAAY,mBAAmB,KAAG,KAAK,CAAC,GAAG,CAAC,OAG1E,CAAC"}

package/dist/esm/components/auth/utils/AuthMethodIcon.js

@@ -0,0 +1,16 @@
+import { useIconRegistry } from '../../../core/icons/useIconRegistry.js';
+import { IconSize } from '../../../core/icons/icon-registry.frontend.schemas.js';
+import { AUTH_METHOD_ICON_REFERENCES } from '../../../components/auth/methods/auth-method-presentation.js';
+/**
+ * The icon of one authentication method, resolved through the application's icon registry so a theme
+ * or an application that re-registers `StandardIconReference.KEY` restyles it here too.
+ *
+ * Sized for a button: the button preset owns the glyph's box (`[&_svg]:size-4`) and its gap to the
+ * label, so this renders the registry's small size and adds no spacing of its own. Decorative — the
+ * button's text names the method.
+ */
+export const AuthMethodIcon = ({ method }) => {
+    const { renderIcon } = useIconRegistry();
+    return renderIcon(AUTH_METHOD_ICON_REFERENCES[method], { size: IconSize.SM });
+};
+//# sourceMappingURL=AuthMethodIcon.js.map

package/dist/esm/components/auth/utils/AuthMethodIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthMethodIcon.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthMethodIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,+DAA+D,CAAC;AACzF,OAAO,EAAE,2BAA2B,EAAE,MAAM,sEAAsE,CAAC;AAMnH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAuB,EAAqB,EAAE;IACnF,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACzC,OAAO,UAAU,CAAC,2BAA2B,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;AAChF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport type { AuthMethod } from '@wildo-ai/saas-models';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { AUTH_METHOD_ICON_REFERENCES } from '~wildo-frontend-lib/components/auth/methods/auth-method-presentation';\n\nexport interface AuthMethodIconProps {\n  method: AuthMethod;\n}\n\n/**\n * The icon of one authentication method, resolved through the application's icon registry so a theme\n * or an application that re-registers `StandardIconReference.KEY` restyles it here too.\n *\n * Sized for a button: the button preset owns the glyph's box (`[&_svg]:size-4`) and its gap to the\n * label, so this renders the registry's small size and adds no spacing of its own. Decorative — the\n * button's text names the method.\n */\nexport const AuthMethodIcon = ({ method }: AuthMethodIconProps): React.JSX.Element => {\n  const { renderIcon } = useIconRegistry();\n  return renderIcon(AUTH_METHOD_ICON_REFERENCES[method], { size: IconSize.SM });\n};\n"]}

package/dist/esm/components/auth/utils/AuthSecondaryLink.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface AuthSecondaryLinkProps {
+    /** Where the link goes. Omit it for an in-place action and pass `onClick`. */
+    href?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    children: React.ReactNode;
+}
+/**
+ * The navigation a public auth screen offers BESIDE its action — "Back to login", "Sign in",
+ * "Continue", "Try another method".
+ *
+ * It exists because those links were authored as a bare `<Link>` inside a `text-center` div on 21 of
+ * 26 sites, and only 5 wrapped theirs in `<Text>`. A bare link inherits the CARD's font size (16px)
+ * while every piece of body copy beside it is the design system's body size (14px), so the link read
+ * larger than the sentence it belongs to — the defect reported on the sign-in screen, present on
+ * seven more screens.
+ *
+ * Rendering the link inside `Text` is what fixes it: `Text` carries the BODY recipe, and `Link` has no
+ * size of its own (it inherits deliberately — see the link preset), so one component keeps every auth
+ * screen's secondary navigation at body size. A screen that needs a prompt beside the link writes its
+ * own `<Text>` with the link inside, which is the same result by the same rule.
+ */
+export declare const AuthSecondaryLink: ({ href, onClick, children }: AuthSecondaryLinkProps) => React.JSX.Element;
+//# sourceMappingURL=AuthSecondaryLink.d.ts.map

package/dist/esm/components/auth/utils/AuthSecondaryLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthSecondaryLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthSecondaryLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,sBAAsB;IACrC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,GAAI,6BAA6B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAIjG,CAAC"}

package/dist/esm/components/auth/utils/AuthSecondaryLink.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '../../../components/typography/text.js';
+import { Link } from '../../../components/typography/link.js';
+/**
+ * The navigation a public auth screen offers BESIDE its action — "Back to login", "Sign in",
+ * "Continue", "Try another method".
+ *
+ * It exists because those links were authored as a bare `<Link>` inside a `text-center` div on 21 of
+ * 26 sites, and only 5 wrapped theirs in `<Text>`. A bare link inherits the CARD's font size (16px)
+ * while every piece of body copy beside it is the design system's body size (14px), so the link read
+ * larger than the sentence it belongs to — the defect reported on the sign-in screen, present on
+ * seven more screens.
+ *
+ * Rendering the link inside `Text` is what fixes it: `Text` carries the BODY recipe, and `Link` has no
+ * size of its own (it inherits deliberately — see the link preset), so one component keeps every auth
+ * screen's secondary navigation at body size. A screen that needs a prompt beside the link writes its
+ * own `<Text>` with the link inside, which is the same result by the same rule.
+ */
+export const AuthSecondaryLink = ({ href, onClick, children }) => (_jsx(Text, { children: _jsx(Link, { href: href, onClick: onClick, children: children }) }));
+//# sourceMappingURL=AuthSecondaryLink.js.map

package/dist/esm/components/auth/utils/AuthSecondaryLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthSecondaryLink.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthSecondaryLink.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,gDAAgD,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,gDAAgD,CAAC;AAStE;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAA0B,EAAqB,EAAE,CAAC,CAC3G,KAAC,IAAI,cACH,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAQ,GAChD,CACR,CAAC","sourcesContent":["import React from 'react';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { Link } from '~wildo-frontend-lib/components/typography/link';\n\nexport interface AuthSecondaryLinkProps {\n  /** Where the link goes. Omit it for an in-place action and pass `onClick`. */\n  href?: string;\n  onClick?: (event: React.MouseEvent) => void;\n  children: React.ReactNode;\n}\n\n/**\n * The navigation a public auth screen offers BESIDE its action — \"Back to login\", \"Sign in\",\n * \"Continue\", \"Try another method\".\n *\n * It exists because those links were authored as a bare `<Link>` inside a `text-center` div on 21 of\n * 26 sites, and only 5 wrapped theirs in `<Text>`. A bare link inherits the CARD's font size (16px)\n * while every piece of body copy beside it is the design system's body size (14px), so the link read\n * larger than the sentence it belongs to — the defect reported on the sign-in screen, present on\n * seven more screens.\n *\n * Rendering the link inside `Text` is what fixes it: `Text` carries the BODY recipe, and `Link` has no\n * size of its own (it inherits deliberately — see the link preset), so one component keeps every auth\n * screen's secondary navigation at body size. A screen that needs a prompt beside the link writes its\n * own `<Text>` with the link inside, which is the same result by the same rule.\n */\nexport const AuthSecondaryLink = ({ href, onClick, children }: AuthSecondaryLinkProps): React.JSX.Element => (\n  <Text>\n    <Link href={href} onClick={onClick}>{children}</Link>\n  </Text>\n);\n"]}

package/dist/esm/components/auth/utils/AuthSingleFieldFormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthSingleFieldFormLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/utils/AuthSingleFieldFormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yDAAyD,CAAC;AAIzG,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,GAAG,WAAW,CAAC,CAAC;AAE7F,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,WAAW,EACX,eAAe,EACf,UAAU,GACX,EAAE,8BAA8B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoBpD"}
+{"version":3,"file":"AuthSingleFieldFormLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthSingleFieldFormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yDAAyD,CAAC;AAIzG,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,GAAG,WAAW,CAAC,CAAC;AAE7F,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,WAAW,EACX,eAAe,EACf,UAAU,GACX,EAAE,8BAA8B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoBpD"}

package/dist/esm/components/auth/utils/AuthSingleFieldFormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthSingleFieldFormLayout.js","sourceRoot":"","sources":["../../../../../src/components/auth/utils/AuthSingleFieldFormLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,8DAA8D,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAuB,MAAM,yDAAyD,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAWnG;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,EACxC,SAAS,EACT,WAAW,EACX,eAAe,EACf,UAAU,GACqB;IAC/B,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,OAAO,CACL,MAAC,UAAU,eACT,KAAC,SAAS,IAAC,IAAI,EAAE,SAAS,KAAM,UAAU,GAAI,EAE7C,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CACxB,KAAC,KAAK,IAAC,OAAO,EAAC,aAAa,YAC1B,KAAC,gBAAgB,cAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,GAAoB,GAC9D,CACT,EAED,KAAC,YAAY,IACX,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,eAAe,EAChC,SAAS,SACT,IACS,CACd,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { FormLayout } from '~wildo-frontend-lib/components/resources/skeleton/FormLayout';\nimport { FormField, type FormFieldProps } from '~wildo-frontend-lib/components/form/automated/FormField';\nimport { SubmitButton } from '~wildo-frontend-lib/components/resources/skeleton/SubmitButton';\nimport { Alert, AlertDescription } from '~wildo-frontend-lib/components/overlays/containers/alert';\n\ntype SupportedFieldProps = Pick<FormFieldProps, 'type' | 'placeholder' | 'as' | 'autoFocus'>;\n\nexport interface AuthSingleFieldFormLayoutProps {\n  fieldName: string;\n  submitLabel: string;\n  submittingLabel: string;\n  fieldProps?: SupportedFieldProps;\n}\n\n/**\n * Shared auth layout for the common \"single interactive field + submit action\"\n * pattern used by MFA and enrollment steps. The host flow still owns all\n * side-effects (send code, verify, navigate), while the field rendering itself\n * stays on the standard schema-driven `AutomatedForm` / `FormField` seam.\n */\nexport function AuthSingleFieldFormLayout({\n  fieldName,\n  submitLabel,\n  submittingLabel,\n  fieldProps,\n}: AuthSingleFieldFormLayoutProps): React.JSX.Element {\n  const { formState } = useFormContext();\n\n  return (\n    <FormLayout>\n      <FormField name={fieldName} {...fieldProps} />\n\n      {formState.errors.root && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{formState.errors.root.message}</AlertDescription>\n        </Alert>\n      )}\n\n      <SubmitButton\n        label={submitLabel}\n        submittingLabel={submittingLabel}\n        fullWidth\n      />\n    </FormLayout>\n  );\n}\n"]}
+{"version":3,"file":"AuthSingleFieldFormLayout.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/AuthSingleFieldFormLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,8DAA8D,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAuB,MAAM,yDAAyD,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAWnG;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,EACxC,SAAS,EACT,WAAW,EACX,eAAe,EACf,UAAU,GACqB;IAC/B,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,OAAO,CACL,MAAC,UAAU,eACT,KAAC,SAAS,IAAC,IAAI,EAAE,SAAS,KAAM,UAAU,GAAI,EAE7C,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CACxB,KAAC,KAAK,IAAC,OAAO,EAAC,aAAa,YAC1B,KAAC,gBAAgB,cAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,GAAoB,GAC9D,CACT,EAED,KAAC,YAAY,IACX,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,eAAe,EAChC,SAAS,SACT,IACS,CACd,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { FormLayout } from '~wildo-frontend-lib/components/resources/skeleton/FormLayout';\nimport { FormField, type FormFieldProps } from '~wildo-frontend-lib/components/form/automated/FormField';\nimport { SubmitButton } from '~wildo-frontend-lib/components/resources/skeleton/SubmitButton';\nimport { Alert, AlertDescription } from '~wildo-frontend-lib/components/overlays/containers/alert';\n\ntype SupportedFieldProps = Pick<FormFieldProps, 'type' | 'placeholder' | 'as' | 'autoFocus'>;\n\nexport interface AuthSingleFieldFormLayoutProps {\n  fieldName: string;\n  submitLabel: string;\n  submittingLabel: string;\n  fieldProps?: SupportedFieldProps;\n}\n\n/**\n * Shared auth layout for the common \"single interactive field + submit action\"\n * pattern used by MFA and enrollment steps. The host flow still owns all\n * side-effects (send code, verify, navigate), while the field rendering itself\n * stays on the standard schema-driven `AutomatedForm` / `FormField` seam.\n */\nexport function AuthSingleFieldFormLayout({\n  fieldName,\n  submitLabel,\n  submittingLabel,\n  fieldProps,\n}: AuthSingleFieldFormLayoutProps): React.JSX.Element {\n  const { formState } = useFormContext();\n\n  return (\n    <FormLayout>\n      <FormField name={fieldName} {...fieldProps} />\n\n      {formState.errors.root && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{formState.errors.root.message}</AlertDescription>\n        </Alert>\n      )}\n\n      <SubmitButton\n        label={submitLabel}\n        submittingLabel={submittingLabel}\n        fullWidth\n      />\n    </FormLayout>\n  );\n}\n"]}

package/dist/esm/components/auth/utils/CredentialUsernameAutofillField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CredentialUsernameAutofillField.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/utils/CredentialUsernameAutofillField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,oCAAoC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,KAAK,GACN,EAAE,oCAAoC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAiBjE"}
+{"version":3,"file":"CredentialUsernameAutofillField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/CredentialUsernameAutofillField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,oCAAoC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,KAAK,GACN,EAAE,oCAAoC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAiBjE"}

package/dist/esm/components/auth/utils/CredentialUsernameAutofillField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CredentialUsernameAutofillField.js","sourceRoot":"","sources":["../../../../../src/components/auth/utils/CredentialUsernameAutofillField.tsx"],"names":[],"mappings":";AAMA,MAAM,UAAU,+BAA+B,CAAC,EAC9C,KAAK,GACgC;IACrC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,+BACc,8BAA8B,EAC1C,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,UAAU,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAC,SAAS,GACnB,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nexport interface CredentialUsernameAutofillFieldProps {\n  email?: string;\n}\n\nexport function CredentialUsernameAutofillField({\n  email,\n}: CredentialUsernameAutofillFieldProps): React.JSX.Element | null {\n  if (!email) {\n    return null;\n  }\n\n  return (\n    <input\n      data-testid=\"credential-username-autofill\"\n      type=\"email\"\n      name=\"email\"\n      autoComplete=\"username\"\n      value={email}\n      readOnly\n      tabIndex={-1}\n      className=\"sr-only\"\n    />\n  );\n}\n"]}
+{"version":3,"file":"CredentialUsernameAutofillField.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/CredentialUsernameAutofillField.tsx"],"names":[],"mappings":";AAMA,MAAM,UAAU,+BAA+B,CAAC,EAC9C,KAAK,GACgC;IACrC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,+BACc,8BAA8B,EAC1C,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,UAAU,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAC,SAAS,GACnB,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nexport interface CredentialUsernameAutofillFieldProps {\n  email?: string;\n}\n\nexport function CredentialUsernameAutofillField({\n  email,\n}: CredentialUsernameAutofillFieldProps): React.JSX.Element | null {\n  if (!email) {\n    return null;\n  }\n\n  return (\n    <input\n      data-testid=\"credential-username-autofill\"\n      type=\"email\"\n      name=\"email\"\n      autoComplete=\"username\"\n      value={email}\n      readOnly\n      tabIndex={-1}\n      className=\"sr-only\"\n    />\n  );\n}\n"]}

package/dist/esm/components/auth/utils/LabeledDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledDivider.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/utils/LabeledDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,GAAI,sBAAsB,mBAAmB,KAAG,KAAK,CAAC,GAAG,CAAC,OAUpF,CAAC"}
+{"version":3,"file":"LabeledDivider.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/LabeledDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,GAAI,sBAAsB,mBAAmB,KAAG,KAAK,CAAC,GAAG,CAAC,OAUpF,CAAC"}

package/dist/esm/components/auth/utils/LabeledDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledDivider.js","sourceRoot":"","sources":["../../../../../src/components/auth/utils/LabeledDivider.tsx"],"names":[],"mappings":";AASA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAuB,EAAqB,EAAE,CAAC,CAC9F,eACE,SAAS,EAAE,iFACT,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAChC,EAAE,aAEF,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,EAC7D,yBAAO,KAAK,GAAQ,EACpB,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,IACzD,CACP,CAAC","sourcesContent":["import React from 'react';\n\nexport interface LabeledDividerProps {\n  /** Text shown centered between the two rule segments. */\n  label: string;\n  /** Optional extra classes appended to the outer wrapper (e.g. spacing overrides). */\n  className?: string;\n}\n\n/**\n * Horizontal divider with a centered label, where the rule line flanks the\n * text on both sides and is never painted *behind* it.\n *\n * Why not the \"absolute full-width line + background-colored span\" trick:\n * that approach paints one continuous rule across the full width, then relies\n * on an opaque `<span>` whose background exactly matches the container to mask\n * the segment sitting behind the text. The moment the container background\n * differs from the masking color — theme surfaces, cards, translucent panels,\n * any non-`bg-card` host — the rule bleeds through the glyphs. This flex\n * layout instead draws two independent `flex-1` segments with a real gap for\n * the label, so correctness never depends on a background-color match.\n */\nexport const LabeledDivider = ({ label, className }: LabeledDividerProps): React.JSX.Element => (\n  <div\n    className={`my-group flex items-center gap-element text-xs uppercase text-muted-foreground${\n      className ? ` ${className}` : ''\n    }`}\n  >\n    <span className=\"h-px flex-1 bg-border\" aria-hidden=\"true\" />\n    <span>{label}</span>\n    <span className=\"h-px flex-1 bg-border\" aria-hidden=\"true\" />\n  </div>\n);\n"]}
+{"version":3,"file":"LabeledDivider.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/LabeledDivider.tsx"],"names":[],"mappings":";AASA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAuB,EAAqB,EAAE,CAAC,CAC9F,eACE,SAAS,EAAE,iFACT,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAChC,EAAE,aAEF,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,EAC7D,yBAAO,KAAK,GAAQ,EACpB,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,IACzD,CACP,CAAC","sourcesContent":["import React from 'react';\n\nexport interface LabeledDividerProps {\n  /** Text shown centered between the two rule segments. */\n  label: string;\n  /** Optional extra classes appended to the outer wrapper (e.g. spacing overrides). */\n  className?: string;\n}\n\n/**\n * Horizontal divider with a centered label, where the rule line flanks the\n * text on both sides and is never painted *behind* it.\n *\n * Why not the \"absolute full-width line + background-colored span\" trick:\n * that approach paints one continuous rule across the full width, then relies\n * on an opaque `<span>` whose background exactly matches the container to mask\n * the segment sitting behind the text. The moment the container background\n * differs from the masking color — theme surfaces, cards, translucent panels,\n * any non-`bg-card` host — the rule bleeds through the glyphs. This flex\n * layout instead draws two independent `flex-1` segments with a real gap for\n * the label, so correctness never depends on a background-color match.\n */\nexport const LabeledDivider = ({ label, className }: LabeledDividerProps): React.JSX.Element => (\n  <div\n    className={`my-group flex items-center gap-element text-xs uppercase text-muted-foreground${\n      className ? ` ${className}` : ''\n    }`}\n  >\n    <span className=\"h-px flex-1 bg-border\" aria-hidden=\"true\" />\n    <span>{label}</span>\n    <span className=\"h-px flex-1 bg-border\" aria-hidden=\"true\" />\n  </div>\n);\n"]}

package/dist/esm/components/auth/utils/OAuthProvidersSection.d.ts

@@ -32,6 +32,16 @@ export interface OAuthProvidersSectionProps {
     dividerLabel?: string;
     /** Whether to show the "or" divider below the buttons */
     showDivider?: boolean;
+    /**
+     * Withhold the buttons although nothing is loading.
+     *
+     * Distinct from `isLoading` on purpose: they disable the same control for opposite reasons, and a
+     * caller that conflated them would tell a person a request is in flight when what is true is that
+     * they have not yet done something. Registration passes it when the application requires an
+     * affirmative act of document acceptance the person has not made (#1258) — the buttons start an
+     * account, so they are one of the acts the mode governs.
+     */
+    disabled?: boolean;
 }
 /**
  * Shared OAuth2 SSO provider buttons + optional "or" divider.
@@ -42,5 +52,5 @@ export interface OAuthProvidersSectionProps {
  * design system's focus ring, disabled state, motion transitions, touch
  * targets, and gesture physics — while satisfying OAuth brand guidelines.
  */
-export declare const OAuthProvidersSection: ({ providers, onProviderClick, isLoading, continueWithLabel, translate, dividerLabel, showDivider, }: OAuthProvidersSectionProps) => React.JSX.Element | null;
+export declare const OAuthProvidersSection: ({ providers, onProviderClick, isLoading, disabled, continueWithLabel, translate, dividerLabel, showDivider, }: OAuthProvidersSectionProps) => React.JSX.Element | null;
 //# sourceMappingURL=OAuthProvidersSection.d.ts.map

package/dist/esm/components/auth/utils/OAuthProvidersSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthProvidersSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/utils/OAuthProvidersSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA2ChH,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,EAAE,IAAI,CAAC,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,CAS1F,CAAC;AAEF,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,6BAA6B,EAAE,CAAC;IAC3C,eAAe,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,qGAQnC,0BAA0B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqCnD,CAAC"}
+{"version":3,"file":"OAuthProvidersSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/OAuthProvidersSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA6ChH,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,EAAE,IAAI,CAAC,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,CAS1F,CAAC;AAEF,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,6BAA6B,EAAE,CAAC;IAC3C,eAAe,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,+GASnC,0BAA0B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqCnD,CAAC"}

package/dist/esm/components/auth/utils/OAuthProvidersSection.js

@@ -13,7 +13,9 @@ import { resolveOAuthProviderDisplayLabel } from './oauth-provider-display-label
 export const SSO_PROVIDER_BRAND_META = {
     google: {
         label: 'Google',
-        brandClass: 'bg-white hover:bg-gray-50 border border-gray-300 text-gray-700',
+        // No palette override: the button is the theme's outline button, like the other sign-in methods, and
+        // only the logo carries the brand. A light-only palette here fought the theme in dark mode.
+        brandClass: '',
         icon: (_jsxs("svg", { className: "size-5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }), _jsx("path", { 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", fill: "#34A853" }), _jsx("path", { 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", fill: "#FBBC05" }), _jsx("path", { 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", fill: "#EA4335" })] })),
     },
     microsoft: {
@@ -46,7 +48,7 @@ export const DEFAULT_PROVIDER_BRAND = {
  * design system's focus ring, disabled state, motion transitions, touch
  * targets, and gesture physics — while satisfying OAuth brand guidelines.
  */
-export const OAuthProvidersSection = ({ providers, onProviderClick, isLoading, continueWithLabel, translate, dividerLabel, showDivider, }) => {
+export const OAuthProvidersSection = ({ providers, onProviderClick, isLoading, disabled = false, continueWithLabel, translate, dividerLabel, showDivider, }) => {
     if (providers.length === 0)
         return null;
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-item", children: providers.map(({ key, providerRef, displayName, displayNameLabelKey }) => {
@@ -60,7 +62,7 @@ export const OAuthProvidersSection = ({ providers, onProviderClick, isLoading, c
                     });
                     const brandClass = brand?.brandClass ?? DEFAULT_PROVIDER_BRAND.brandClass;
                     const icon = brand?.icon ?? DEFAULT_PROVIDER_BRAND.icon;
-                    return (_jsxs(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, disabled: isLoading, onClick: () => onProviderClick(providerRef), className: `w-full ${brandClass}`, children: [icon, _jsx("span", { children: continueWithLabel.replace('{provider}', label) })] }, key));
+                    return (_jsxs(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, disabled: isLoading || disabled, onClick: () => onProviderClick(providerRef), className: `w-full ${brandClass}`, children: [icon, _jsx("span", { children: continueWithLabel.replace('{provider}', label) })] }, key));
                 }) }), showDivider && dividerLabel && _jsx(LabeledDivider, { label: dividerLabel })] }));
 };
 //# sourceMappingURL=OAuthProvidersSection.js.map

package/dist/esm/components/auth/utils/OAuthProvidersSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthProvidersSection.js","sourceRoot":"","sources":["../../../../../src/components/auth/utils/OAuthProvidersSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { LabeledDivider } from '~wildo-frontend-lib/components/auth/utils/LabeledDivider';\nimport { resolveOAuthProviderDisplayLabel } from './oauth-provider-display-label.frontend.utils';\n\n/**\n * Well-known SSO provider metadata for rendering branded buttons.\n * Keys match the providerRef values from the external-connectors catalog.\n *\n * DESIGN_SYSTEM_GRANDFATHER: Raw Tailwind colors (bg-white, bg-gray-50, text-gray-700, etc.)\n * are intentional — OAuth providers require brand-mandated colors. DO NOT replace with\n * semantic tokens. See design-system-theme-integration-tasks.md §4.VERIFY.\n */\nexport const SSO_PROVIDER_BRAND_META: Record<string, { label: string; brandClass: string; icon: React.ReactNode }> = {\n  google: {\n    label: 'Google',\n    brandClass: 'bg-white hover:bg-gray-50 border border-gray-300 text-gray-700',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"#4285F4\"/>\n        <path 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\" fill=\"#34A853\"/>\n        <path 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\" fill=\"#FBBC05\"/>\n        <path 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\" fill=\"#EA4335\"/>\n      </svg>\n    ),\n  },\n  microsoft: {\n    label: 'Microsoft',\n    brandClass: 'bg-[#2F2F2F] hover:bg-[#404040] text-white',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 21 21\" aria-hidden=\"true\">\n        <rect x=\"1\" y=\"1\" width=\"9\" height=\"9\" fill=\"#F25022\"/>\n        <rect x=\"11\" y=\"1\" width=\"9\" height=\"9\" fill=\"#7FBA00\"/>\n        <rect x=\"1\" y=\"11\" width=\"9\" height=\"9\" fill=\"#00A4EF\"/>\n        <rect x=\"11\" y=\"11\" width=\"9\" height=\"9\" fill=\"#FFB900\"/>\n      </svg>\n    ),\n  },\n  github: {\n    label: 'GitHub',\n    brandClass: 'bg-[#24292e] hover:bg-[#2f363d] text-white',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path 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 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.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 0 0 22 12.017C22 6.484 17.522 2 12 2z\"/>\n      </svg>\n    ),\n  },\n  apple: {\n    label: 'Apple',\n    brandClass: 'bg-black hover:bg-gray-900 text-white',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.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.09zM12.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\"/>\n      </svg>\n    ),\n  },\n};\n\n/** Fallback brand metadata for unknown providers — uses semantic design tokens */\nexport const DEFAULT_PROVIDER_BRAND: Omit<(typeof SSO_PROVIDER_BRAND_META)[string], 'label'> = {\n  brandClass: 'bg-muted hover:bg-muted/80 border border-border text-foreground',\n  icon: (\n    <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n      <path d=\"M2 12h20\"/>\n      <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/>\n    </svg>\n  ),\n};\n\nexport interface OAuthProviderButtonDefinition {\n  key: string;\n  providerRef: string;\n  displayName?: string;\n  displayNameLabelKey?: string;\n}\n\nexport interface OAuthProvidersSectionProps {\n  providers: OAuthProviderButtonDefinition[];\n  onProviderClick: (providerRef: string) => void;\n  isLoading: boolean;\n  /** Label template for provider buttons, e.g. \"Continue with {provider}\" */\n  continueWithLabel: string;\n  /** Generic i18n translator used for provider label keys. */\n  translate?: (key: string) => string;\n  /** Label for the \"or\" divider between SSO and password form */\n  dividerLabel?: string;\n  /** Whether to show the \"or\" divider below the buttons */\n  showDivider?: boolean;\n}\n\n/**\n * Shared OAuth2 SSO provider buttons + optional \"or\" divider.\n * Used by both login and registration pages.\n *\n * Uses the design system <Button> component (variant={ButtonVariants_Variant.OUTLINE}) as the base,\n * with brand-specific color overrides via className. This preserves the\n * design system's focus ring, disabled state, motion transitions, touch\n * targets, and gesture physics — while satisfying OAuth brand guidelines.\n */\nexport const OAuthProvidersSection = ({\n  providers,\n  onProviderClick,\n  isLoading,\n  continueWithLabel,\n  translate,\n  dividerLabel,\n  showDivider,\n}: OAuthProvidersSectionProps): React.JSX.Element | null => {\n  if (providers.length === 0) return null;\n\n  return (\n    <>\n      <div className=\"space-y-item\">\n        {providers.map(({ key, providerRef, displayName, displayNameLabelKey }) => {\n          const brand = SSO_PROVIDER_BRAND_META[providerRef] ?? null;\n          const label = resolveOAuthProviderDisplayLabel({\n            providerRef,\n            displayName,\n            displayNameLabelKey,\n            brandLabel: brand?.label,\n            translate,\n          });\n          const brandClass = brand?.brandClass ?? DEFAULT_PROVIDER_BRAND.brandClass;\n          const icon = brand?.icon ?? DEFAULT_PROVIDER_BRAND.icon;\n\n          return (\n            <Button\n              key={key}\n              type=\"button\"\n              variant={ButtonVariants_Variant.OUTLINE}\n              disabled={isLoading}\n              onClick={() => onProviderClick(providerRef)}\n              className={`w-full ${brandClass}`}\n            >\n              {icon}\n              <span>{continueWithLabel.replace('{provider}', label)}</span>\n            </Button>\n          );\n        })}\n      </div>\n\n      {showDivider && dividerLabel && <LabeledDivider label={dividerLabel} />}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"OAuthProvidersSection.js","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/OAuthProvidersSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { LabeledDivider } from '~wildo-frontend-lib/components/auth/utils/LabeledDivider';\nimport { resolveOAuthProviderDisplayLabel } from './oauth-provider-display-label.frontend.utils';\n\n/**\n * Well-known SSO provider metadata for rendering branded buttons.\n * Keys match the providerRef values from the external-connectors catalog.\n *\n * DESIGN_SYSTEM_GRANDFATHER: Raw Tailwind colors (bg-white, bg-gray-50, text-gray-700, etc.)\n * are intentional — OAuth providers require brand-mandated colors. DO NOT replace with\n * semantic tokens. See design-system-theme-integration-tasks.md §4.VERIFY.\n */\nexport const SSO_PROVIDER_BRAND_META: Record<string, { label: string; brandClass: string; icon: React.ReactNode }> = {\n  google: {\n    label: 'Google',\n    // No palette override: the button is the theme's outline button, like the other sign-in methods, and\n    // only the logo carries the brand. A light-only palette here fought the theme in dark mode.\n    brandClass: '',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"#4285F4\"/>\n        <path 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\" fill=\"#34A853\"/>\n        <path 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\" fill=\"#FBBC05\"/>\n        <path 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\" fill=\"#EA4335\"/>\n      </svg>\n    ),\n  },\n  microsoft: {\n    label: 'Microsoft',\n    brandClass: 'bg-[#2F2F2F] hover:bg-[#404040] text-white',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 21 21\" aria-hidden=\"true\">\n        <rect x=\"1\" y=\"1\" width=\"9\" height=\"9\" fill=\"#F25022\"/>\n        <rect x=\"11\" y=\"1\" width=\"9\" height=\"9\" fill=\"#7FBA00\"/>\n        <rect x=\"1\" y=\"11\" width=\"9\" height=\"9\" fill=\"#00A4EF\"/>\n        <rect x=\"11\" y=\"11\" width=\"9\" height=\"9\" fill=\"#FFB900\"/>\n      </svg>\n    ),\n  },\n  github: {\n    label: 'GitHub',\n    brandClass: 'bg-[#24292e] hover:bg-[#2f363d] text-white',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path 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 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.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 0 0 22 12.017C22 6.484 17.522 2 12 2z\"/>\n      </svg>\n    ),\n  },\n  apple: {\n    label: 'Apple',\n    brandClass: 'bg-black hover:bg-gray-900 text-white',\n    icon: (\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.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.09zM12.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\"/>\n      </svg>\n    ),\n  },\n};\n\n/** Fallback brand metadata for unknown providers — uses semantic design tokens */\nexport const DEFAULT_PROVIDER_BRAND: Omit<(typeof SSO_PROVIDER_BRAND_META)[string], 'label'> = {\n  brandClass: 'bg-muted hover:bg-muted/80 border border-border text-foreground',\n  icon: (\n    <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n      <path d=\"M2 12h20\"/>\n      <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/>\n    </svg>\n  ),\n};\n\nexport interface OAuthProviderButtonDefinition {\n  key: string;\n  providerRef: string;\n  displayName?: string;\n  displayNameLabelKey?: string;\n}\n\nexport interface OAuthProvidersSectionProps {\n  providers: OAuthProviderButtonDefinition[];\n  onProviderClick: (providerRef: string) => void;\n  isLoading: boolean;\n  /** Label template for provider buttons, e.g. \"Continue with {provider}\" */\n  continueWithLabel: string;\n  /** Generic i18n translator used for provider label keys. */\n  translate?: (key: string) => string;\n  /** Label for the \"or\" divider between SSO and password form */\n  dividerLabel?: string;\n  /** Whether to show the \"or\" divider below the buttons */\n  showDivider?: boolean;\n  /**\n   * Withhold the buttons although nothing is loading.\n   *\n   * Distinct from `isLoading` on purpose: they disable the same control for opposite reasons, and a\n   * caller that conflated them would tell a person a request is in flight when what is true is that\n   * they have not yet done something. Registration passes it when the application requires an\n   * affirmative act of document acceptance the person has not made (#1258) — the buttons start an\n   * account, so they are one of the acts the mode governs.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Shared OAuth2 SSO provider buttons + optional \"or\" divider.\n * Used by both login and registration pages.\n *\n * Uses the design system <Button> component (variant={ButtonVariants_Variant.OUTLINE}) as the base,\n * with brand-specific color overrides via className. This preserves the\n * design system's focus ring, disabled state, motion transitions, touch\n * targets, and gesture physics — while satisfying OAuth brand guidelines.\n */\nexport const OAuthProvidersSection = ({\n  providers,\n  onProviderClick,\n  isLoading,\n  disabled = false,\n  continueWithLabel,\n  translate,\n  dividerLabel,\n  showDivider,\n}: OAuthProvidersSectionProps): React.JSX.Element | null => {\n  if (providers.length === 0) return null;\n\n  return (\n    <>\n      <div className=\"space-y-item\">\n        {providers.map(({ key, providerRef, displayName, displayNameLabelKey }) => {\n          const brand = SSO_PROVIDER_BRAND_META[providerRef] ?? null;\n          const label = resolveOAuthProviderDisplayLabel({\n            providerRef,\n            displayName,\n            displayNameLabelKey,\n            brandLabel: brand?.label,\n            translate,\n          });\n          const brandClass = brand?.brandClass ?? DEFAULT_PROVIDER_BRAND.brandClass;\n          const icon = brand?.icon ?? DEFAULT_PROVIDER_BRAND.icon;\n\n          return (\n            <Button\n              key={key}\n              type=\"button\"\n              variant={ButtonVariants_Variant.OUTLINE}\n              disabled={isLoading || disabled}\n              onClick={() => onProviderClick(providerRef)}\n              className={`w-full ${brandClass}`}\n            >\n              {icon}\n              <span>{continueWithLabel.replace('{provider}', label)}</span>\n            </Button>\n          );\n        })}\n      </div>\n\n      {showDivider && dividerLabel && <LabeledDivider label={dividerLabel} />}\n    </>\n  );\n};\n"]}

package/dist/esm/components/auth/utils/PasswordStrengthIndicator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PasswordPolicyRules } from '@wildo-ai/saas-models';
+import type { PasswordPolicyRules, PasswordBlocklistContext } from '@wildo-ai/saas-models';
 export declare const DEFAULT_PASSWORD_POLICY: PasswordPolicyRules;
 interface PasswordStrengthIndicatorProps {
     /** The password field name to watch from the surrounding form context */
@@ -8,6 +8,13 @@ interface PasswordStrengthIndicatorProps {
     policy: PasswordPolicyRules;
     /** Translation function for policy check labels */
     t: (key: string) => string;
+    /**
+     * What an attacker would guess about THIS application and THIS person — the service's own name and
+     * the user's own email address. Optional, because the bundled common-password list is the floor and
+     * runs either way; a surface that KNOWS the address (registration, invitation, reset) should pass it,
+     * since those two guesses come before anything in the list.
+     */
+    blocklistContext?: PasswordBlocklistContext;
 }
 export declare const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>;
 export {};

package/dist/esm/components/auth/utils/PasswordStrengthIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordStrengthIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/auth/utils/PasswordStrengthIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGjE,eAAO,MAAM,uBAAuB,EAAE,mBAQrC,CAAC;AAEF,UAAU,8BAA8B;IACtC,yEAAyE;IACzE,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,EAAE,mBAAmB,CAAC;IAC5B,mDAAmD;IACnD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAiD9E,CAAC"}
+{"version":3,"file":"PasswordStrengthIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/auth/utils/PasswordStrengthIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAI3F,eAAO,MAAM,uBAAuB,EAAE,mBAQrC,CAAC;AAEF,UAAU,8BAA8B;IACtC,yEAAyE;IACzE,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,EAAE,mBAAmB,CAAC;IAC5B,mDAAmD;IACnD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;CAC7C;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAyD9E,CAAC"}

package/dist/esm/components/auth/utils/PasswordStrengthIndicator.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { isPasswordBlocklisted } from '@wildo-ai/saas-models';
 import { PasswordPolicyLabel } from '@wildo-ai/presets-components-models';
 export const DEFAULT_PASSWORD_POLICY = {
-    minLength: 8,
+    minLength: 15,
     maxLength: 128,
-    requireUppercase: true,
-    requireLowercase: true,
-    requireNumbers: true,
+    requireUppercase: false,
+    requireLowercase: false,
+    requireNumbers: false,
     requireSpecialChars: false,
     expiryDays: 0,
 };
-export const PasswordStrengthIndicator = ({ fieldName, policy, t }) => {
+export const PasswordStrengthIndicator = ({ fieldName, policy, t, blocklistContext }) => {
     const { watch } = useFormContext();
     const password = watch(fieldName) || '';
     const checks = useMemo(() => {
@@ -38,8 +39,16 @@ export const PasswordStrengthIndicator = ({ fieldName, policy, t }) => {
         if (policy.requireSpecialChars) {
             items.push({ label: t(PasswordPolicyLabel.SPECIAL_CHAR), passed: /[^A-Za-z0-9]/.test(password) });
         }
+        // Unconditional, matching AuthUtils.validatePasswordAgainstPolicy: the blocklist is the one rule
+        // NIST SP 800-63B-4 §3.1.1.2 states with no configurable half, so an application cannot switch it
+        // off and this item is never absent. It is also the only item here that a longer password does not
+        // fix, which is why it is worth showing BEFORE the form is submitted rather than as a refusal after.
+        items.push({
+            label: t(PasswordPolicyLabel.BLOCKLISTED),
+            passed: !isPasswordBlocklisted(password, blocklistContext),
+        });
         return items;
-    }, [password, policy, t]);
+    }, [password, policy, t, blocklistContext]);
     if (!password || checks.length === 0)
         return null;
     return (_jsx("ul", { className: "space-y-1 text-xs mt-item-xs", children: checks.map((check, i) => (_jsxs("li", { className: `flex items-center gap-1.5 ${check.passed ? 'text-success' : 'text-muted-foreground'}`, children: [check.passed ? (_jsx("svg", { className: "w-3.5 h-3.5 shrink-0", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) : (_jsx("svg", { className: "w-3.5 h-3.5 shrink-0", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("circle", { cx: "10", cy: "10", r: "3" }) })), _jsx("span", { children: check.label })] }, i))) }));