@ory/elements-react 1.0.0-next.30 → 1.0.0-next.32

package/dist/theme/default/index.mjs

@@ -46,6 +46,8 @@ import { useIntl } from "react-intl";
 
 // src/theme/default/utils/url.ts
 function restartFlowUrl(flow, fallback) {
+  if (flow.requested_aal === "aal2")
+    return appendRefresh(appendAal(fallback, "aal1"), true);
   return flow.request_url || appendReturnTo(fallback, flow.return_to);
 }
 function initFlowUrl(sdkUrl, flowType, flow) {
@@ -75,48 +77,216 @@ function appendReturnTo(url, returnTo) {
   urlObj.searchParams.set("return_to", returnTo);
   return urlObj.toString();
 }
+function appendAal(url, aal) {
+  const urlObj = new URL(url);
+  urlObj.searchParams.set("aal", aal);
+  return urlObj.toString();
+}
+function appendRefresh(url, refresh) {
+  const urlObj = new URL(url);
+  urlObj.searchParams.set("refresh", refresh ? "true" : "false");
+  return urlObj.toString();
+}
+
+// src/util/ui/index.ts
+import { UiNodeGroupEnum as UiNodeGroupEnum2 } from "@ory/client-fetch";
+import { useMemo } from "react";
+
+// src/context/component.tsx
+import {
+  isUiNodeInputAttributes,
+  UiNodeGroupEnum
+} from "@ory/client-fetch";
+import { createContext, useContext } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ComponentContext = createContext({
+  components: null,
+  // fine because we throw an error if it's not provided
+  nodeSorter: () => 0,
+  groupSorter: () => 0
+});
+function useComponents() {
+  const ctx = useContext(ComponentContext);
+  if (!ctx) {
+    throw new Error("useComponents must be used within a ComponentProvider");
+  }
+  return ctx.components;
+}
+var defaultGroupOrder = [
+  UiNodeGroupEnum.Default,
+  UiNodeGroupEnum.Profile,
+  UiNodeGroupEnum.Password,
+  UiNodeGroupEnum.Oidc,
+  UiNodeGroupEnum.Code,
+  UiNodeGroupEnum.LookupSecret,
+  UiNodeGroupEnum.Passkey,
+  UiNodeGroupEnum.Webauthn,
+  UiNodeGroupEnum.Totp
+];
+
+// src/util/ui/index.ts
+function triggerToWindowCall(trigger) {
+  if (!trigger) {
+    return;
+  }
+  const fn = triggerToFunction(trigger);
+  if (fn) {
+    fn();
+    return;
+  }
+  let i = 0;
+  const ms = 100;
+  const interval = setInterval(() => {
+    i++;
+    if (i > 100) {
+      clearInterval(interval);
+      throw new Error(
+        "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console."
+      );
+    }
+    const fn2 = triggerToFunction(trigger);
+    if (fn2) {
+      clearInterval(interval);
+      return fn2();
+    }
+  }, ms);
+  return;
+}
+function triggerToFunction(trigger) {
+  if (typeof window === "undefined") {
+    console.debug(
+      "The Ory SDK is missing a required function: window is undefined."
+    );
+    return void 0;
+  }
+  const typedWindow = window;
+  if (!(trigger in typedWindow) || !typedWindow[trigger]) {
+    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
+    return void 0;
+  }
+  const triggerFn = typedWindow[trigger];
+  if (typeof triggerFn !== "function") {
+    console.debug(
+      `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
+    );
+    return void 0;
+  }
+  return triggerFn;
+}
+function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
+  var _a;
+  const groups = {};
+  for (const node of nodes) {
+    if (node.type === "script") {
+      continue;
+    }
+    const groupNodes = (_a = groups[node.group]) != null ? _a : [];
+    groupNodes.push(node);
+    groups[node.group] = groupNodes;
+  }
+  return Object.values(UiNodeGroupEnum2).filter((group) => {
+    var _a2;
+    return (_a2 = groups[group]) == null ? void 0 : _a2.length;
+  }).filter(
+    (group) => ![
+      UiNodeGroupEnum2.Default,
+      UiNodeGroupEnum2.IdentifierFirst,
+      UiNodeGroupEnum2.Profile,
+      UiNodeGroupEnum2.Captcha,
+      ...excludeAuthMethods
+    ].includes(group)
+  );
+}
 
 // src/theme/default/components/card/footer.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function DefaultCardFooter() {
   const { flowType } = useOryFlow();
   switch (flowType) {
     case FlowType.Login:
-      return /* @__PURE__ */ jsx4(LoginCardFooter, {});
+      return /* @__PURE__ */ jsx5(LoginCardFooter, {});
     case FlowType.Registration:
-      return /* @__PURE__ */ jsx4(RegistrationCardFooter, {});
+      return /* @__PURE__ */ jsx5(RegistrationCardFooter, {});
     case FlowType.Recovery:
-      return /* @__PURE__ */ jsx4(RecoveryCardFooter, {});
+      return /* @__PURE__ */ jsx5(RecoveryCardFooter, {});
     case FlowType.Verification:
-      return /* @__PURE__ */ jsx4(VerificationCardFooter, {});
+      return /* @__PURE__ */ jsx5(VerificationCardFooter, {});
     default:
       return null;
   }
 }
 function LoginCardFooter() {
-  const { config, formState, flow } = useOryFlow();
+  const { config, formState, flow, flowType } = useOryFlow();
   const intl = useIntl();
-  if (!config.project.registration_enabled || formState.current !== "provide_identifier") {
+  const authMethods = nodesToAuthMethodGroups(flow.ui.nodes);
+  if (flowType === FlowType.Login && flow.refresh) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
-    intl.formatMessage({
-      id: "login.registration-label",
-      defaultMessage: "No account?"
-    }),
-    " ",
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    formState.current === "provide_identifier" && /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
+      intl.formatMessage({
+        id: "login.registration-label",
+        defaultMessage: "No account?"
+      }),
+      " ",
+      /* @__PURE__ */ jsx5(
+        "a",
+        {
+          className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          href: initFlowUrl(config.sdk.url, "registration", flow),
+          "data-testid": "ory/screen/registration/action/login",
+          children: intl.formatMessage({
+            id: "login.registration-button",
+            defaultMessage: "Sign up"
+          })
+        }
+      )
+    ] }),
+    authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ jsx5("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx5(
       "a",
       {
         className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
-        href: initFlowUrl(config.sdk.url, "registration", flow),
-        "data-testid": "ory/screen/registration/action/login",
+        href: "",
+        "data-testid": "ory/screen/login/mfa/action/selectMethod",
         children: intl.formatMessage({
-          id: "login.registration-button",
-          defaultMessage: "Sign up"
+          id: "login.2fa.method.go-back"
         })
       }
-    )
+    ) }),
+    authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ jsx5("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx5(
+      "a",
+      {
+        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+        href: restartFlowUrl(
+          flow,
+          `${config.sdk.url}/self-service/${flowType}/browser`
+        ),
+        "data-testid": "ory/screen/login/mfa/action/reauthenticate",
+        children: intl.formatMessage({
+          id: "login.2fa.go-back.link"
+        })
+      }
+    ) }),
+    flowType === FlowType.Login && flow.requested_aal === "aal2" && (formState.current === "select_method" || authMethods.length === 0) && /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
+      intl.formatMessage({
+        id: "login.2fa.go-back"
+      }),
+      " ",
+      /* @__PURE__ */ jsx5(
+        "a",
+        {
+          className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          href: restartFlowUrl(
+            flow,
+            `${config.sdk.url}/self-service/${flowType}/browser`
+          ),
+          "data-testid": "ory/screen/login/mfa/action/reauthenticate",
+          children: intl.formatMessage({
+            id: "login.2fa.go-back.link"
+          })
+        }
+      )
+    ] })
   ] });
 }
 function findScreenSelectionButton(nodes) {
@@ -135,14 +305,19 @@ function RegistrationCardFooter() {
   function handleScreenSelection() {
     setValue("method", "profile");
     if (screenSelectionNode) {
-      setValue("screen", "credential-selection");
+      setValue(
+        screenSelectionNode.attributes.name,
+        screenSelectionNode.attributes.value
+      );
     }
   }
-  return /* @__PURE__ */ jsx4("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ jsx4(Fragment, { children: screenSelectionNode && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ jsx5(Fragment, { children: screenSelectionNode && /* @__PURE__ */ jsx5(
     "button",
     {
       className: "font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover",
       type: "submit",
+      name: screenSelectionNode.attributes.name,
+      value: screenSelectionNode.attributes.value,
       onClick: handleScreenSelection,
       children: intl.formatMessage({
         id: "card.footer.select-another-method",
@@ -155,7 +330,7 @@ function RegistrationCardFooter() {
       defaultMessage: "Already have an account?"
     }),
     " ",
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "a",
       {
         className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
@@ -177,12 +352,12 @@ function VerificationCardFooter() {
 }
 
 // src/theme/default/components/card/header.tsx
-import { useComponents, useOryFlow as useOryFlow3 } from "@ory/elements-react";
+import { useComponents as useComponents2, useOryFlow as useOryFlow3 } from "@ory/elements-react";
 
 // src/theme/default/utils/constructCardHeader.ts
 import {
   FlowType as FlowType2,
-  isUiNodeInputAttributes
+  isUiNodeInputAttributes as isUiNodeInputAttributes2
 } from "@ory/client-fetch";
 import { useIntl as useIntl2 } from "react-intl";
 function joinWithCommaOr(list, orText = "or") {
@@ -196,7 +371,7 @@ function joinWithCommaOr(list, orText = "or") {
   }
 }
 function useCardHeaderText(container, opts) {
-  var _a, _b;
+  var _a, _b, _c;
   const nodes = container.nodes;
   const intl = useIntl2();
   switch (opts.flowType) {
@@ -310,7 +485,7 @@ function useCardHeaderText(container, opts) {
   }
   if (nodes.find((node) => node.group === "identifier_first")) {
     const identifier = nodes.find(
-      (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.name.startsWith("identifier") && node.attributes.type !== "hidden"
+      (node) => isUiNodeInputAttributes2(node.attributes) && node.attributes.name.startsWith("identifier") && node.attributes.type !== "hidden"
     );
     if (identifier) {
       parts.push(
@@ -341,6 +516,15 @@ function useCardHeaderText(container, opts) {
             }
           )
         };
+      } else if (opts.flow.requested_aal === "aal2") {
+        return {
+          title: intl.formatMessage({
+            id: "login.title-aal2"
+          }),
+          description: intl.formatMessage({
+            id: ((_c = opts.formState) == null ? void 0 : _c.current) === "method_active" ? `login.${opts.formState.method}.subtitle` : "login.subtitle-aal2"
+          })
+        };
       }
       return {
         title: intl.formatMessage({
@@ -388,10 +572,10 @@ import { useOryFlow as useOryFlow2 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/arrow-left.svg
 import * as React3 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var SvgArrowLeft = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx5("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.325h14m-14 0 6 6m-6-6 6-6" }) });
+  return /* @__PURE__ */ jsx6("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx6("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.325h14m-14 0 6 6m-6-6 6-6" }) });
 };
 var arrow_left_default = SvgArrowLeft;
 
@@ -405,13 +589,16 @@ function omit(obj, keys) {
 }
 
 // src/theme/default/components/card/current-identifier-button.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function DefaultCurrentIdentifierButton() {
   const { flow, flowType, config, formState } = useOryFlow2();
   const ui = flow.ui;
   if (formState.current === "provide_identifier") {
     return null;
   }
+  if (flowType === FlowType3.Login && flow.requested_aal === "aal2") {
+    return null;
+  }
   const nodeBackButton = getBackButtonNode(flowType, ui.nodes);
   if ((nodeBackButton == null ? void 0 : nodeBackButton.attributes.node_type) !== "input" || !nodeBackButton.attributes.value) {
     return null;
@@ -425,7 +612,7 @@ function DefaultCurrentIdentifierButton() {
     "node_type",
     "maxlength"
   ]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "a",
     {
       className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
@@ -434,7 +621,7 @@ function DefaultCurrentIdentifierButton() {
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
       "data-testid": "ory/screen/login/action/restart",
       children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           arrow_left_default,
           {
             size: 16,
@@ -442,7 +629,7 @@ function DefaultCurrentIdentifierButton() {
             className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.attributes.value })
+        /* @__PURE__ */ jsx7("span", { className: "overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.attributes.value })
       ] })
     }
   );
@@ -479,47 +666,47 @@ function guessRegistrationBackButton(uiNodes) {
 }
 
 // src/theme/default/components/card/header.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function InnerCardHeader({ title, text }) {
-  const { Card } = useComponents();
+  const { Card } = useComponents2();
   return /* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-8 antialiased", children: [
-    /* @__PURE__ */ jsx7(Card.Logo, {}),
+    /* @__PURE__ */ jsx8(Card.Logo, {}),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx7("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
-      /* @__PURE__ */ jsx7("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
-      /* @__PURE__ */ jsx7(DefaultCurrentIdentifierButton, {})
+      /* @__PURE__ */ jsx8("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx8("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
+      /* @__PURE__ */ jsx8(DefaultCurrentIdentifierButton, {})
     ] })
   ] });
 }
 function DefaultCardHeader() {
   const context = useOryFlow3();
   const { title, description } = useCardHeaderText(context.flow.ui, context);
-  return /* @__PURE__ */ jsx7(InnerCardHeader, { title, text: description });
+  return /* @__PURE__ */ jsx8(InnerCardHeader, { title, text: description });
 }
 
 // src/theme/default/components/card/logo.tsx
 import { useOryFlow as useOryFlow4 } from "@ory/elements-react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function DefaultCardLogo() {
   const flow = useOryFlow4();
   if (flow.config.logoUrl) {
-    return /* @__PURE__ */ jsx8("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
+    return /* @__PURE__ */ jsx9("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
   }
-  return /* @__PURE__ */ jsx8("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
+  return /* @__PURE__ */ jsx9("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
 }
 
 // src/theme/default/components/card/layout.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function DefaultCardLayout({ children }) {
-  return /* @__PURE__ */ jsx9("main", { className: "p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen", children });
+  return /* @__PURE__ */ jsx10("main", { className: "p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen", children });
 }
 
 // src/theme/default/components/card/index.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function DefaultCard({ children }) {
-  return /* @__PURE__ */ jsx10("div", { className: "flex flex-1 sm:items-center justify-center font-sans items-start w-full sm:w-[480px] sm:max-w-[480px]", children: /* @__PURE__ */ jsxs7("div", { className: "relative grid grid-cols-1 gap-8 sm:rounded-cards sm:border border-form-border-default bg-form-background-default px-8 py-12 sm:px-12 sm:py-14 border-b w-full", children: [
+  return /* @__PURE__ */ jsx11("div", { className: "flex flex-1 sm:items-center justify-center font-sans items-start w-full sm:w-[480px] sm:max-w-[480px]", children: /* @__PURE__ */ jsxs7("div", { className: "relative grid grid-cols-1 gap-8 sm:rounded-cards sm:border border-form-border-default bg-form-background-default px-8 py-12 sm:px-12 sm:py-14 border-b w-full", children: [
     children,
-    /* @__PURE__ */ jsx10(Badge, {})
+    /* @__PURE__ */ jsx11(Badge, {})
   ] }) });
 }
 
@@ -544,48 +731,52 @@ import {
   uiTextToFormattedMessage,
   useOryFlow as useOryFlow5
 } from "@ory/elements-react";
+import { useEffect } from "react";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { useIntl as useIntl3 } from "react-intl";
+import { useDebounceValue } from "usehooks-ts";
 
 // src/theme/default/provider-logos/apple.svg
 import * as React4 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var SvgApple = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx11("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
+  return /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx12("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
 };
 var apple_default = SvgApple;
 
 // src/theme/default/provider-logos/auth0.svg
 import * as React5 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var SvgAuth0 = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx12("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
+  return /* @__PURE__ */ jsx13("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx13("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
 };
 var auth0_default = SvgAuth0;
 
 // src/theme/default/provider-logos/discord.svg
 import * as React6 from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var SvgDiscord = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx13("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
-    /* @__PURE__ */ jsx13("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
+    /* @__PURE__ */ jsx14("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
+    /* @__PURE__ */ jsx14("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
   ] });
 };
 var discord_default = SvgDiscord;
 
 // src/theme/default/provider-logos/facebook.svg
 import * as React7 from "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var SvgFacebook = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx14("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
-    /* @__PURE__ */ jsx14("path", { fill: "#fff", d: "m21.214 20.282.622-3.952h-3.89v-2.563c0-1.081.542-2.136 2.284-2.136H22V8.267S20.395 8 18.86 8c-3.205 0-5.298 1.893-5.298 5.318v3.012H10v3.952h3.562v9.552q1.073.165 2.191.166 1.12 0 2.192-.166v-9.552z" }),
-    /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs9("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx14("stop", { stopColor: "#18ACFE" }),
-      /* @__PURE__ */ jsx14("stop", { offset: 1, stopColor: "#0163E0" })
+    /* @__PURE__ */ jsx15("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
+    /* @__PURE__ */ jsx15("path", { fill: "#fff", d: "m21.214 20.282.622-3.952h-3.89v-2.563c0-1.081.542-2.136 2.284-2.136H22V8.267S20.395 8 18.86 8c-3.205 0-5.298 1.893-5.298 5.318v3.012H10v3.952h3.562v9.552q1.073.165 2.191.166 1.12 0 2.192-.166v-9.552z" }),
+    /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsxs9("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx15("stop", { stopColor: "#18ACFE" }),
+      /* @__PURE__ */ jsx15("stop", { offset: 1, stopColor: "#0163E0" })
     ] }) })
   ] });
 };
@@ -593,124 +784,124 @@ var facebook_default = SvgFacebook;
 
 // src/theme/default/provider-logos/generic.svg
 import * as React8 from "react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var SvgGeneric = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, className: "generic_svg__icon generic_svg__icon-tabler generic_svg__icon-tabler-brand-oauth", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx15("path", { stroke: "none", d: "M0 0h24v24H0z" }),
-    /* @__PURE__ */ jsx15("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
-    /* @__PURE__ */ jsx15("path", { d: "M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108 1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z" })
+    /* @__PURE__ */ jsx16("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx16("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
+    /* @__PURE__ */ jsx16("path", { d: "M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108 1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z" })
   ] });
 };
 var generic_default = SvgGeneric;
 
 // src/theme/default/provider-logos/github.svg
 import * as React9 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var SvgGithub = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx16("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
+  return /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx17("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
 };
 var github_default = SvgGithub;
 
 // src/theme/default/provider-logos/gitlab.svg
 import * as React10 from "react";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var SvgGitlab = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx17("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
-    /* @__PURE__ */ jsx17("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
-    /* @__PURE__ */ jsx17("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
-    /* @__PURE__ */ jsx17("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
+    /* @__PURE__ */ jsx18("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
   ] });
 };
 var gitlab_default = SvgGitlab;
 
 // src/theme/default/provider-logos/google.svg
 import * as React11 from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SvgGoogle = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx18("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
-    /* @__PURE__ */ jsx18("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
-    /* @__PURE__ */ jsx18("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
-    /* @__PURE__ */ jsx18("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
+    /* @__PURE__ */ jsx19("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
+    /* @__PURE__ */ jsx19("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
+    /* @__PURE__ */ jsx19("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
+    /* @__PURE__ */ jsx19("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
   ] });
 };
 var google_default = SvgGoogle;
 
 // src/theme/default/provider-logos/linkedin.svg
 import * as React12 from "react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var SvgLinkedin = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx19("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
-    /* @__PURE__ */ jsx19("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
+    /* @__PURE__ */ jsx20("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
+    /* @__PURE__ */ jsx20("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
   ] });
 };
 var linkedin_default = SvgLinkedin;
 
 // src/theme/default/provider-logos/microsoft.svg
 import * as React13 from "react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var SvgMicrosoft = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs14("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 23 23", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx20("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
-    /* @__PURE__ */ jsx20("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
-    /* @__PURE__ */ jsx20("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
-    /* @__PURE__ */ jsx20("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
+    /* @__PURE__ */ jsx21("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
   ] });
 };
 var microsoft_default = SvgMicrosoft;
 
 // src/theme/default/provider-logos/slack.svg
 import * as React14 from "react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var SvgSlack = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx21("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
-    /* @__PURE__ */ jsx21("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
-    /* @__PURE__ */ jsx21("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
-    /* @__PURE__ */ jsx21("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
+    /* @__PURE__ */ jsx22("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
+    /* @__PURE__ */ jsx22("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
+    /* @__PURE__ */ jsx22("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
+    /* @__PURE__ */ jsx22("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
   ] });
 };
 var slack_default = SvgSlack;
 
 // src/theme/default/provider-logos/spotify.svg
 import * as React15 from "react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var SvgSpotify = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx22("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
-    /* @__PURE__ */ jsx22("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
+    /* @__PURE__ */ jsx23("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
+    /* @__PURE__ */ jsx23("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
   ] });
 };
 var spotify_default = SvgSpotify;
 
 // src/theme/default/provider-logos/yandex.svg
 import * as React16 from "react";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var SvgYandex = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx23("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
-    /* @__PURE__ */ jsx23("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
+    /* @__PURE__ */ jsx24("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
+    /* @__PURE__ */ jsx24("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
   ] });
 };
 var yandex_default = SvgYandex;
 
 // src/theme/default/provider-logos/x.svg
 import * as React17 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SvgX = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx24("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx24("path", { fill: "#0F172A", d: "M24.122 3h4.292L18.99 13.73 30 28.285h-8.64l-6.764-8.845-7.744 8.845H2.56l9.983-11.476L2 3h8.854l6.112 8.08zM22.62 25.766h2.379L9.604 5.426H7.048z" }) });
+  return /* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx25("path", { fill: "#0F172A", d: "M24.122 3h4.292L18.99 13.73 30 28.285h-8.64l-6.764-8.845-7.744 8.845H2.56l9.983-11.476L2 3h8.854l6.112 8.08zM22.62 25.766h2.379L9.604 5.426H7.048z" }) });
 };
 var x_default = SvgX;
 
@@ -733,13 +924,8 @@ var logos = {
 };
 var provider_logos_default = logos;
 
-// src/theme/default/components/form/social.tsx
-import { useIntl as useIntl3 } from "react-intl";
-import { useEffect, useState } from "react";
-import { useFormContext as useFormContext2 } from "react-hook-form";
-
 // src/theme/default/components/form/spinner.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function Spinner({ className }) {
   return /* @__PURE__ */ jsxs18(
     "svg",
@@ -754,7 +940,7 @@ function Spinner({ className }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx25("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M23.364 10.6362C22.1053 9.37751 20.5016 8.52034 18.7558 8.17307C17.01 7.82581 15.2004 8.00404 13.5559 8.68523C11.9113 9.36641 10.5057 10.52 9.51678 12C8.52784 13.4801 8 15.2201 8 17.0001C8 18.7802 8.52784 20.5202 9.51678 22.0003C10.5057 23.4803 11.9113 24.6339 13.5559 25.3151C15.2004 25.9962 17.01 26.1745 18.7558 25.8272C20.5016 25.4799 22.1053 24.6228 23.364 23.3641",
@@ -763,7 +949,7 @@ function Spinner({ className }) {
             strokeLinejoin: "round"
           }
         ) }),
-        /* @__PURE__ */ jsx25("defs", { children: /* @__PURE__ */ jsx25("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("defs", { children: /* @__PURE__ */ jsx26("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx26(
           "rect",
           {
             width: "24",
@@ -778,7 +964,7 @@ function Spinner({ className }) {
 }
 
 // src/theme/default/components/form/social.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function extractProvider(context) {
   if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
     return context.provider;
@@ -803,7 +989,7 @@ function DefaultButtonSocial({
   const {
     flow: { ui }
   } = useOryFlow5();
-  const [clicked, setClicked] = useState(false);
+  const [clicked, setClicked] = useDebounceValue(false, 100);
   const intl = useIntl3();
   const {
     formState: { isSubmitting }
@@ -813,14 +999,14 @@ function DefaultButtonSocial({
   const showLabel = _showLabel != null ? _showLabel : oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0;
   const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
   const localOnClick = () => {
-    setClicked(true);
     onClick == null ? void 0 : onClick();
+    setClicked(true);
   };
   useEffect(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
-  }, [isSubmitting]);
+  }, [isSubmitting, setClicked]);
   return /* @__PURE__ */ jsxs19(
     "button",
     {
@@ -834,18 +1020,21 @@ function DefaultButtonSocial({
       "data-loading": clicked,
       disabled: isSubmitting,
       children: [
-        /* @__PURE__ */ jsx26("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx26(Logo, { size: 20 }) : /* @__PURE__ */ jsx26("span", { className: "flex aspect-square items-center justify-center rounded-[999px] border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx26(Spinner, { className: "size-5" }) }),
-        showLabel && node.meta.label ? /* @__PURE__ */ jsx26("span", { className: "grow text-left font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }) : null
+        /* @__PURE__ */ jsx27("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx27(Logo, { size: 20 }) : /* @__PURE__ */ jsx27("span", { className: "flex aspect-square items-center justify-center rounded-[999px] border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx27(Spinner, { className: "size-5" }) }),
+        showLabel && node.meta.label ? /* @__PURE__ */ jsxs19(Fragment2, { children: [
+          /* @__PURE__ */ jsx27("span", { className: "grow text-center font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }),
+          /* @__PURE__ */ jsx27("span", { className: "size-5 block" })
+        ] }) : null
       ]
     }
   );
 }
-DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx26(DefaultButtonSocial, { ...props, logos: logos2 });
+DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx27(DefaultButtonSocial, { ...props, logos: logos2 });
 function DefaultSocialButtonContainer({
   children,
   nodes
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn("grid gap-3", {
@@ -860,14 +1049,14 @@ function DefaultSocialButtonContainer({
 }
 
 // src/theme/default/components/form/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function DefaultFormContainer({
   children,
   onSubmit,
   action,
   method
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "form",
     {
       onSubmit,
@@ -884,7 +1073,7 @@ function DefaultMessageContainer({ children }) {
   if (!children || Array.isArray(children) && children.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "section",
     {
       className: cn(
@@ -896,7 +1085,7 @@ function DefaultMessageContainer({ children }) {
 }
 function DefaultMessage({ message }) {
   const intl = useIntl4();
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
       className: cn(
@@ -916,58 +1105,81 @@ import { useIntl as useIntl5 } from "react-intl";
 
 // src/theme/default/assets/icons/code.svg
 import * as React18 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var SvgCode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx28("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx28("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
+  return /* @__PURE__ */ jsx29("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx29("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
 };
 var code_default = SvgCode;
 
 // src/theme/default/assets/icons/passkey.svg
 import * as React19 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SvgPasskey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx29("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx29("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
+  return /* @__PURE__ */ jsx30("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx30("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
 };
 var passkey_default = SvgPasskey;
 
 // src/theme/default/assets/icons/password.svg
 import * as React20 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SvgPassword = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx30("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx30("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
+  return /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx31("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
 };
 var password_default = SvgPassword;
 
 // src/theme/default/assets/icons/webauthn.svg
 import * as React21 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SvgWebauthn = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx31("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
+  return /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx32("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
 };
 var webauthn_default = SvgWebauthn;
 
+// src/theme/default/assets/icons/totp.svg
+import * as React22 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var SvgTotp = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx33("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx33("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
+};
+var totp_default = SvgTotp;
+
+// src/theme/default/assets/icons/code-asterix.svg
+import * as React23 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var SvgCodeAsterix = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx34("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 19.325a2 2 0 0 1-2-2v-4l-1-1 1-1v-4a2 2 0 0 1 2-2m6 6.875 3-1.687M12 12.2v3.375m0-3.375-3-1.687m3 1.687 3 1.688M12 12.2V8.825m0 3.375-3 1.688m9 5.437a2 2 0 0 0 2-2v-4l1-1-1-1v-4a2 2 0 0 0-2-2" }) });
+};
+var code_asterix_default = SvgCodeAsterix;
+
 // src/theme/default/utils/form.ts
 function isGroupImmediateSubmit(group) {
   return group === "code";
 }
 
 // src/theme/default/components/card/auth-method-list-item.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var iconsMap = {
   code: code_default,
   passkey: passkey_default,
   password: password_default,
   webauthn: webauthn_default,
+  hardware_token: passkey_default,
+  totp: totp_default,
+  lookup_secret: code_asterix_default,
   ...provider_logos_default
 };
 function DefaultAuthMethodListItem({
   onClick,
-  group
+  group,
+  title
 }) {
+  var _a;
   const intl = useIntl5();
   const Icon = iconsMap[group] || null;
   return /* @__PURE__ */ jsxs20(
@@ -978,10 +1190,16 @@ function DefaultAuthMethodListItem({
       type: isGroupImmediateSubmit(group) ? "submit" : "button",
       "data-testid": `ory/form/auth-picker/${group}`,
       children: [
-        /* @__PURE__ */ jsx32("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx32(Icon, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
-        /* @__PURE__ */ jsxs20("span", { className: "flex-1 leading-normal inline-flex flex-col", children: [
-          /* @__PURE__ */ jsx32("span", { className: "text-interface-foreground-default-primary", children: intl.formatMessage({ id: `two-step.${group}.title` }) }),
-          /* @__PURE__ */ jsx32("span", { className: "text-interface-foreground-default-secondary", children: intl.formatMessage({
+        /* @__PURE__ */ jsx35("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx35(Icon, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
+        /* @__PURE__ */ jsxs20("span", { className: "flex-1 leading-normal inline-flex flex-col w-full", children: [
+          /* @__PURE__ */ jsxs20("span", { className: "text-interface-foreground-default-primary truncate mr-6", children: [
+            intl.formatMessage(
+              { id: (_a = title == null ? void 0 : title.id) != null ? _a : `two-step.${group}.title` },
+              title == null ? void 0 : title.values
+            ),
+            " "
+          ] }),
+          /* @__PURE__ */ jsx35("span", { className: "text-interface-foreground-default-secondary", children: intl.formatMessage({
             id: `two-step.${group}.description`
           }) })
         ] })
@@ -998,8 +1216,8 @@ import {
 import { cva } from "class-variance-authority";
 import { useFormContext as useFormContext3 } from "react-hook-form";
 import { useIntl as useIntl6 } from "react-intl";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState } from "react";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
     "relative flex justify-center gap-3 overflow-hidden rounded-buttons leading-none ring-1 ring-inset font-medium",
@@ -1046,10 +1264,11 @@ var DefaultButton = ({
     autocomplete: _ignoredAutocomplete,
     label: _ignoredLabel,
     node_type: _ignoredNodeType,
+    maxlength: _ignoredMaxLength,
     // End of skipped attributes
     ...rest
   } = attributes;
-  const [clicked, setClicked] = useState2(false);
+  const [clicked, setClicked] = useState(false);
   const intl = useIntl6();
   const label = getNodeLabel(node);
   const {
@@ -1082,8 +1301,8 @@ var DefaultButton = ({
       disabled: (_a = rest.disabled) != null ? _a : isSubmitting,
       "data-loading": clicked,
       children: [
-        clicked ? /* @__PURE__ */ jsx33(Spinner, {}) : null,
-        label ? /* @__PURE__ */ jsx33("span", { children: uiTextToFormattedMessage3(label, intl) }) : ""
+        clicked ? /* @__PURE__ */ jsx36(Spinner, {}) : null,
+        label ? /* @__PURE__ */ jsx36("span", { children: uiTextToFormattedMessage3(label, intl) }) : ""
       ]
     }
   );
@@ -1159,7 +1378,7 @@ var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
 };
 
 // src/theme/default/components/ui/checkbox-label.tsx
-import { Fragment as Fragment2, jsx as jsx34 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx37 } from "react/jsx-runtime";
 var linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
 function computeLabelElements(labelText) {
   const elements = [];
@@ -1175,7 +1394,7 @@ function computeLabelElements(labelText) {
       elements.push(labelText.slice(lastIndex, matchStart));
     }
     elements.push(
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx37(
         "a",
         {
           href: url,
@@ -1200,13 +1419,13 @@ function CheckboxLabel({ label }) {
     return null;
   }
   const labelText = uiTextToFormattedMessage4(label, intl);
-  return /* @__PURE__ */ jsx34(Fragment2, { children: computeLabelElements(labelText) });
+  return /* @__PURE__ */ jsx37(Fragment3, { children: computeLabelElements(labelText) });
 }
 
 // src/theme/default/components/form/checkbox.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function CheckboxSVG() {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx38(
     "svg",
     {
       className: "absolute hidden size-4 peer-checked:block fill-checkbox-foreground-checked",
@@ -1215,7 +1434,7 @@ function CheckboxSVG() {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx38(
         "path",
         {
           fillRule: "evenodd",
@@ -1246,7 +1465,7 @@ var DefaultCheckbox = ({
   const hasError = node.messages.some((m) => m.type === "error");
   return /* @__PURE__ */ jsxs22("label", { className: "flex items-start gap-3 self-stretch antialiased", children: [
     /* @__PURE__ */ jsxs22("span", { className: "flex h-5 items-center", children: [
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx38(
         "input",
         {
           ...attributes,
@@ -1260,11 +1479,11 @@ var DefaultCheckbox = ({
           ...register(name, { value })
         }
       ),
-      /* @__PURE__ */ jsx35(CheckboxSVG, {})
+      /* @__PURE__ */ jsx38(CheckboxSVG, {})
     ] }),
     /* @__PURE__ */ jsxs22("span", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx35("span", { className: "font-normal leading-tight text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx35(CheckboxLabel, { label }) }),
-      node.messages.map((message) => /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx38("span", { className: "font-normal leading-tight text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx38(CheckboxLabel, { label }) }),
+      node.messages.map((message) => /* @__PURE__ */ jsx38(
         "span",
         {
           className: cn(
@@ -1281,21 +1500,21 @@ var DefaultCheckbox = ({
 };
 
 // src/theme/default/components/form/group-container.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function DefaultGroupContainer({ children }) {
-  return /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-1 gap-8", children });
+  return /* @__PURE__ */ jsx39("div", { className: "grid grid-cols-1 gap-8", children });
 }
 
 // src/theme/default/components/form/horizontal-divider.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function DefaultHorizontalDivider() {
-  return /* @__PURE__ */ jsx37("hr", { className: "border-interface-border-default-primary" });
+  return /* @__PURE__ */ jsx40("hr", { className: "border-interface-border-default-primary" });
 }
 
 // src/theme/default/components/form/image.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function DefaultImage({ attributes }) {
-  return /* @__PURE__ */ jsx38("figure", { children: /* @__PURE__ */ jsx38("img", { ...attributes }) });
+  return /* @__PURE__ */ jsx41("figure", { children: /* @__PURE__ */ jsx41("img", { ...attributes }) });
 }
 
 // src/theme/default/components/form/input.tsx
@@ -1306,7 +1525,7 @@ import {
 } from "@ory/elements-react";
 import { useFormContext as useFormContext4 } from "react-hook-form";
 import { useIntl as useIntl9 } from "react-intl";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var DefaultInput = ({
   node,
   attributes,
@@ -1333,7 +1552,7 @@ var DefaultInput = ({
       placeholder: uiTextToFormattedMessage6(label, intl)
     }
   ) : "";
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     "input",
     {
       ...rest,
@@ -1366,12 +1585,12 @@ import {
 import {
   messageTestId as messageTestId3,
   uiTextToFormattedMessage as uiTextToFormattedMessage7,
-  useComponents as useComponents2,
+  useComponents as useComponents3,
   useOryFlow as useOryFlow8
 } from "@ory/elements-react";
 import { useFormContext as useFormContext5 } from "react-hook-form";
 import { useIntl as useIntl10 } from "react-intl";
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 function findResendNode(nodes) {
   return nodes.find(
     (n) => "name" in n.attributes && (n.attributes.name === "email" && n.attributes.type === "submit" || n.attributes.name === "resend")
@@ -1385,7 +1604,7 @@ function DefaultLabel({
 }) {
   const intl = useIntl10();
   const label = getNodeLabel4(node);
-  const { Message } = useComponents2();
+  const { Message } = useComponents3();
   const { config, flowType, flow } = useOryFlow8();
   const { setValue, formState } = useFormContext5();
   const isPassword = attributes.type === "password";
@@ -1398,7 +1617,7 @@ function DefaultLabel({
   const fieldError = formState.errors[attributes.name];
   return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1 antialiased", children: [
     label && /* @__PURE__ */ jsxs23("span", { className: "inline-flex justify-between", children: [
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx43(
         "label",
         {
           ...messageTestId3(label),
@@ -1410,7 +1629,7 @@ function DefaultLabel({
         }
       ),
       isPassword && config.project.recovery_enabled && flowType === FlowType6.Login && // TODO: make it possible to override with a custom component
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx43(
         "a",
         {
           href: initFlowUrl(config.sdk.url, "recovery", flow),
@@ -1421,7 +1640,7 @@ function DefaultLabel({
           })
         }
       ),
-      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx40(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx43(
         "button",
         {
           type: "submit",
@@ -1434,8 +1653,8 @@ function DefaultLabel({
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ jsx40(Message.Content, { message }, message.id)),
-    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx40(Message.Content, { message: fieldError })
+    node.messages.map((message) => /* @__PURE__ */ jsx43(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx43(Message.Content, { message: fieldError })
   ] });
 }
 
@@ -1446,11 +1665,11 @@ import {
 } from "@ory/elements-react";
 import { forwardRef } from "react";
 import { useIntl as useIntl11 } from "react-intl";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
   const intl = useIntl11();
   const label = getNodeLabel5(node);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx44(
     "a",
     {
       ...attributes,
@@ -1471,9 +1690,9 @@ import { useFormContext as useFormContext6 } from "react-hook-form";
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
-import * as React22 from "react";
-import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
-var InputOTP = React22.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx42(
+import * as React24 from "react";
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+var InputOTP = React24.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx45(
   OTPInput,
   {
     ref,
@@ -1486,10 +1705,10 @@ var InputOTP = React22.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React22.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React22.useContext(OTPInputContext);
+var InputOTPSlot = React24.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React24.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
   return /* @__PURE__ */ jsxs24(
     "div",
@@ -1503,8 +1722,8 @@ var InputOTPSlot = React22.forwardRef(({ index, className, ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx42("span", { className: "inline-block size-4", children: char }),
-        hasFakeCaret && /* @__PURE__ */ jsx42("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx42("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
+        /* @__PURE__ */ jsx45("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ jsx45("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx45("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
       ]
     }
   );
@@ -1514,7 +1733,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 // src/theme/default/components/form/pin-code-input.tsx
 import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
 import { FlowType as FlowType7 } from "@ory/client-fetch";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var DefaultPinCodeInput = ({ attributes }) => {
   const { setValue, watch } = useFormContext6();
   const { maxlength, name } = attributes;
@@ -1524,14 +1743,14 @@ var DefaultPinCodeInput = ({ attributes }) => {
     setValue(name, v);
   };
   const value = watch(name);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx46(
     InputOTP,
     {
       maxLength: maxlength != null ? maxlength : 6,
       onChange: handleInputChange,
       name,
       value,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx46(
         InputOTPGroup,
         {
           className: cn(
@@ -1539,7 +1758,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
             // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
             flowType === FlowType7.Settings && "max-w-[488px]"
           ),
-          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx43(InputOTPSlot, { index }, index))
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx46(InputOTPSlot, { index }, index))
         }
       )
     }
@@ -1547,13 +1766,13 @@ var DefaultPinCodeInput = ({ attributes }) => {
 };
 
 // src/theme/default/components/form/section.tsx
-import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
 var DefaultFormSection = ({
   children,
   nodes: _nodes,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx47(
     "form",
     {
       className: "flex w-full max-w-screen-sm flex-col md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] px-4",
@@ -1569,8 +1788,8 @@ var DefaultFormSectionContent = ({
 }) => {
   return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-8 rounded-t-cards border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
     /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx44("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
-      /* @__PURE__ */ jsx44("span", { className: "text-interface-foreground-default-secondary", children: description })
+      /* @__PURE__ */ jsx47("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx47("span", { className: "text-interface-foreground-default-secondary", children: description })
     ] }),
     children
   ] });
@@ -1586,7 +1805,7 @@ var DefaultFormSectionFooter = ({
         "flex min-h-[72px] items-center justify-between gap-2 rounded-b-cards border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
       ),
       children: [
-        /* @__PURE__ */ jsx44("span", { children: text }),
+        /* @__PURE__ */ jsx47("span", { children: text }),
         children
       ]
     }
@@ -1596,29 +1815,43 @@ var DefaultFormSectionFooter = ({
 // src/theme/default/components/form/text.tsx
 import { uiTextToFormattedMessage as uiTextToFormattedMessage9 } from "@ory/elements-react";
 import { useIntl as useIntl12 } from "react-intl";
-import { Fragment as Fragment3, jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl12();
-  return /* @__PURE__ */ jsxs26(Fragment3, { children: [
-    /* @__PURE__ */ jsx45("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx45(
-      "pre",
-      {
-        "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
-        children: /* @__PURE__ */ jsx45("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
-      },
-      index
-    ))
-  ] });
+  const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
+  if (lookup) {
+    return /* @__PURE__ */ jsxs26(Fragment4, { children: [
+      /* @__PURE__ */ jsx48("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
+      lookup.map((text, index) => /* @__PURE__ */ jsx48(
+        "pre",
+        {
+          "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
+          children: /* @__PURE__ */ jsx48("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
+        },
+        index
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsx48(Fragment4, { children: /* @__PURE__ */ jsxs26(
+    "p",
+    {
+      "data-testid": `ory/form/node/text/${attributes.id}/label`,
+      id: attributes.id,
+      children: [
+        node.meta.label ? /* @__PURE__ */ jsx48("label", { children: uiTextToFormattedMessage9(node.meta.label, intl) }) : null,
+        attributes.text ? uiTextToFormattedMessage9(attributes.text, intl) : ""
+      ]
+    }
+  ) });
 }
 
 // src/theme/default/components/generic/page-header.tsx
-import { useComponents as useComponents3 } from "@ory/elements-react";
+import { useComponents as useComponents4 } from "@ory/elements-react";
 
 // src/theme/default/components/ui/user-menu.tsx
 import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
-import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState2 } from "react";
 import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
 
 // src/util/client.ts
@@ -1639,22 +1872,22 @@ function frontendClient(sdkUrl, opts = {}) {
 }
 
 // src/theme/default/assets/icons/logout.svg
-import * as React23 from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import * as React25 from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var SvgLogout = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx46("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx46("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
+  return /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx49("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
 };
 var logout_default = SvgLogout;
 
 // src/theme/default/assets/icons/settings.svg
-import * as React24 from "react";
-import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
 var SvgSettings = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx47("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs27("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx47("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
-    /* @__PURE__ */ jsx47("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
+  return /* @__PURE__ */ jsx50("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs27("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx50("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
+    /* @__PURE__ */ jsx50("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
   ] }) });
 };
 var settings_default = SvgSettings;
@@ -1701,10 +1934,10 @@ var getUserInitials = (session) => {
 // src/theme/default/components/ui/dropdown-menu.tsx
 import { forwardRef as forwardRef3 } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx48(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx48(
+var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx51(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx51(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1719,7 +1952,7 @@ var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx48(
+var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx51(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1737,7 +1970,7 @@ var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx48(
+var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx51(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1755,32 +1988,32 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 import { forwardRef as forwardRef4 } from "react";
 
 // src/theme/default/assets/icons/user.svg
-import * as React25 from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var SvgUser = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx49("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
+  return /* @__PURE__ */ jsx52("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx52("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
 };
 var user_default = SvgUser;
 
 // src/theme/default/components/ui/user-avater.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var UserAvatar = forwardRef4(
   ({ initials, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx53(
       "button",
       {
         ref,
         className: "relative flex size-10 items-center justify-center overflow-hidden rounded-[999px] bg-button-primary-background-default hover:bg-button-primary-background-hover",
         ...rest,
-        children: /* @__PURE__ */ jsx50("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx50(
+        children: /* @__PURE__ */ jsx53("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx53(
           "img",
           {
             src: initials.avatar,
             alt: initials.primary,
             className: "w-full object-contain"
           }
-        ) : /* @__PURE__ */ jsx50(
+        ) : /* @__PURE__ */ jsx53(
           user_default,
           {
             size: 24,
@@ -1794,11 +2027,11 @@ var UserAvatar = forwardRef4(
 UserAvatar.displayName = "UserAvatar";
 
 // src/theme/default/components/ui/user-menu.tsx
-import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const { config } = useOryFlow10();
   const initials = getUserInitials(session);
-  const [logoutFlow, setLogoutFlow] = useState3();
+  const [logoutFlow, setLogoutFlow] = useState2();
   const fetchLogoutFlow = useCallback(async () => {
     const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
     setLogoutFlow(flow);
@@ -1807,21 +2040,21 @@ var UserMenu = ({ session }) => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
   return /* @__PURE__ */ jsxs28(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx51(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(UserAvatar, { initials }) }),
+    /* @__PURE__ */ jsx54(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(UserAvatar, { initials }) }),
     /* @__PURE__ */ jsxs28(DropdownMenuContent, { children: [
       /* @__PURE__ */ jsxs28(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
-        /* @__PURE__ */ jsx51(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ jsx54(UserAvatar, { disabled: true, initials }),
         /* @__PURE__ */ jsxs28("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
-          /* @__PURE__ */ jsx51("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
-          initials.secondary && /* @__PURE__ */ jsx51("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
+          /* @__PURE__ */ jsx54("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ jsx54("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
         ] })
       ] }),
-      /* @__PURE__ */ jsx51(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs28("a", { href: "/settings", children: [
-        /* @__PURE__ */ jsx51(settings_default, { size: 16 }),
+      /* @__PURE__ */ jsx54(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs28("a", { href: "/settings", children: [
+        /* @__PURE__ */ jsx54(settings_default, { size: 16 }),
         " User settings"
       ] }) }),
-      /* @__PURE__ */ jsx51(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs28("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
-        /* @__PURE__ */ jsx51(logout_default, { size: 16 }),
+      /* @__PURE__ */ jsx54(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs28("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
+        /* @__PURE__ */ jsx54(logout_default, { size: 16 }),
         " Logout"
       ] }) })
     ] })
@@ -1830,31 +2063,32 @@ var UserMenu = ({ session }) => {
 
 // src/theme/default/components/generic/page-header.tsx
 import { useSession } from "@ory/elements-react/client";
-import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
-  const { Card } = useComponents3();
+  const { Card } = useComponents4();
   const { session } = useSession();
-  return /* @__PURE__ */ jsx52("div", { className: "mt-16 flex max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ jsx52("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
-    /* @__PURE__ */ jsx52("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx52(Card.Logo, {}) }),
-    /* @__PURE__ */ jsx52(UserMenu, { session })
+  return /* @__PURE__ */ jsx55("div", { className: "mt-16 flex max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ jsx55("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+    /* @__PURE__ */ jsx55("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx55(Card.Logo, {}) }),
+    /* @__PURE__ */ jsx55(UserMenu, { session })
   ] }) }) });
 };
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { useFormContext as useFormContext7 } from "react-hook-form";
+import { useDebounceValue as useDebounceValue2 } from "usehooks-ts";
 
 // src/theme/default/assets/icons/trash.svg
-import * as React26 from "react";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var SvgTrash = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx53("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx53("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
+  return /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx56("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
 };
 var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
   unlinkButtons
@@ -1862,9 +2096,9 @@ function DefaultSettingsOidc({
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
   return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ jsx54("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
+    hasLinkButtons && /* @__PURE__ */ jsx57("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
       const attrs = button.attributes;
-      return /* @__PURE__ */ jsx54(
+      return /* @__PURE__ */ jsx57(
         DefaultButtonSocial,
         {
           showLabel: true,
@@ -1875,41 +2109,39 @@ function DefaultSettingsOidc({
         attrs.value
       );
     }) }),
-    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx54(DefaultHorizontalDivider, {}) : null,
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx57(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
       if (button.attributes.node_type !== "input") {
         return null;
       }
-      return /* @__PURE__ */ jsx54(UnlinkRow, { button }, button.attributes.value);
+      return /* @__PURE__ */ jsx57(UnlinkRow, { button }, button.attributes.value);
     })
   ] });
 }
 function UnlinkRow({ button }) {
   var _a, _b;
-  const [clicked, setClicked] = useState4(false);
+  const [clicked, setClicked] = useDebounceValue2(false, 100);
   const {
     formState: { isSubmitting }
   } = useFormContext7();
   const attrs = button.attributes;
   const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
-  const Logo = attrs.value in provider_logos_default ? provider_logos_default[attrs.value] : provider_logos_default.generic;
+  const Logo = provider_logos_default[attrs.value.split("-")[0]];
   const localOnClick = () => {
     button.onClick();
-    setTimeout(() => {
-      setClicked(true);
-    }, 100);
+    setClicked(true);
   };
   useEffect4(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
-  }, [isSubmitting]);
+  }, [isSubmitting, setClicked]);
   return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
     /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsx54(Logo, { size: 32 }),
-      /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+      Logo ? /* @__PURE__ */ jsx57(Logo, { size: 32 }) : /* @__PURE__ */ jsx57(provider_logos_default.generic, { size: 32 }),
+      /* @__PURE__ */ jsx57("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
     ] }),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx57(
       "button",
       {
         ...attrs,
@@ -1918,7 +2150,7 @@ function UnlinkRow({ button }) {
         disabled: isSubmitting,
         className: "relative",
         title: `Unlink ${provider}`,
-        children: clicked ? /* @__PURE__ */ jsx54(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx54(
+        children: clicked ? /* @__PURE__ */ jsx57(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx57(
           trash_default,
           {
             className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -1931,9 +2163,9 @@ function UnlinkRow({ button }) {
 }
 
 // src/theme/default/components/settings/settings-passkey.tsx
-import { useComponents as useComponents4 } from "@ory/elements-react";
+import { useComponents as useComponents5 } from "@ory/elements-react";
 import { useFormContext as useFormContext8 } from "react-hook-form";
-import { jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
@@ -1941,11 +2173,11 @@ function DefaultSettingsPasskey({
   const {
     formState: { isSubmitting }
   } = useFormContext8();
-  const { Node } = useComponents4();
+  const { Node: Node2 } = useComponents5();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsx55("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx55(
-      Node.Button,
+    /* @__PURE__ */ jsx58("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx58(
+      Node2.Button,
       {
         node: triggerButton,
         attributes: triggerButton.attributes,
@@ -1953,8 +2185,8 @@ function DefaultSettingsPasskey({
       }
     ) }),
     hasRemoveButtons ? /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx55(DefaultHorizontalDivider, {}),
-      /* @__PURE__ */ jsx55("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+      /* @__PURE__ */ jsx58(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ jsx58("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
@@ -1965,25 +2197,25 @@ function DefaultSettingsPasskey({
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 items-center flex-1", children: [
-                /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ jsx58(
                   passkey_default,
                   {
                     size: 32,
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
-                  /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col", children: [
-                    /* @__PURE__ */ jsx55("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
-                    /* @__PURE__ */ jsx55("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ jsx58("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ jsx58("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ jsx55("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ jsx58("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx58(
                 "button",
                 {
                   ...node.attributes,
@@ -1991,7 +2223,7 @@ function DefaultSettingsPasskey({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx55(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx55(
+                  children: isSubmitting ? /* @__PURE__ */ jsx58(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx58(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2010,38 +2242,38 @@ function DefaultSettingsPasskey({
 }
 
 // src/theme/default/assets/icons/download.svg
-import * as React27 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var SvgDownload = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx56("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
+  return /* @__PURE__ */ jsx59("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx59("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
 };
 var download_default = SvgDownload;
 
 // src/theme/default/assets/icons/eye.svg
-import * as React28 from "react";
-import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import * as React30 from "react";
+import { jsx as jsx60, jsxs as jsxs32 } from "react/jsx-runtime";
 var SvgEye = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsxs32("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx57("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
-    /* @__PURE__ */ jsx57("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
+  return /* @__PURE__ */ jsx60("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsxs32("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx60("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ jsx60("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
   ] }) });
 };
 var eye_default = SvgEye;
 
 // src/theme/default/assets/icons/refresh.svg
-import * as React29 from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import * as React31 from "react";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var SvgRefresh = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx58("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
+  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx61("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
 };
 var refresh_default = SvgRefresh;
 
 // src/theme/default/components/settings/settings-recovery-codes.tsx
 import { useFormContext as useFormContext9 } from "react-hook-form";
-import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
@@ -2064,11 +2296,11 @@ function DefaultSettingsRecoveryCodes({
   };
   const hasCodes = codes.length >= 1;
   return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
-    codes.length > 0 && /* @__PURE__ */ jsx59(DefaultHorizontalDivider, {}),
+    codes.length > 0 && /* @__PURE__ */ jsx62(DefaultHorizontalDivider, {}),
     /* @__PURE__ */ jsxs33("div", { className: "flex gap-4 justify-between", children: [
-      /* @__PURE__ */ jsx59("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ jsx62("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
       /* @__PURE__ */ jsxs33("div", { className: "flex gap-2", children: [
-        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx59(
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx62(
           "button",
           {
             ...regnerateButton.attributes,
@@ -2077,7 +2309,7 @@ function DefaultSettingsRecoveryCodes({
             onClick: onRegenerate,
             disabled: isSubmitting,
             "data-loading": isSubmitting,
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx62(
               refresh_default,
               {
                 size: 24,
@@ -2086,7 +2318,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ),
-        revealButton && /* @__PURE__ */ jsx59(Fragment4, { children: /* @__PURE__ */ jsx59(
+        revealButton && /* @__PURE__ */ jsx62(Fragment5, { children: /* @__PURE__ */ jsx62(
           "button",
           {
             ...revealButton.attributes,
@@ -2094,7 +2326,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             onClick: onReveal,
             title: "Reveal recovery codes",
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx62(
               eye_default,
               {
                 size: 24,
@@ -2103,7 +2335,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ) }),
-        hasCodes && /* @__PURE__ */ jsx59(
+        hasCodes && /* @__PURE__ */ jsx62(
           "button",
           {
             onClick: onDownload,
@@ -2111,7 +2343,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             "data-testid": "ory/screen/settings/group/recovery_code/download",
             title: "Download recovery codes",
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx62(
               download_default,
               {
                 size: 24,
@@ -2122,32 +2354,32 @@ function DefaultSettingsRecoveryCodes({
         )
       ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ jsx59("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx59(
+    hasCodes ? /* @__PURE__ */ jsx62("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx62(
       "div",
       {
         className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary",
         "data-testid": "ory/screen/settings/group/recovery_code/codes",
-        children: codes.map((code) => /* @__PURE__ */ jsx59("p", { children: code }, code))
+        children: codes.map((code) => /* @__PURE__ */ jsx62("p", { children: code }, code))
       }
     ) }) : null
   ] });
 }
 
 // src/theme/default/components/settings/settings-totp.tsx
-import { useComponents as useComponents5 } from "@ory/elements-react";
+import { useComponents as useComponents6 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/qrcode.svg
-import * as React30 from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import * as React32 from "react";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var SvgQrcode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx60("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx60("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
+  return /* @__PURE__ */ jsx63("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx63("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
 };
 var qrcode_default = SvgQrcode;
 
 // src/theme/default/components/settings/settings-totp.tsx
 import { useFormContext as useFormContext10 } from "react-hook-form";
-import { jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs34 } from "react/jsx-runtime";
 function DefaultSettingsTotp({
   totpImage,
   totpInput,
@@ -2155,7 +2387,7 @@ function DefaultSettingsTotp({
   totpUnlink,
   onUnlink
 }) {
-  const { Node, Card } = useComponents5();
+  const { Node: Node2, Card } = useComponents6();
   const {
     formState: { isSubmitting }
   } = useFormContext10();
@@ -2168,18 +2400,18 @@ function DefaultSettingsTotp({
       ...buttonAttrs
     } = totpUnlink.attributes;
     return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx61("div", { className: "col-span-full", children: /* @__PURE__ */ jsx61(Card.Divider, {}) }),
+      /* @__PURE__ */ jsx64("div", { className: "col-span-full", children: /* @__PURE__ */ jsx64(Card.Divider, {}) }),
       /* @__PURE__ */ jsxs34("div", { className: "col-span-full flex items-center gap-6", children: [
-        /* @__PURE__ */ jsx61("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx61(qrcode_default, { size: 32 }) }),
-        /* @__PURE__ */ jsx61("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx61("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx64("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx64(qrcode_default, { size: 32 }) }),
+        /* @__PURE__ */ jsx64("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx64("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+        /* @__PURE__ */ jsx64(
           "button",
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
             onClick: onUnlink,
             disabled: isSubmitting,
-            children: isSubmitting ? /* @__PURE__ */ jsx61(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx61(
+            children: isSubmitting ? /* @__PURE__ */ jsx64(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx64(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2193,9 +2425,9 @@ function DefaultSettingsTotp({
   }
   if (totpImage && totpSecret && totpInput) {
     return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx61("div", { className: "col-span-full", children: /* @__PURE__ */ jsx61(DefaultHorizontalDivider, {}) }),
-      /* @__PURE__ */ jsx61("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx61("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx61("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx61(
-        Node.Image,
+      /* @__PURE__ */ jsx64("div", { className: "col-span-full", children: /* @__PURE__ */ jsx64(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ jsx64("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx64("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx64("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx64(
+        Node2.Image,
         {
           node: totpImage,
           attributes: {
@@ -2204,13 +2436,13 @@ function DefaultSettingsTotp({
         }
       ) }) }) }),
       /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx61(
-          Node.Label,
+        /* @__PURE__ */ jsx64(
+          Node2.Label,
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ jsx61(
-              Node.Input,
+            children: /* @__PURE__ */ jsx64(
+              Node2.Input,
               {
                 node: totpSecret,
                 attributes: {
@@ -2224,13 +2456,13 @@ function DefaultSettingsTotp({
             )
           }
         ),
-        /* @__PURE__ */ jsx61(
-          Node.Label,
+        /* @__PURE__ */ jsx64(
+          Node2.Label,
           {
             attributes: totpInput.attributes,
             node: totpInput,
-            children: /* @__PURE__ */ jsx61(
-              Node.CodeInput,
+            children: /* @__PURE__ */ jsx64(
+              Node2.CodeInput,
               {
                 node: totpInput,
                 attributes: totpInput.attributes
@@ -2244,20 +2476,20 @@ function DefaultSettingsTotp({
 }
 
 // src/theme/default/components/settings/settings-webauthn.tsx
-import { useComponents as useComponents6 } from "@ory/elements-react";
+import { useComponents as useComponents7 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/key.svg
-import * as React31 from "react";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import * as React33 from "react";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var SvgKey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx62("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
+  return /* @__PURE__ */ jsx65("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx65("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
 };
 var key_default = SvgKey;
 
 // src/theme/default/components/settings/settings-webauthn.tsx
 import { useFormContext as useFormContext11 } from "react-hook-form";
-import { jsx as jsx63, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
@@ -2266,17 +2498,17 @@ function DefaultSettingsWebauthn({
   const {
     formState: { isSubmitting }
   } = useFormContext11();
-  const { Node, Card } = useComponents6();
+  const { Node: Node2, Card } = useComponents7();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxs35("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
-      /* @__PURE__ */ jsx63("div", { className: "flex-1", children: /* @__PURE__ */ jsx63(
-        Node.Label,
+      /* @__PURE__ */ jsx66("div", { className: "flex-1", children: /* @__PURE__ */ jsx66(
+        Node2.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
-          children: /* @__PURE__ */ jsx63(
-            Node.Input,
+          children: /* @__PURE__ */ jsx66(
+            Node2.Input,
             {
               node: nameInput,
               attributes: nameInput.attributes
@@ -2284,8 +2516,8 @@ function DefaultSettingsWebauthn({
           )
         }
       ) }),
-      triggerButton ? /* @__PURE__ */ jsx63(
-        Node.Button,
+      triggerButton ? /* @__PURE__ */ jsx66(
+        Node2.Button,
         {
           node: triggerButton,
           attributes: triggerButton.attributes,
@@ -2294,8 +2526,8 @@ function DefaultSettingsWebauthn({
       ) : null
     ] }),
     hasRemoveButtons ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx63(Card.Divider, {}),
-      /* @__PURE__ */ jsx63("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
+      /* @__PURE__ */ jsx66(Card.Divider, {}),
+      /* @__PURE__ */ jsx66("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
@@ -2306,25 +2538,25 @@ function DefaultSettingsWebauthn({
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 items-center flex-1", children: [
-                /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ jsx66(
                   key_default,
                   {
                     size: 32,
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
-                  /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col", children: [
-                    /* @__PURE__ */ jsx63("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
-                    /* @__PURE__ */ jsx63("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ jsx66("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ jsx66("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ jsx63("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ jsx66("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsx66(
                 "button",
                 {
                   ...node.attributes,
@@ -2332,7 +2564,7 @@ function DefaultSettingsWebauthn({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx63(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx63(
+                  children: isSubmitting ? /* @__PURE__ */ jsx66(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx66(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2351,16 +2583,342 @@ function DefaultSettingsWebauthn({
 }
 
 // src/theme/default/components/card/auth-method-list-container.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function DefaultAuthMethodListContainer({
   children
 }) {
-  return /* @__PURE__ */ jsx64("div", { className: "grid grid-cols-1 gap-2", children });
+  return /* @__PURE__ */ jsx67("div", { className: "grid grid-cols-1 gap-2", children });
 }
 
+// src/theme/default/components/form/captcha.tsx
+import { isUiNodeInputAttributes as isUiNodeInputAttributes7 } from "@ory/client-fetch";
+import { Turnstile } from "@marsidev/react-turnstile";
+import { useRef as useRef2 } from "react";
+import { useFormContext as useFormContext23 } from "react-hook-form";
+
+// src/context/flow-context.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext3,
+  useState as useState3
+} from "react";
+
+// src/context/form-state.ts
+import { FlowType as FlowType9 } from "@ory/client-fetch";
+import { useReducer } from "react";
+
+// src/components/card/card-two-step.utils.ts
+import { FlowType as FlowType8, UiNodeGroupEnum as UiNodeGroupEnum3 } from "@ory/client-fetch";
+
+// src/context/flow-context.tsx
+import { jsx as jsx68 } from "react/jsx-runtime";
+var OryFlowContext = createContext2(null);
+
+// src/context/intl-context.tsx
+import { IntlProvider as OriginalIntlProvider } from "react-intl";
+
+// src/components/card/header.tsx
+import { jsx as jsx69 } from "react/jsx-runtime";
+
+// src/components/form/form-provider.tsx
+import { UiNodeGroupEnum as UiNodeGroupEnum5 } from "@ory/client-fetch";
+import { FormProvider, useForm as useForm2 } from "react-hook-form";
+
+// src/components/form/form-helpers.ts
+import { isUiNodeInputAttributes as isUiNodeInputAttributes3 } from "@ory/client-fetch";
+
+// src/components/form/form-resolver.ts
+import { isUiNodeInputAttributes as isUiNodeInputAttributes4 } from "@ory/client-fetch";
+
+// src/components/form/form-provider.tsx
+import { jsx as jsx70 } from "react/jsx-runtime";
+
+// src/components/card/card.tsx
+import { jsx as jsx71 } from "react/jsx-runtime";
+
+// src/components/card/footer.tsx
+import { jsx as jsx72 } from "react/jsx-runtime";
+
+// src/components/card/content.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
+
+// src/components/card/card-two-step.tsx
+import { UiNodeGroupEnum as UiNodeGroupEnum7 } from "@ory/client-fetch";
+import { useFormContext as useFormContext15 } from "react-hook-form";
+
+// src/components/form/form.tsx
+import {
+  FlowType as FlowType16,
+  isUiNodeAnchorAttributes,
+  isUiNodeImageAttributes,
+  isUiNodeInputAttributes as isUiNodeInputAttributes5,
+  isUiNodeScriptAttributes
+} from "@ory/client-fetch";
+import { useFormContext as useFormContext13 } from "react-hook-form";
+import { useIntl as useIntl13 } from "react-intl";
+
+// src/components/form/useOryFormSubmit.ts
+import {
+  FlowType as FlowType15
+} from "@ory/client-fetch";
+import { useFormContext as useFormContext12 } from "react-hook-form";
+
+// src/util/onSubmitLogin.ts
+import {
+  FlowType as FlowType10,
+  handleFlowError,
+  loginUrl
+} from "@ory/client-fetch";
+
+// src/util/onSubmitRecovery.ts
+import {
+  FlowType as FlowType11,
+  handleContinueWith,
+  handleFlowError as handleFlowError2,
+  instanceOfContinueWithRecoveryUi,
+  recoveryUrl
+} from "@ory/client-fetch";
+
+// src/util/onSubmitRegistration.ts
+import {
+  FlowType as FlowType12,
+  handleContinueWith as handleContinueWith2,
+  handleFlowError as handleFlowError3,
+  registrationUrl
+} from "@ory/client-fetch";
+
+// src/util/onSubmitSettings.ts
+import {
+  FlowType as FlowType13,
+  handleContinueWith as handleContinueWith3,
+  handleFlowError as handleFlowError4,
+  isResponseError,
+  loginUrl as loginUrl2,
+  settingsUrl
+} from "@ory/client-fetch";
+
+// src/util/onSubmitVerification.ts
+import {
+  FlowType as FlowType14,
+  handleFlowError as handleFlowError5,
+  verificationUrl
+} from "@ory/client-fetch";
+
+// src/components/form/form.tsx
+import { Fragment as Fragment6, jsx as jsx74, jsxs as jsxs36 } from "react/jsx-runtime";
+
+// src/components/form/messages.tsx
+import { jsx as jsx75 } from "react/jsx-runtime";
+
+// src/components/form/nodes/node.tsx
+import {
+  isUiNodeAnchorAttributes as isUiNodeAnchorAttributes2,
+  isUiNodeImageAttributes as isUiNodeImageAttributes2,
+  isUiNodeInputAttributes as isUiNodeInputAttributes6,
+  isUiNodeScriptAttributes as isUiNodeScriptAttributes2,
+  isUiNodeTextAttributes,
+  UiNodeGroupEnum as UiNodeGroupEnum6
+} from "@ory/client-fetch";
+import { jsx as jsx76 } from "react/jsx-runtime";
+
+// src/components/form/social.tsx
+import { useFormContext as useFormContext14 } from "react-hook-form";
+import { jsx as jsx77 } from "react/jsx-runtime";
+
+// src/components/card/card-two-step.tsx
+import { Fragment as Fragment7, jsx as jsx78, jsxs as jsxs37 } from "react/jsx-runtime";
+
+// src/components/form/groups.tsx
+import { jsx as jsx79 } from "react/jsx-runtime";
+
+// src/components/form/section.tsx
+import { useFormContext as useFormContext16 } from "react-hook-form";
+import { jsx as jsx80 } from "react/jsx-runtime";
+
+// src/components/generic/divider.tsx
+import { jsx as jsx81 } from "react/jsx-runtime";
+
+// src/components/generic/page-header.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+
+// src/components/settings/settings-card.tsx
+import { UiNodeGroupEnum as UiNodeGroupEnum8 } from "@ory/client-fetch";
+import { useIntl as useIntl19 } from "react-intl";
+
+// src/components/settings/oidc-settings.tsx
+import { useIntl as useIntl14 } from "react-intl";
+import { useFormContext as useFormContext17 } from "react-hook-form";
+import { Fragment as Fragment8, jsx as jsx83, jsxs as jsxs38 } from "react/jsx-runtime";
+
+// src/components/settings/passkey-settings.tsx
+import { useFormContext as useFormContext18 } from "react-hook-form";
+import { useIntl as useIntl15 } from "react-intl";
+import { Fragment as Fragment9, jsx as jsx84, jsxs as jsxs39 } from "react/jsx-runtime";
+
+// src/components/settings/recovery-codes-settings.tsx
+import { useIntl as useIntl16 } from "react-intl";
+import { useFormContext as useFormContext19 } from "react-hook-form";
+import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs40 } from "react/jsx-runtime";
+
+// src/components/settings/totp-settings.tsx
+import { useFormContext as useFormContext20 } from "react-hook-form";
+import { useIntl as useIntl17 } from "react-intl";
+import { Fragment as Fragment11, jsx as jsx86, jsxs as jsxs41 } from "react/jsx-runtime";
+
+// src/components/settings/webauthn-settings.tsx
+import { useFormContext as useFormContext21 } from "react-hook-form";
+import { useIntl as useIntl18 } from "react-intl";
+import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs42 } from "react/jsx-runtime";
+
+// src/components/settings/settings-card.tsx
+import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs43 } from "react/jsx-runtime";
+
+// src/context/intl-context.tsx
+import { jsx as jsx89 } from "react/jsx-runtime";
+
+// src/context/provider.tsx
+import { jsx as jsx90 } from "react/jsx-runtime";
+
+// src/components/form/nodes/input.tsx
+import {
+  UiNodeInputAttributesTypeEnum
+} from "@ory/client-fetch";
+import { useEffect as useEffect5, useRef } from "react";
+import { useFormContext as useFormContext22 } from "react-hook-form";
+import { jsx as jsx91 } from "react/jsx-runtime";
+var NodeInput = ({
+  node,
+  attributes
+}) => {
+  var _a;
+  const { Node: Node2 } = useComponents();
+  const { setValue } = useFormContext22();
+  const {
+    onloadTrigger,
+    onclickTrigger,
+    // These properties do not exist on input fields so we remove them (as we already have handled them).
+    onclick: _ignoredOnclick,
+    onload: _ignoredOnload,
+    //
+    ...attrs
+  } = attributes;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
+  const setFormValue = () => {
+    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
+      setValue(attrs.name, attrs.value);
+    }
+  };
+  const hasRun = useRef(false);
+  useEffect5(
+    () => {
+      setFormValue();
+      if (!hasRun.current && onloadTrigger) {
+        hasRun.current = true;
+        triggerToWindowCall(onloadTrigger);
+      }
+    },
+    // TODO(jonas): make sure onloadTrigger is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
+    []
+  );
+  const handleClick = () => {
+    setFormValue();
+    if (onclickTrigger) {
+      triggerToWindowCall(onclickTrigger);
+    }
+  };
+  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
+  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
+  switch (attributes.type) {
+    case UiNodeInputAttributesTypeEnum.Submit:
+    case UiNodeInputAttributesTypeEnum.Button:
+      if (isSocial) {
+        return null;
+      }
+      if (isResendNode || isScreenSelectionNode) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx91(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ jsx91(Node2.Button, { attributes: attrs, node, onClick: handleClick })
+        }
+      );
+    case UiNodeInputAttributesTypeEnum.DatetimeLocal:
+      throw new Error("Not implemented");
+    case UiNodeInputAttributesTypeEnum.Checkbox:
+      return /* @__PURE__ */ jsx91(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ jsx91(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
+        }
+      );
+    case UiNodeInputAttributesTypeEnum.Hidden:
+      return /* @__PURE__ */ jsx91(Node2.Input, { attributes: attrs, node, onClick: handleClick });
+    default:
+      if (isPinCodeInput) {
+        return /* @__PURE__ */ jsx91(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx91(
+          Node2.CodeInput,
+          {
+            attributes: attrs,
+            node,
+            onClick: handleClick
+          }
+        ) });
+      }
+      return /* @__PURE__ */ jsx91(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx91(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
+  }
+};
+
+// src/theme/default/components/form/captcha.tsx
+import { jsx as jsx92 } from "react/jsx-runtime";
+var DefaultCaptcha = ({ node }) => {
+  const { setValue } = useFormContext23();
+  const ref = useRef2();
+  const nodes = [];
+  if (isUiNodeInputAttributes7(node.attributes)) {
+    if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
+      nodes.push(/* @__PURE__ */ jsx92(NodeInput, { node, attributes: node.attributes }, 1));
+    }
+  }
+  if (isUiNodeInputAttributes7(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
+    const options = JSON.parse(node.attributes.value);
+    nodes.push(
+      /* @__PURE__ */ jsx92(
+        Turnstile,
+        {
+          ref,
+          siteKey: options.sitekey,
+          options: {
+            action: options.action,
+            size: "flexible",
+            theme: options.theme,
+            responseField: false,
+            responseFieldName: options.response_field_name
+          },
+          onExpire: () => {
+            var _a;
+            return (_a = ref.current) == null ? void 0 : _a.reset();
+          },
+          onSuccess: (token) => {
+            setValue(options.response_field_name, token);
+          }
+        },
+        2
+      )
+    );
+  }
+  return nodes;
+};
+
 // src/theme/default/components/default-components.tsx
 function getOryComponents(overrides) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja;
   return {
     Card: {
       Root: (_b = (_a = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _a.Root) != null ? _b : DefaultCard,
@@ -2384,44 +2942,45 @@ function getOryComponents(overrides) {
       Label: (_H = (_G = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _G.Label) != null ? _H : DefaultLabel,
       Checkbox: (_J = (_I = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _I.Checkbox) != null ? _J : DefaultCheckbox,
       Text: (_L = (_K = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _K.Text) != null ? _L : DefaultText,
-      Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton
+      Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton,
+      Captcha: (_P = (_O = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _O.Captcha) != null ? _P : DefaultCaptcha
     },
     Form: {
-      Root: (_P = (_O = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _O.Root) != null ? _P : DefaultFormContainer,
-      Group: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Group) != null ? _R : DefaultGroupContainer,
-      OidcRoot: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.OidcRoot) != null ? _T : DefaultSocialButtonContainer,
-      RecoveryCodesSettings: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.RecoveryCodesSettings) != null ? _V : DefaultSettingsRecoveryCodes,
-      TotpSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.TotpSettings) != null ? _X : DefaultSettingsTotp,
-      OidcSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.OidcSettings) != null ? _Z : DefaultSettingsOidc,
-      WebauthnSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.WebauthnSettings) != null ? _$ : DefaultSettingsWebauthn,
-      PasskeySettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.PasskeySettings) != null ? _ba : DefaultSettingsPasskey
+      Root: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Root) != null ? _R : DefaultFormContainer,
+      Group: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.Group) != null ? _T : DefaultGroupContainer,
+      OidcRoot: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.OidcRoot) != null ? _V : DefaultSocialButtonContainer,
+      RecoveryCodesSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.RecoveryCodesSettings) != null ? _X : DefaultSettingsRecoveryCodes,
+      TotpSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.TotpSettings) != null ? _Z : DefaultSettingsTotp,
+      OidcSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.OidcSettings) != null ? _$ : DefaultSettingsOidc,
+      WebauthnSettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.WebauthnSettings) != null ? _ba : DefaultSettingsWebauthn,
+      PasskeySettings: (_da = (_ca = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _ca.PasskeySettings) != null ? _da : DefaultSettingsPasskey
     },
     Message: {
-      Root: (_da = (_ca = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ca.Root) != null ? _da : DefaultMessageContainer,
-      Content: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Content) != null ? _fa : DefaultMessage
+      Root: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Root) != null ? _fa : DefaultMessageContainer,
+      Content: (_ha = (_ga = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ga.Content) != null ? _ha : DefaultMessage
     },
     Page: {
-      Header: (_ha = (_ga = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ga.Header) != null ? _ha : DefaultPageHeader
+      Header: (_ja = (_ia = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ia.Header) != null ? _ja : DefaultPageHeader
     }
   };
 }
 
 // src/theme/default/flows/error.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
-function Error({
+import { jsx as jsx93 } from "react/jsx-runtime";
+function Error2({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsx65("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ jsx93("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
-import { FlowType as FlowType8 } from "@ory/client-fetch";
+import { FlowType as FlowType17 } from "@ory/client-fetch";
 import {
   OryProvider,
-  OryTwoStepCard
+  OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 function Login({
   flow,
   config,
@@ -2429,25 +2988,25 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx94(
     OryProvider,
     {
       config,
       flow,
-      flowType: FlowType8.Login,
+      flowType: FlowType17.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx66(OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsx94(OryTwoStepCard2, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
-import { FlowType as FlowType9 } from "@ory/client-fetch";
+import { FlowType as FlowType18 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider2,
-  OryTwoStepCard as OryTwoStepCard2
+  OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function Recovery({
   flow,
   config,
@@ -2455,25 +3014,25 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx95(
     OryProvider2,
     {
       config,
       flow,
-      flowType: FlowType9.Recovery,
+      flowType: FlowType18.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx67(OryTwoStepCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx95(OryTwoStepCard3, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
-import { FlowType as FlowType10 } from "@ory/client-fetch";
+import { FlowType as FlowType19 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider3,
-  OryTwoStepCard as OryTwoStepCard3
+  OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 function Registration({
   flow,
   children,
@@ -2481,26 +3040,26 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx96(
     OryProvider3,
     {
       config,
       flow,
-      flowType: FlowType10.Registration,
+      flowType: FlowType19.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx68(OryTwoStepCard3, {})
+      children: children != null ? children : /* @__PURE__ */ jsx96(OryTwoStepCard4, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
-import { FlowType as FlowType11 } from "@ory/client-fetch";
+import { FlowType as FlowType20 } from "@ory/client-fetch";
 import {
   HeadlessPageHeader,
   OryProvider as OryProvider4,
   OrySettingsCard
 } from "@ory/elements-react";
-import { Fragment as Fragment5, jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx97, jsxs as jsxs44 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -2508,28 +3067,28 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx97(
     OryProvider4,
     {
       config,
       flow,
-      flowType: FlowType11.Settings,
+      flowType: FlowType20.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs36(Fragment5, { children: [
-        /* @__PURE__ */ jsx69(HeadlessPageHeader, {}),
-        /* @__PURE__ */ jsx69(OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsxs44(Fragment14, { children: [
+        /* @__PURE__ */ jsx97(HeadlessPageHeader, {}),
+        /* @__PURE__ */ jsx97(OrySettingsCard, {})
       ] })
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
-import { FlowType as FlowType12 } from "@ory/client-fetch";
+import { FlowType as FlowType21 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider5,
-  OryTwoStepCard as OryTwoStepCard4
+  OryTwoStepCard as OryTwoStepCard5
 } from "@ory/elements-react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 function Verification({
   flow,
   config,
@@ -2537,14 +3096,14 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx98(
     OryProvider5,
     {
       config,
       flow,
-      flowType: FlowType12.Verification,
+      flowType: FlowType21.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx70(OryTwoStepCard4, {})
+      children: children != null ? children : /* @__PURE__ */ jsx98(OryTwoStepCard5, {})
     }
   );
 }
@@ -2560,7 +3119,7 @@ export {
   DefaultFormContainer,
   DefaultMessage,
   DefaultMessageContainer,
-  Error,
+  Error2 as Error,
   Login,
   Recovery,
   Registration,