@ory/elements-react 1.0.0-next.31 → 1.0.0-next.33

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) {
@@ -141,7 +311,7 @@ function RegistrationCardFooter() {
       );
     }
   }
-  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",
@@ -160,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",
@@ -182,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") {
@@ -201,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) {
@@ -315,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(
@@ -346,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({
@@ -393,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;
 
@@ -410,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;
@@ -430,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",
@@ -439,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,
@@ -447,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 })
       ] })
     }
   );
@@ -484,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, {})
   ] }) });
 }
 
@@ -556,45 +738,45 @@ 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" })
     ] }) })
   ] });
 };
@@ -602,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;
 
@@ -743,7 +925,7 @@ var logos = {
 var provider_logos_default = logos;
 
 // 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",
@@ -758,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",
@@ -767,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",
@@ -782,7 +964,7 @@ function Spinner({ className }) {
 }
 
 // src/theme/default/components/form/social.tsx
-import { Fragment as Fragment2, 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;
@@ -838,21 +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" }) }),
+        /* @__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__ */ jsx26("span", { className: "grow text-center font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }),
-          /* @__PURE__ */ jsx26("span", { className: "size-5 block" })
+          /* @__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", {
@@ -867,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,
@@ -891,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(
@@ -903,7 +1085,7 @@ function DefaultMessageContainer({ children }) {
 }
 function DefaultMessage({ message }) {
   const intl = useIntl4();
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
       className: cn(
@@ -923,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(
@@ -985,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`
           }) })
         ] })
@@ -1006,7 +1217,7 @@ 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 } from "react";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+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",
@@ -1090,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) }) : ""
       ]
     }
   );
@@ -1167,7 +1378,7 @@ var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
 };
 
 // src/theme/default/components/ui/checkbox-label.tsx
-import { Fragment as Fragment3, 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 = [];
@@ -1183,7 +1394,7 @@ function computeLabelElements(labelText) {
       elements.push(labelText.slice(lastIndex, matchStart));
     }
     elements.push(
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx37(
         "a",
         {
           href: url,
@@ -1208,13 +1419,13 @@ function CheckboxLabel({ label }) {
     return null;
   }
   const labelText = uiTextToFormattedMessage4(label, intl);
-  return /* @__PURE__ */ jsx34(Fragment3, { 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",
@@ -1223,7 +1434,7 @@ function CheckboxSVG() {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx38(
         "path",
         {
           fillRule: "evenodd",
@@ -1254,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,
@@ -1268,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(
@@ -1289,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
@@ -1312,9 +1523,33 @@ import {
   uiTextToFormattedMessage as uiTextToFormattedMessage6,
   useOryFlow as useOryFlow7
 } from "@ory/elements-react";
+import { useRef, useState as useState2 } from "react";
 import { useFormContext as useFormContext4 } from "react-hook-form";
 import { useIntl as useIntl9 } from "react-intl";
-import { jsx as jsx39 } from "react/jsx-runtime";
+
+// src/theme/default/assets/icons/eye-off.svg
+import * as React24 from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var SvgEyeOff = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx42("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__ */ jsx42("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.585 10.587a2 2 0 0 0 2.829 2.828m3.267 3.258A8.7 8.7 0 0 1 12 18q-5.4 0-9-6 1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6-1 1.665-2.138 2.87M3 3l18 18" }) });
+};
+var eye_off_default = SvgEyeOff;
+
+// src/theme/default/assets/icons/eye.svg
+import * as React25 from "react";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var SvgEye = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx43("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__ */ jsxs23("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx43("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ jsx43("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/components/form/input.tsx
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var DefaultInput = ({
   node,
   attributes,
@@ -1332,6 +1567,7 @@ var DefaultInput = ({
   } = attributes;
   const intl = useIntl9();
   const { flowType } = useOryFlow7();
+  const inputRef = useRef(null);
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
@@ -1341,29 +1577,79 @@ var DefaultInput = ({
       placeholder: uiTextToFormattedMessage6(label, intl)
     }
   ) : "";
-  return /* @__PURE__ */ jsx39(
-    "input",
+  if (rest.type === "hidden") {
+    return /* @__PURE__ */ jsx44(
+      "input",
+      {
+        ...rest,
+        onClick,
+        maxLength: maxlength,
+        autoComplete: autocomplete,
+        placeholder: formattedLabel,
+        "data-testid": `ory/form/node/input/${name}`,
+        ...register(name, { value })
+      }
+    );
+  }
+  const { ref, ...restRegister } = register(name, { value });
+  return /* @__PURE__ */ jsxs24(
+    "div",
     {
-      ...rest,
-      onClick,
-      maxLength: maxlength,
-      autoComplete: autocomplete,
-      placeholder: formattedLabel,
-      "data-testid": `ory/form/node/input/${name}`,
       className: cn(
-        "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0",
-        "bg-input-background-default border-input-border-default text-input-foreground-primary",
-        "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
-        "focus:border-input-border-focus focus-visible:border-input-border-focus",
-        "hover:bg-input-background-hover hover:border-input-border-hover",
-        "px-4 py-[13px]",
+        "relative flex justify-stretch",
         // 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 === FlowType5.Settings && "max-w-[488px]"
       ),
-      ...register(name, { value })
+      children: [
+        /* @__PURE__ */ jsx44(
+          "input",
+          {
+            ...rest,
+            onClick,
+            maxLength: maxlength,
+            autoComplete: autocomplete,
+            placeholder: formattedLabel,
+            "data-testid": `ory/form/node/input/${name}`,
+            className: cn(
+              "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0 w-full",
+              "bg-input-background-default border-input-border-default text-input-foreground-primary",
+              "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
+              "focus:border-input-border-focus focus-visible:border-input-border-focus",
+              "hover:bg-input-background-hover hover:border-input-border-hover",
+              "px-4 py-[13px]"
+            ),
+            ref: (e) => {
+              inputRef.current = e;
+              ref(e);
+            },
+            ...restRegister
+          }
+        ),
+        rest.type === "password" && /* @__PURE__ */ jsx44(PasswordToggle, { inputRef })
+      ]
     }
   );
 };
+function PasswordToggle({
+  inputRef
+}) {
+  const [shown, setShown] = useState2(false);
+  const handleClick = () => {
+    setShown(!shown);
+    if (inputRef.current) {
+      inputRef.current.type = shown ? "password" : "text";
+    }
+  };
+  return /* @__PURE__ */ jsx44(
+    "button",
+    {
+      onClick: handleClick,
+      className: "absolute right-0 h-full w-12 flex items-center justify-center",
+      type: "button",
+      children: shown ? /* @__PURE__ */ jsx44(eye_off_default, {}) : /* @__PURE__ */ jsx44(eye_default, {})
+    }
+  );
+}
 
 // src/theme/default/components/form/label.tsx
 import {
@@ -1374,12 +1660,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 jsx45, jsxs as jsxs25 } 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")
@@ -1393,7 +1679,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";
@@ -1404,9 +1690,9 @@ 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(
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1 antialiased", children: [
+    label && /* @__PURE__ */ jsxs25("span", { className: "inline-flex justify-between", children: [
+      /* @__PURE__ */ jsx45(
         "label",
         {
           ...messageTestId3(label),
@@ -1418,7 +1704,7 @@ function DefaultLabel({
         }
       ),
       isPassword && config.project.recovery_enabled && flowType === FlowType6.Login && // TODO: make it possible to override with a custom component
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx45(
         "a",
         {
           href: initFlowUrl(config.sdk.url, "recovery", flow),
@@ -1429,7 +1715,7 @@ function DefaultLabel({
           })
         }
       ),
-      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx40(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx45(
         "button",
         {
           type: "submit",
@@ -1442,8 +1728,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__ */ jsx45(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx45(Message.Content, { message: fieldError })
   ] });
 }
 
@@ -1454,11 +1740,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 jsx46 } from "react/jsx-runtime";
 var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
   const intl = useIntl11();
   const label = getNodeLabel5(node);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx46(
     "a",
     {
       ...attributes,
@@ -1479,9 +1765,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 React26 from "react";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+var InputOTP = React26.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx47(
   OTPInput,
   {
     ref,
@@ -1494,12 +1780,12 @@ 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 = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("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 = React26.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React26.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref,
@@ -1511,8 +1797,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__ */ jsx47("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ jsx47("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx47("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
       ]
     }
   );
@@ -1522,7 +1808,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 jsx48 } from "react/jsx-runtime";
 var DefaultPinCodeInput = ({ attributes }) => {
   const { setValue, watch } = useFormContext6();
   const { maxlength, name } = attributes;
@@ -1532,14 +1818,14 @@ var DefaultPinCodeInput = ({ attributes }) => {
     setValue(name, v);
   };
   const value = watch(name);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx48(
     InputOTP,
     {
       maxLength: maxlength != null ? maxlength : 6,
       onChange: handleInputChange,
       name,
       value,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx48(
         InputOTPGroup,
         {
           className: cn(
@@ -1547,7 +1833,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__ */ jsx48(InputOTPSlot, { index }, index))
         }
       )
     }
@@ -1555,13 +1841,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 jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 var DefaultFormSection = ({
   children,
   nodes: _nodes,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx49(
     "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",
@@ -1575,10 +1861,10 @@ var DefaultFormSectionContent = ({
   description,
   children
 }) => {
-  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 })
+  return /* @__PURE__ */ jsxs27("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__ */ jsxs27("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx49("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx49("span", { className: "text-interface-foreground-default-secondary", children: description })
     ] }),
     children
   ] });
@@ -1587,14 +1873,14 @@ var DefaultFormSectionFooter = ({
   children,
   text
 }) => {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
         "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__ */ jsx49("span", { children: text }),
         children
       ]
     }
@@ -1604,31 +1890,31 @@ 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 Fragment4, jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl12();
   const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
   if (lookup) {
-    return /* @__PURE__ */ jsxs26(Fragment4, { children: [
-      /* @__PURE__ */ jsx45("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
-      lookup.map((text, index) => /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsxs28(Fragment4, { children: [
+      /* @__PURE__ */ jsx50("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
+      lookup.map((text, index) => /* @__PURE__ */ jsx50(
         "pre",
         {
           "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
-          children: /* @__PURE__ */ jsx45("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
+          children: /* @__PURE__ */ jsx50("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
         },
         index
       ))
     ] });
   }
-  return /* @__PURE__ */ jsx45(Fragment4, { children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx50(Fragment4, { children: /* @__PURE__ */ jsxs28(
     "p",
     {
       "data-testid": `ory/form/node/text/${attributes.id}/label`,
       id: attributes.id,
       children: [
-        node.meta.label ? /* @__PURE__ */ jsx45("label", { children: uiTextToFormattedMessage9(node.meta.label, intl) }) : null,
+        node.meta.label ? /* @__PURE__ */ jsx50("label", { children: uiTextToFormattedMessage9(node.meta.label, intl) }) : null,
         attributes.text ? uiTextToFormattedMessage9(attributes.text, intl) : ""
       ]
     }
@@ -1636,11 +1922,11 @@ function DefaultText({ node, attributes }) {
 }
 
 // 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 useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
 
 // src/util/client.ts
@@ -1661,22 +1947,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 React27 from "react";
+import { jsx as jsx51 } 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__ */ jsx51("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__ */ jsx51("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 React28 from "react";
+import { jsx as jsx52, jsxs as jsxs29 } 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__ */ jsx52("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__ */ jsxs29("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx52("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__ */ jsx52("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
   ] }) });
 };
 var settings_default = SvgSettings;
@@ -1723,10 +2009,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 jsx53 } 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__ */ jsx53(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx53(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1741,7 +2027,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__ */ jsx53(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1759,7 +2045,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__ */ jsx53(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1777,32 +2063,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 React29 from "react";
+import { jsx as jsx54 } 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__ */ jsx54("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__ */ jsx54("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 jsx55 } from "react/jsx-runtime";
 var UserAvatar = forwardRef4(
   ({ initials, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx55(
       "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__ */ jsx55("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx55(
           "img",
           {
             src: initials.avatar,
             alt: initials.primary,
             className: "w-full object-contain"
           }
-        ) : /* @__PURE__ */ jsx50(
+        ) : /* @__PURE__ */ jsx55(
           user_default,
           {
             size: 24,
@@ -1816,11 +2102,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 jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const { config } = useOryFlow10();
   const initials = getUserInitials(session);
-  const [logoutFlow, setLogoutFlow] = useState2();
+  const [logoutFlow, setLogoutFlow] = useState3();
   const fetchLogoutFlow = useCallback(async () => {
     const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
     setLogoutFlow(flow);
@@ -1828,22 +2114,22 @@ var UserMenu = ({ session }) => {
   useEffect3(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
-  return /* @__PURE__ */ jsxs28(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx51(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(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__ */ 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 })
+  return /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx56(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(UserAvatar, { initials }) }),
+    /* @__PURE__ */ jsxs30(DropdownMenuContent, { children: [
+      /* @__PURE__ */ jsxs30(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
+        /* @__PURE__ */ jsx56(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ jsxs30("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx56("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ jsx56("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__ */ jsx56(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs30("a", { href: "/settings", children: [
+        /* @__PURE__ */ jsx56(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__ */ jsx56(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs30("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
+        /* @__PURE__ */ jsx56(logout_default, { size: 16 }),
         " Logout"
       ] }) })
     ] })
@@ -1852,13 +2138,13 @@ 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 jsx57, jsxs as jsxs31 } 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__ */ jsx57("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__ */ jsx57("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs31("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+    /* @__PURE__ */ jsx57("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx57(Card.Logo, {}) }),
+    /* @__PURE__ */ jsx57(UserMenu, { session })
   ] }) }) });
 };
 
@@ -1868,26 +2154,26 @@ 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 React30 from "react";
+import { jsx as jsx58 } 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__ */ jsx58("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__ */ jsx58("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 jsx59, jsxs as jsxs32 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
   unlinkButtons
 }) {
   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) => {
+  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-8", children: [
+    hasLinkButtons && /* @__PURE__ */ jsx59("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__ */ jsx59(
         DefaultButtonSocial,
         {
           showLabel: true,
@@ -1898,12 +2184,12 @@ function DefaultSettingsOidc({
         attrs.value
       );
     }) }),
-    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx54(DefaultHorizontalDivider, {}) : null,
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx59(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
       if (button.attributes.node_type !== "input") {
         return null;
       }
-      return /* @__PURE__ */ jsx54(UnlinkRow, { button }, button.attributes.value);
+      return /* @__PURE__ */ jsx59(UnlinkRow, { button }, button.attributes.value);
     })
   ] });
 }
@@ -1925,12 +2211,12 @@ function UnlinkRow({ button }) {
       setClicked(false);
     }
   }, [isSubmitting, setClicked]);
-  return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
-      Logo ? /* @__PURE__ */ jsx54(Logo, { size: 32 }) : /* @__PURE__ */ jsx54(provider_logos_default.generic, { size: 32 }),
-      /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+  return /* @__PURE__ */ jsxs32("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-6", children: [
+      Logo ? /* @__PURE__ */ jsx59(Logo, { size: 32 }) : /* @__PURE__ */ jsx59(provider_logos_default.generic, { size: 32 }),
+      /* @__PURE__ */ jsx59("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
     ] }),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx59(
       "button",
       {
         ...attrs,
@@ -1939,7 +2225,7 @@ function UnlinkRow({ button }) {
         disabled: isSubmitting,
         className: "relative",
         title: `Unlink ${provider}`,
-        children: clicked ? /* @__PURE__ */ jsx54(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx54(
+        children: clicked ? /* @__PURE__ */ jsx59(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx59(
           trash_default,
           {
             className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -1952,9 +2238,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 jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
@@ -1962,10 +2248,10 @@ function DefaultSettingsPasskey({
   const {
     formState: { isSubmitting }
   } = useFormContext8();
-  const { Node: Node2 } = 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(
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsx60("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx60(
       Node2.Button,
       {
         node: triggerButton,
@@ -1973,38 +2259,38 @@ function DefaultSettingsPasskey({
         onClick: triggerButton.onClick
       }
     ) }),
-    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) => {
+    hasRemoveButtons ? /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx60(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ jsx60("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;
         const displayName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
-        return /* @__PURE__ */ jsxs31(
+        return /* @__PURE__ */ jsxs33(
           "div",
           {
             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__ */ jsxs33("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ jsx60(
                   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__ */ jsxs33("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ jsxs33("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ jsx60("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ jsx60("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__ */ jsx60("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx60(
                 "button",
                 {
                   ...node.attributes,
@@ -2012,7 +2298,7 @@ function DefaultSettingsPasskey({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx55(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx55(
+                  children: isSubmitting ? /* @__PURE__ */ jsx60(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx60(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2031,38 +2317,26 @@ function DefaultSettingsPasskey({
 }
 
 // src/theme/default/assets/icons/download.svg
-import * as React27 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import * as React31 from "react";
+import { jsx as jsx61 } 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__ */ 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: "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";
-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" })
-  ] }) });
-};
-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 React32 from "react";
+import { jsx as jsx62 } 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__ */ jsx62("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__ */ jsx62("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 Fragment5, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
@@ -2084,12 +2358,12 @@ function DefaultSettingsRecoveryCodes({
     element.click();
   };
   const hasCodes = codes.length >= 1;
-  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
-    codes.length > 0 && /* @__PURE__ */ jsx59(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__ */ jsxs33("div", { className: "flex gap-2", children: [
-        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-8", children: [
+    codes.length > 0 && /* @__PURE__ */ jsx63(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ jsxs34("div", { className: "flex gap-4 justify-between", children: [
+      /* @__PURE__ */ jsx63("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx63(
           "button",
           {
             ...regnerateButton.attributes,
@@ -2098,7 +2372,7 @@ function DefaultSettingsRecoveryCodes({
             onClick: onRegenerate,
             disabled: isSubmitting,
             "data-loading": isSubmitting,
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx63(
               refresh_default,
               {
                 size: 24,
@@ -2107,7 +2381,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ),
-        revealButton && /* @__PURE__ */ jsx59(Fragment5, { children: /* @__PURE__ */ jsx59(
+        revealButton && /* @__PURE__ */ jsx63(Fragment5, { children: /* @__PURE__ */ jsx63(
           "button",
           {
             ...revealButton.attributes,
@@ -2115,7 +2389,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             onClick: onReveal,
             title: "Reveal recovery codes",
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx63(
               eye_default,
               {
                 size: 24,
@@ -2124,7 +2398,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ) }),
-        hasCodes && /* @__PURE__ */ jsx59(
+        hasCodes && /* @__PURE__ */ jsx63(
           "button",
           {
             onClick: onDownload,
@@ -2132,7 +2406,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             "data-testid": "ory/screen/settings/group/recovery_code/download",
             title: "Download recovery codes",
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx63(
               download_default,
               {
                 size: 24,
@@ -2143,32 +2417,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__ */ jsx63("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx63(
       "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__ */ jsx63("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 React33 from "react";
+import { jsx as jsx64 } 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__ */ jsx64("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__ */ jsx64("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 jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultSettingsTotp({
   totpImage,
   totpInput,
@@ -2176,7 +2450,7 @@ function DefaultSettingsTotp({
   totpUnlink,
   onUnlink
 }) {
-  const { Node: Node2, Card } = useComponents5();
+  const { Node: Node2, Card } = useComponents6();
   const {
     formState: { isSubmitting }
   } = useFormContext10();
@@ -2188,19 +2462,19 @@ function DefaultSettingsTotp({
       node_type: _ignoredNodeType,
       ...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__ */ 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(
+    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx65("div", { className: "col-span-full", children: /* @__PURE__ */ jsx65(Card.Divider, {}) }),
+      /* @__PURE__ */ jsxs35("div", { className: "col-span-full flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx65("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx65(qrcode_default, { size: 32 }) }),
+        /* @__PURE__ */ jsx65("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx65("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+        /* @__PURE__ */ jsx65(
           "button",
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
             onClick: onUnlink,
             disabled: isSubmitting,
-            children: isSubmitting ? /* @__PURE__ */ jsx61(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx61(
+            children: isSubmitting ? /* @__PURE__ */ jsx65(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx65(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2213,9 +2487,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(
+    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx65("div", { className: "col-span-full", children: /* @__PURE__ */ jsx65(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ jsx65("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx65("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx65("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx65(
         Node2.Image,
         {
           node: totpImage,
@@ -2224,13 +2498,13 @@ function DefaultSettingsTotp({
           }
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx61(
+      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx65(
           Node2.Label,
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ jsx61(
+            children: /* @__PURE__ */ jsx65(
               Node2.Input,
               {
                 node: totpSecret,
@@ -2245,12 +2519,12 @@ function DefaultSettingsTotp({
             )
           }
         ),
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx65(
           Node2.Label,
           {
             attributes: totpInput.attributes,
             node: totpInput,
-            children: /* @__PURE__ */ jsx61(
+            children: /* @__PURE__ */ jsx65(
               Node2.CodeInput,
               {
                 node: totpInput,
@@ -2265,20 +2539,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 React34 from "react";
+import { jsx as jsx66 } 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__ */ jsx66("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__ */ jsx66("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 jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
@@ -2287,16 +2561,16 @@ function DefaultSettingsWebauthn({
   const {
     formState: { isSubmitting }
   } = useFormContext11();
-  const { Node: Node2, 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(
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
+      /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67(
         Node2.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
-          children: /* @__PURE__ */ jsx63(
+          children: /* @__PURE__ */ jsx67(
             Node2.Input,
             {
               node: nameInput,
@@ -2305,7 +2579,7 @@ function DefaultSettingsWebauthn({
           )
         }
       ) }),
-      triggerButton ? /* @__PURE__ */ jsx63(
+      triggerButton ? /* @__PURE__ */ jsx67(
         Node2.Button,
         {
           node: triggerButton,
@@ -2314,38 +2588,38 @@ 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) => {
+    hasRemoveButtons ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx67(Card.Divider, {}),
+      /* @__PURE__ */ jsx67("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;
         const displayName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
-        return /* @__PURE__ */ jsxs35(
+        return /* @__PURE__ */ jsxs36(
           "div",
           {
             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__ */ jsxs36("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ jsx67(
                   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__ */ jsxs36("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ jsxs36("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ jsx67("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ jsx67("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__ */ jsx67("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsx67(
                 "button",
                 {
                   ...node.attributes,
@@ -2353,7 +2627,7 @@ function DefaultSettingsWebauthn({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx63(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx63(
+                  children: isSubmitting ? /* @__PURE__ */ jsx67(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx67(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2372,126 +2646,42 @@ function DefaultSettingsWebauthn({
 }
 
 // src/theme/default/components/card/auth-method-list-container.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function DefaultAuthMethodListContainer({
   children
 }) {
-  return /* @__PURE__ */ jsx64("div", { className: "grid grid-cols-1 gap-2", children });
+  return /* @__PURE__ */ jsx68("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 { useRef as useRef3 } from "react";
 import { useFormContext as useFormContext23 } from "react-hook-form";
 
-// src/context/component.tsx
-import {
-  isUiNodeInputAttributes as isUiNodeInputAttributes2,
-  UiNodeGroupEnum
-} from "@ory/client-fetch";
-import { createContext, useContext as useContext2 } from "react";
-import { jsx as jsx65 } 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 useComponents7() {
-  const ctx = useContext2(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/context/flow-context.tsx
 import {
   createContext as createContext2,
   useContext as useContext3,
-  useState as useState3
+  useState as useState4
 } from "react";
 
 // src/context/form-state.ts
-import { FlowType as FlowType8 } from "@ory/client-fetch";
+import { FlowType as FlowType9 } from "@ory/client-fetch";
 import { useReducer } from "react";
 
 // src/components/card/card-two-step.utils.ts
-import { UiNodeGroupEnum as UiNodeGroupEnum2 } from "@ory/client-fetch";
-
-// src/util/ui/index.ts
-import { UiNodeGroupEnum as UiNodeGroupEnum3 } from "@ory/client-fetch";
-import { useMemo } from "react";
-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;
-}
+import { FlowType as FlowType8, UiNodeGroupEnum as UiNodeGroupEnum3 } from "@ory/client-fetch";
 
 // src/context/flow-context.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx69 } 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 jsx67 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 
 // src/components/form/form-provider.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum5 } from "@ory/client-fetch";
@@ -2504,16 +2694,16 @@ import { isUiNodeInputAttributes as isUiNodeInputAttributes3 } from "@ory/client
 import { isUiNodeInputAttributes as isUiNodeInputAttributes4 } from "@ory/client-fetch";
 
 // src/components/form/form-provider.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 
 // src/components/card/card.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 
 // src/components/card/footer.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 
 // src/components/card/content.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 
 // src/components/card/card-two-step.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum7 } from "@ory/client-fetch";
@@ -2521,6 +2711,7 @@ import { useFormContext as useFormContext15 } from "react-hook-form";
 
 // src/components/form/form.tsx
 import {
+  FlowType as FlowType16,
   isUiNodeAnchorAttributes,
   isUiNodeImageAttributes,
   isUiNodeInputAttributes as isUiNodeInputAttributes5,
@@ -2531,20 +2722,20 @@ import { useIntl as useIntl13 } from "react-intl";
 
 // src/components/form/useOryFormSubmit.ts
 import {
-  FlowType as FlowType14
+  FlowType as FlowType15
 } from "@ory/client-fetch";
 import { useFormContext as useFormContext12 } from "react-hook-form";
 
 // src/util/onSubmitLogin.ts
 import {
-  FlowType as FlowType9,
+  FlowType as FlowType10,
   handleFlowError,
   loginUrl
 } from "@ory/client-fetch";
 
 // src/util/onSubmitRecovery.ts
 import {
-  FlowType as FlowType10,
+  FlowType as FlowType11,
   handleContinueWith,
   handleFlowError as handleFlowError2,
   instanceOfContinueWithRecoveryUi,
@@ -2553,7 +2744,7 @@ import {
 
 // src/util/onSubmitRegistration.ts
 import {
-  FlowType as FlowType11,
+  FlowType as FlowType12,
   handleContinueWith as handleContinueWith2,
   handleFlowError as handleFlowError3,
   registrationUrl
@@ -2561,7 +2752,7 @@ import {
 
 // src/util/onSubmitSettings.ts
 import {
-  FlowType as FlowType12,
+  FlowType as FlowType13,
   handleContinueWith as handleContinueWith3,
   handleFlowError as handleFlowError4,
   isResponseError,
@@ -2571,16 +2762,16 @@ import {
 
 // src/util/onSubmitVerification.ts
 import {
-  FlowType as FlowType13,
+  FlowType as FlowType14,
   handleFlowError as handleFlowError5,
   verificationUrl
 } from "@ory/client-fetch";
 
 // src/components/form/form.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx75, jsxs as jsxs37 } from "react/jsx-runtime";
 
 // src/components/form/messages.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 
 // src/components/form/nodes/node.tsx
 import {
@@ -2591,27 +2782,27 @@ import {
   isUiNodeTextAttributes,
   UiNodeGroupEnum as UiNodeGroupEnum6
 } from "@ory/client-fetch";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 
 // src/components/form/social.tsx
 import { useFormContext as useFormContext14 } from "react-hook-form";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 
 // src/components/card/card-two-step.tsx
-import { Fragment as Fragment6, jsx as jsx76, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx79, jsxs as jsxs38 } from "react/jsx-runtime";
 
 // src/components/form/groups.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 
 // src/components/form/section.tsx
 import { useFormContext as useFormContext16 } from "react-hook-form";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 
 // src/components/generic/divider.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 
 // src/components/generic/page-header.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 
 // src/components/settings/settings-card.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum8 } from "@ory/client-fetch";
@@ -2620,50 +2811,50 @@ 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 Fragment7, jsx as jsx81, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx84, jsxs as jsxs39 } 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 Fragment8, jsx as jsx82, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs40 } 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 Fragment9, jsx as jsx83, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx86, jsxs as jsxs41 } 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 Fragment10, jsx as jsx84, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs42 } 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 Fragment11, jsx as jsx85, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs43 } from "react/jsx-runtime";
 
 // src/components/settings/settings-card.tsx
-import { Fragment as Fragment12, jsx as jsx86, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx89, jsxs as jsxs44 } from "react/jsx-runtime";
 
 // src/context/intl-context.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 
 // src/context/provider.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 
 // src/components/form/nodes/input.tsx
 import {
   UiNodeInputAttributesTypeEnum
 } from "@ory/client-fetch";
-import { useEffect as useEffect5, useRef } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 import { useFormContext as useFormContext22 } from "react-hook-form";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var NodeInput = ({
   node,
   attributes
 }) => {
   var _a;
-  const { Node: Node2 } = useComponents7();
+  const { Node: Node2 } = useComponents();
   const { setValue } = useFormContext22();
   const {
     onloadTrigger,
@@ -2681,7 +2872,7 @@ var NodeInput = ({
       setValue(attrs.name, attrs.value);
     }
   };
-  const hasRun = useRef(false);
+  const hasRun = useRef2(false);
   useEffect5(
     () => {
       setFormValue();
@@ -2711,30 +2902,30 @@ var NodeInput = ({
       if (isResendNode || isScreenSelectionNode) {
         return null;
       }
-      return /* @__PURE__ */ jsx89(
+      return /* @__PURE__ */ jsx92(
         Node2.Label,
         {
           attributes: { ...attrs, label: void 0 },
           node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsx89(Node2.Button, { attributes: attrs, node, onClick: handleClick })
+          children: /* @__PURE__ */ jsx92(Node2.Button, { attributes: attrs, node, onClick: handleClick })
         }
       );
     case UiNodeInputAttributesTypeEnum.DatetimeLocal:
       throw new Error("Not implemented");
     case UiNodeInputAttributesTypeEnum.Checkbox:
-      return /* @__PURE__ */ jsx89(
+      return /* @__PURE__ */ jsx92(
         Node2.Label,
         {
           attributes: { ...attrs, label: void 0 },
           node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsx89(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
+          children: /* @__PURE__ */ jsx92(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
         }
       );
     case UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ jsx89(Node2.Input, { attributes: attrs, node, onClick: handleClick });
+      return /* @__PURE__ */ jsx92(Node2.Input, { attributes: attrs, node, onClick: handleClick });
     default:
       if (isPinCodeInput) {
-        return /* @__PURE__ */ jsx89(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx89(
+        return /* @__PURE__ */ jsx92(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx92(
           Node2.CodeInput,
           {
             attributes: attrs,
@@ -2743,25 +2934,25 @@ var NodeInput = ({
           }
         ) });
       }
-      return /* @__PURE__ */ jsx89(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx89(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
+      return /* @__PURE__ */ jsx92(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx92(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
   }
 };
 
 // src/theme/default/components/form/captcha.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var DefaultCaptcha = ({ node }) => {
   const { setValue } = useFormContext23();
-  const ref = useRef2();
+  const ref = useRef3();
   const nodes = [];
   if (isUiNodeInputAttributes7(node.attributes)) {
     if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-      nodes.push(/* @__PURE__ */ jsx90(NodeInput, { node, attributes: node.attributes }, 1));
+      nodes.push(/* @__PURE__ */ jsx93(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__ */ jsx90(
+      /* @__PURE__ */ jsx93(
         Turnstile,
         {
           ref,
@@ -2838,21 +3029,21 @@ function getOryComponents(overrides) {
 }
 
 // src/theme/default/flows/error.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 function Error2({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsx91("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ jsx94("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
-import { FlowType as FlowType15 } from "@ory/client-fetch";
+import { FlowType as FlowType17 } from "@ory/client-fetch";
 import {
   OryProvider,
   OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function Login({
   flow,
   config,
@@ -2860,25 +3051,25 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx95(
     OryProvider,
     {
       config,
       flow,
-      flowType: FlowType15.Login,
+      flowType: FlowType17.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx92(OryTwoStepCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx95(OryTwoStepCard2, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
-import { FlowType as FlowType16 } from "@ory/client-fetch";
+import { FlowType as FlowType18 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider2,
   OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 function Recovery({
   flow,
   config,
@@ -2886,25 +3077,25 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx96(
     OryProvider2,
     {
       config,
       flow,
-      flowType: FlowType16.Recovery,
+      flowType: FlowType18.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx93(OryTwoStepCard3, {})
+      children: children != null ? children : /* @__PURE__ */ jsx96(OryTwoStepCard3, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
-import { FlowType as FlowType17 } from "@ory/client-fetch";
+import { FlowType as FlowType19 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider3,
   OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 function Registration({
   flow,
   children,
@@ -2912,26 +3103,26 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx97(
     OryProvider3,
     {
       config,
       flow,
-      flowType: FlowType17.Registration,
+      flowType: FlowType19.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx94(OryTwoStepCard4, {})
+      children: children != null ? children : /* @__PURE__ */ jsx97(OryTwoStepCard4, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
-import { FlowType as FlowType18 } 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 Fragment13, jsx as jsx95, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx98, jsxs as jsxs45 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -2939,28 +3130,28 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx98(
     OryProvider4,
     {
       config,
       flow,
-      flowType: FlowType18.Settings,
+      flowType: FlowType20.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs43(Fragment13, { children: [
-        /* @__PURE__ */ jsx95(HeadlessPageHeader, {}),
-        /* @__PURE__ */ jsx95(OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsxs45(Fragment14, { children: [
+        /* @__PURE__ */ jsx98(HeadlessPageHeader, {}),
+        /* @__PURE__ */ jsx98(OrySettingsCard, {})
       ] })
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
-import { FlowType as FlowType19 } from "@ory/client-fetch";
+import { FlowType as FlowType21 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider5,
   OryTwoStepCard as OryTwoStepCard5
 } from "@ory/elements-react";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 function Verification({
   flow,
   config,
@@ -2968,14 +3159,14 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx99(
     OryProvider5,
     {
       config,
       flow,
-      flowType: FlowType19.Verification,
+      flowType: FlowType21.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx96(OryTwoStepCard5, {})
+      children: children != null ? children : /* @__PURE__ */ jsx99(OryTwoStepCard5, {})
     }
   );
 }