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

package/dist/theme/default/index.js

@@ -154,13 +154,6 @@ var ComponentContext = (0, import_react.createContext)({
   nodeSorter: () => 0,
   groupSorter: () => 0
 });
-function useComponents() {
-  const ctx = (0, import_react.useContext)(ComponentContext);
-  if (!ctx) {
-    throw new Error("useComponents must be used within a ComponentProvider");
-  }
-  return ctx.components;
-}
 var defaultGroupOrder = [
   import_client_fetch.UiNodeGroupEnum.Default,
   import_client_fetch.UiNodeGroupEnum.Profile,
@@ -174,54 +167,6 @@ var defaultGroupOrder = [
 ];
 
 // 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 = {};
@@ -1554,9 +1499,33 @@ function DefaultImage({ attributes }) {
 // src/theme/default/components/form/input.tsx
 var import_client_fetch9 = require("@ory/client-fetch");
 var import_elements_react9 = require("@ory/elements-react");
+var import_react5 = require("react");
 var import_react_hook_form5 = require("react-hook-form");
 var import_react_intl9 = require("react-intl");
+
+// src/theme/default/assets/icons/eye-off.svg
+var React24 = __toESM(require("react"));
 var import_jsx_runtime42 = require("react/jsx-runtime");
+var SvgEyeOff = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsx)("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
+var React25 = __toESM(require("react"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var SvgEye = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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__ */ (0, import_jsx_runtime43.jsxs)("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var DefaultInput = ({
   node,
   attributes,
@@ -1574,6 +1543,7 @@ var DefaultInput = ({
   } = attributes;
   const intl = (0, import_react_intl9.useIntl)();
   const { flowType } = (0, import_elements_react9.useOryFlow)();
+  const inputRef = (0, import_react5.useRef)(null);
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
@@ -1583,36 +1553,86 @@ var DefaultInput = ({
       placeholder: (0, import_elements_react9.uiTextToFormattedMessage)(label, intl)
     }
   ) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    "input",
+  if (rest.type === "hidden") {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "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__ */ (0, import_jsx_runtime44.jsxs)(
+    "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 === import_client_fetch9.FlowType.Settings && "max-w-[488px]"
       ),
-      ...register(name, { value })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "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__ */ (0, import_jsx_runtime44.jsx)(PasswordToggle, { inputRef })
+      ]
     }
   );
 };
+function PasswordToggle({
+  inputRef
+}) {
+  const [shown, setShown] = (0, import_react5.useState)(false);
+  const handleClick = () => {
+    setShown(!shown);
+    if (inputRef.current) {
+      inputRef.current.type = shown ? "password" : "text";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "button",
+    {
+      onClick: handleClick,
+      className: "absolute right-0 h-full w-12 flex items-center justify-center",
+      type: "button",
+      children: shown ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(eye_off_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(eye_default, {})
+    }
+  );
+}
 
 // src/theme/default/components/form/label.tsx
 var import_client_fetch10 = require("@ory/client-fetch");
 var import_elements_react10 = require("@ory/elements-react");
 var import_react_hook_form6 = require("react-hook-form");
 var import_react_intl10 = require("react-intl");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("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")
@@ -1637,9 +1657,9 @@ function DefaultLabel({
     }
   };
   const fieldError = formState.errors[attributes.name];
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col gap-1 antialiased", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "inline-flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-1 antialiased", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "inline-flex justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "label",
         {
           ...(0, import_elements_react10.messageTestId)(label),
@@ -1651,7 +1671,7 @@ function DefaultLabel({
         }
       ),
       isPassword && config.project.recovery_enabled && flowType === import_client_fetch10.FlowType.Login && // TODO: make it possible to override with a custom component
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "a",
         {
           href: initFlowUrl(config.sdk.url, "recovery", flow),
@@ -1662,7 +1682,7 @@ function DefaultLabel({
           })
         }
       ),
-      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "button",
         {
           type: "submit",
@@ -1675,21 +1695,21 @@ function DefaultLabel({
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message.Content, { message }, message.id)),
-    fieldError && (0, import_client_fetch10.instanceOfUiText)(fieldError) && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message.Content, { message: fieldError })
+    node.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message.Content, { message }, message.id)),
+    fieldError && (0, import_client_fetch10.instanceOfUiText)(fieldError) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message.Content, { message: fieldError })
   ] });
 }
 
 // src/theme/default/components/form/link-button.tsx
 var import_client_fetch11 = require("@ory/client-fetch");
 var import_elements_react11 = require("@ory/elements-react");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_intl11 = require("react-intl");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var DefaultLinkButton = (0, import_react5.forwardRef)(({ attributes, node }, ref) => {
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var DefaultLinkButton = (0, import_react6.forwardRef)(({ attributes, node }, ref) => {
   const intl = (0, import_react_intl11.useIntl)();
   const label = (0, import_client_fetch11.getNodeLabel)(node);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "a",
     {
       ...attributes,
@@ -1710,9 +1730,9 @@ var import_react_hook_form7 = require("react-hook-form");
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 var import_input_otp = require("input-otp");
-var React24 = __toESM(require("react"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var InputOTP = React24.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var React26 = __toESM(require("react"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var InputOTP = React26.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   import_input_otp.OTPInput,
   {
     ref,
@@ -1725,12 +1745,12 @@ var InputOTP = React24.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React24.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React24.useContext(import_input_otp.OTPInputContext);
+var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React26.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
       ref,
@@ -1742,8 +1762,8 @@ var InputOTPSlot = React24.forwardRef(({ index, className, ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "inline-block size-4", children: char }),
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
       ]
     }
   );
@@ -1753,7 +1773,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 // src/theme/default/components/form/pin-code-input.tsx
 var import_elements_react12 = require("@ory/elements-react");
 var import_client_fetch12 = require("@ory/client-fetch");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var DefaultPinCodeInput = ({ attributes }) => {
   const { setValue, watch } = (0, import_react_hook_form7.useFormContext)();
   const { maxlength, name } = attributes;
@@ -1763,14 +1783,14 @@ var DefaultPinCodeInput = ({ attributes }) => {
     setValue(name, v);
   };
   const value = watch(name);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     InputOTP,
     {
       maxLength: maxlength != null ? maxlength : 6,
       onChange: handleInputChange,
       name,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         InputOTPGroup,
         {
           className: cn(
@@ -1778,7 +1798,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 === import_client_fetch12.FlowType.Settings && "max-w-[488px]"
           ),
-          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(InputOTPSlot, { index }, index))
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InputOTPSlot, { index }, index))
         }
       )
     }
@@ -1786,13 +1806,13 @@ var DefaultPinCodeInput = ({ attributes }) => {
 };
 
 // src/theme/default/components/form/section.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DefaultFormSection = ({
   children,
   nodes: _nodes,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "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",
@@ -1806,10 +1826,10 @@ var DefaultFormSectionContent = ({
   description,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("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__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-interface-foreground-default-secondary", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("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__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-interface-foreground-default-secondary", children: description })
     ] }),
     children
   ] });
@@ -1818,14 +1838,14 @@ var DefaultFormSectionFooter = ({
   children,
   text
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "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__ */ (0, import_jsx_runtime47.jsx)("span", { children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: text }),
         children
       ]
     }
@@ -1835,31 +1855,31 @@ var DefaultFormSectionFooter = ({
 // src/theme/default/components/form/text.tsx
 var import_elements_react13 = require("@ory/elements-react");
 var import_react_intl12 = require("react-intl");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = (0, import_react_intl12.useIntl)();
   const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
   if (lookup) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
-      lookup.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
+      lookup.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "pre",
         {
           "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" })
         },
         index
       ))
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "p",
     {
       "data-testid": `ory/form/node/text/${attributes.id}/label`,
       id: attributes.id,
       children: [
-        node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { children: (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) }) : null,
+        node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { children: (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) }) : null,
         attributes.text ? (0, import_elements_react13.uiTextToFormattedMessage)(attributes.text, intl) : ""
       ]
     }
@@ -1871,7 +1891,7 @@ var import_elements_react15 = require("@ory/elements-react");
 
 // src/theme/default/components/ui/user-menu.tsx
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_elements_react14 = require("@ory/elements-react");
 
 // src/util/client.ts
@@ -1889,22 +1909,22 @@ function frontendClient(sdkUrl, opts = {}) {
 }
 
 // src/theme/default/assets/icons/logout.svg
-var React25 = __toESM(require("react"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var React27 = __toESM(require("react"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SvgLogout = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime51.jsx)("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__ */ (0, import_jsx_runtime51.jsx)("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
-var React26 = __toESM(require("react"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var React28 = __toESM(require("react"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SvgSettings = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsxs)("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime52.jsxs)("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
   ] }) });
 };
 var settings_default = SvgSettings;
@@ -1949,12 +1969,12 @@ var getUserInitials = (session) => {
 };
 
 // src/theme/default/components/ui/dropdown-menu.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = (0, import_react6.forwardRef)(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var DropdownMenuContent = (0, import_react7.forwardRef)(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1969,7 +1989,7 @@ var DropdownMenuContent = (0, import_react6.forwardRef)(({ className, sideOffset
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = (0, import_react6.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var DropdownMenuItem = (0, import_react7.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1987,7 +2007,7 @@ var DropdownMenuItem = (0, import_react6.forwardRef)(({ className, inset, ...pro
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = (0, import_react6.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var DropdownMenuLabel = (0, import_react7.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2002,35 +2022,35 @@ var DropdownMenuLabel = (0, import_react6.forwardRef)(({ className, inset, ...pr
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 // src/theme/default/components/ui/user-avater.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/theme/default/assets/icons/user.svg
-var React27 = __toESM(require("react"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var React29 = __toESM(require("react"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var SvgUser = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsx)("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
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var UserAvatar = (0, import_react7.forwardRef)(
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var UserAvatar = (0, import_react8.forwardRef)(
   ({ initials, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "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__ */ (0, import_jsx_runtime53.jsx)("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "img",
           {
             src: initials.avatar,
             alt: initials.primary,
             className: "w-full object-contain"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           user_default,
           {
             size: 24,
@@ -2044,34 +2064,34 @@ var UserAvatar = (0, import_react7.forwardRef)(
 UserAvatar.displayName = "UserAvatar";
 
 // src/theme/default/components/ui/user-menu.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var UserMenu = ({ session }) => {
   const { config } = (0, import_elements_react14.useOryFlow)();
   const initials = getUserInitials(session);
-  const [logoutFlow, setLogoutFlow] = (0, import_react8.useState)();
-  const fetchLogoutFlow = (0, import_react8.useCallback)(async () => {
+  const [logoutFlow, setLogoutFlow] = (0, import_react9.useState)();
+  const fetchLogoutFlow = (0, import_react9.useCallback)(async () => {
     const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
     setLogoutFlow(flow);
   }, [config.sdk.url]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(UserAvatar, { initials }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenuContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_dropdown_menu.DropdownMenuLabel, { className: "flex gap-3 px-5 py-4.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(UserAvatar, { disabled: true, initials }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
-          initials.secondary && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserAvatar, { initials }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenuContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_dropdown_menu.DropdownMenuLabel, { className: "flex gap-3 px-5 py-4.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("a", { href: "/settings", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(settings_default, { size: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("a", { href: "/settings", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(settings_default, { size: 16 }),
         " User settings"
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(logout_default, { size: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(logout_default, { size: 16 }),
         " Logout"
       ] }) })
     ] })
@@ -2080,42 +2100,42 @@ var UserMenu = ({ session }) => {
 
 // src/theme/default/components/generic/page-header.tsx
 var import_client2 = require("@ory/elements-react/client");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DefaultPageHeader = (_props) => {
   const { Card } = (0, import_elements_react15.useComponents)();
   const { session } = (0, import_client2.useSession)();
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("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__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Card.Logo, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(UserMenu, { session })
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card.Logo, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(UserMenu, { session })
   ] }) }) });
 };
 
 // src/theme/default/components/settings/settings-oidc.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_hook_form8 = require("react-hook-form");
 var import_usehooks_ts2 = require("usehooks-ts");
 
 // src/theme/default/assets/icons/trash.svg
-var React28 = __toESM(require("react"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var React30 = __toESM(require("react"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var SvgTrash = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsx)("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
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function DefaultSettingsOidc({
   linkButtons,
   unlinkButtons
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    hasLinkButtons && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         DefaultButtonSocial,
         {
           showLabel: true,
@@ -2126,12 +2146,12 @@ function DefaultSettingsOidc({
         attrs.value
       );
     }) }),
-    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DefaultHorizontalDivider, {}) : null,
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
       if (button.attributes.node_type !== "input") {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(UnlinkRow, { button }, button.attributes.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(UnlinkRow, { button }, button.attributes.value);
     })
   ] });
 }
@@ -2148,17 +2168,17 @@ function UnlinkRow({ button }) {
     button.onClick();
     setClicked(true);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
   }, [isSubmitting, setClicked]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-6", children: [
-      Logo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Logo, { size: 32 }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(provider_logos_default.generic, { size: 32 }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-6", children: [
+      Logo ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Logo, { size: 32 }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(provider_logos_default.generic, { size: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "button",
       {
         ...attrs,
@@ -2167,7 +2187,7 @@ function UnlinkRow({ button }) {
         disabled: isSubmitting,
         className: "relative",
         title: `Unlink ${provider}`,
-        children: clicked ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        children: clicked ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           trash_default,
           {
             className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2182,7 +2202,7 @@ function UnlinkRow({ button }) {
 // src/theme/default/components/settings/settings-passkey.tsx
 var import_elements_react16 = require("@ory/elements-react");
 var import_react_hook_form9 = require("react-hook-form");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
@@ -2190,49 +2210,49 @@ function DefaultSettingsPasskey({
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form9.useFormContext)();
-  const { Node: Node2 } = (0, import_elements_react16.useComponents)();
+  const { Node } = (0, import_elements_react16.useComponents)();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      Node2.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      Node.Button,
       {
         node: triggerButton,
         attributes: triggerButton.attributes,
         onClick: triggerButton.onClick
       }
     ) }),
-    hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DefaultHorizontalDivider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+    hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime58.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "div",
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   passkey_default,
                   {
                     size: 32,
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-1 flex-col truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 "button",
                 {
                   ...node.attributes,
@@ -2240,7 +2260,7 @@ function DefaultSettingsPasskey({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2259,38 +2279,26 @@ function DefaultSettingsPasskey({
 }
 
 // src/theme/default/assets/icons/download.svg
-var React29 = __toESM(require("react"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var React31 = __toESM(require("react"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var SvgDownload = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsx)("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
-var React30 = __toESM(require("react"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var SvgEye = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsxs)("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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
-var React31 = __toESM(require("react"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var React32 = __toESM(require("react"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var SvgRefresh = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime62.jsx)("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
 var import_react_hook_form10 = require("react-hook-form");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
@@ -2312,12 +2320,12 @@ function DefaultSettingsRecoveryCodes({
     element.click();
   };
   const hasCodes = codes.length >= 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex gap-4 justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex gap-2", children: [
-        regnerateButton && codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-4 justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-2", children: [
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "button",
           {
             ...regnerateButton.attributes,
@@ -2326,7 +2334,7 @@ function DefaultSettingsRecoveryCodes({
             onClick: onRegenerate,
             disabled: isSubmitting,
             "data-loading": isSubmitting,
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               refresh_default,
               {
                 size: 24,
@@ -2335,7 +2343,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ),
-        revealButton && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        revealButton && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "button",
           {
             ...revealButton.attributes,
@@ -2343,7 +2351,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             onClick: onReveal,
             title: "Reveal recovery codes",
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               eye_default,
               {
                 size: 24,
@@ -2352,7 +2360,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ) }),
-        hasCodes && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        hasCodes && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "button",
           {
             onClick: onDownload,
@@ -2360,7 +2368,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             "data-testid": "ory/screen/settings/group/recovery_code/download",
             title: "Download recovery codes",
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               download_default,
               {
                 size: 24,
@@ -2371,12 +2379,12 @@ function DefaultSettingsRecoveryCodes({
         )
       ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    hasCodes ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "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__ */ (0, import_jsx_runtime62.jsx)("p", { children: code }, code))
+        children: codes.map((code) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: code }, code))
       }
     ) }) : null
   ] });
@@ -2386,17 +2394,17 @@ function DefaultSettingsRecoveryCodes({
 var import_elements_react17 = require("@ory/elements-react");
 
 // src/theme/default/assets/icons/qrcode.svg
-var React32 = __toESM(require("react"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var React33 = __toESM(require("react"));
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var SvgQrcode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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__ */ (0, import_jsx_runtime63.jsx)("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__ */ (0, import_jsx_runtime64.jsx)("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__ */ (0, import_jsx_runtime64.jsx)("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
 var import_react_hook_form11 = require("react-hook-form");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function DefaultSettingsTotp({
   totpImage,
   totpInput,
@@ -2404,7 +2412,7 @@ function DefaultSettingsTotp({
   totpUnlink,
   onUnlink
 }) {
-  const { Node: Node2, Card } = (0, import_elements_react17.useComponents)();
+  const { Node, Card } = (0, import_elements_react17.useComponents)();
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form11.useFormContext)();
@@ -2416,19 +2424,19 @@ function DefaultSettingsTotp({
       node_type: _ignoredNodeType,
       ...buttonAttrs
     } = totpUnlink.attributes;
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Card.Divider, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "col-span-full flex items-center gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(qrcode_default, { size: 32 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Card.Divider, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "col-span-full flex items-center gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(qrcode_default, { size: 32 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "button",
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
             onClick: onUnlink,
             disabled: isSubmitting,
-            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2441,10 +2449,10 @@ function DefaultSettingsTotp({
     ] });
   }
   if (totpImage && totpSecret && totpInput) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DefaultHorizontalDivider, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-        Node2.Image,
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        Node.Image,
         {
           node: totpImage,
           attributes: {
@@ -2452,14 +2460,14 @@ function DefaultSettingsTotp({
           }
         }
       ) }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-          Node2.Label,
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          Node.Label,
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-              Node2.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              Node.Input,
               {
                 node: totpSecret,
                 attributes: {
@@ -2473,13 +2481,13 @@ function DefaultSettingsTotp({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-          Node2.Label,
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          Node.Label,
           {
             attributes: totpInput.attributes,
             node: totpInput,
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-              Node2.CodeInput,
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              Node.CodeInput,
               {
                 node: totpInput,
                 attributes: totpInput.attributes
@@ -2496,17 +2504,17 @@ function DefaultSettingsTotp({
 var import_elements_react18 = require("@ory/elements-react");
 
 // src/theme/default/assets/icons/key.svg
-var React33 = __toESM(require("react"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var React34 = __toESM(require("react"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var SvgKey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("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__ */ (0, import_jsx_runtime65.jsx)("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__ */ (0, import_jsx_runtime66.jsx)("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__ */ (0, import_jsx_runtime66.jsx)("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
 var import_react_hook_form12 = require("react-hook-form");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
@@ -2515,17 +2523,17 @@ function DefaultSettingsWebauthn({
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form12.useFormContext)();
-  const { Node: Node2, Card } = (0, import_elements_react18.useComponents)();
+  const { Node, Card } = (0, import_elements_react18.useComponents)();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-        Node2.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        Node.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
-          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            Node2.Input,
+          children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            Node.Input,
             {
               node: nameInput,
               attributes: nameInput.attributes
@@ -2533,8 +2541,8 @@ function DefaultSettingsWebauthn({
           )
         }
       ) }),
-      triggerButton ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-        Node2.Button,
+      triggerButton ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        Node.Button,
         {
           node: triggerButton,
           attributes: triggerButton.attributes,
@@ -2542,38 +2550,38 @@ function DefaultSettingsWebauthn({
         }
       ) : null
     ] }),
-    hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
+    hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime66.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
           "div",
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                   key_default,
                   {
                     size: 32,
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex-col truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 "button",
                 {
                   ...node.attributes,
@@ -2581,7 +2589,7 @@ function DefaultSettingsWebauthn({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2600,266 +2608,34 @@ function DefaultSettingsWebauthn({
 }
 
 // src/theme/default/components/card/auth-method-list-container.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function DefaultAuthMethodListContainer({
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "grid grid-cols-1 gap-2", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "grid grid-cols-1 gap-2", children });
 }
 
 // src/theme/default/components/form/captcha.tsx
-var import_client_fetch30 = require("@ory/client-fetch");
+var import_client_fetch14 = require("@ory/client-fetch");
 var import_react_turnstile = require("@marsidev/react-turnstile");
-var import_react13 = require("react");
-var import_react_hook_form25 = require("react-hook-form");
-
-// src/context/flow-context.tsx
 var import_react11 = require("react");
-
-// src/context/form-state.ts
-var import_client_fetch15 = require("@ory/client-fetch");
-var import_react10 = require("react");
-
-// src/components/card/card-two-step.utils.ts
-var import_client_fetch14 = require("@ory/client-fetch");
-
-// src/context/flow-context.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var OryFlowContext = (0, import_react11.createContext)(null);
-
-// src/context/intl-context.tsx
-var import_react_intl20 = require("react-intl");
-
-// src/components/card/header.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-
-// src/components/form/form-provider.tsx
-var import_client_fetch18 = require("@ory/client-fetch");
 var import_react_hook_form13 = require("react-hook-form");
-
-// src/components/form/form-helpers.ts
-var import_client_fetch16 = require("@ory/client-fetch");
-
-// src/components/form/form-resolver.ts
-var import_client_fetch17 = require("@ory/client-fetch");
-
-// src/components/form/form-provider.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
-
-// src/components/card/card.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
-
-// src/components/card/footer.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-
-// src/components/card/content.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
-
-// src/components/card/card-two-step.tsx
-var import_client_fetch27 = require("@ory/client-fetch");
-var import_react_hook_form17 = require("react-hook-form");
-
-// src/components/form/form.tsx
-var import_client_fetch25 = require("@ory/client-fetch");
-var import_react_hook_form15 = require("react-hook-form");
-var import_react_intl13 = require("react-intl");
-
-// src/components/form/useOryFormSubmit.ts
-var import_client_fetch24 = require("@ory/client-fetch");
-var import_react_hook_form14 = require("react-hook-form");
-
-// src/util/onSubmitLogin.ts
-var import_client_fetch19 = require("@ory/client-fetch");
-
-// src/util/onSubmitRecovery.ts
-var import_client_fetch20 = require("@ory/client-fetch");
-
-// src/util/onSubmitRegistration.ts
-var import_client_fetch21 = require("@ory/client-fetch");
-
-// src/util/onSubmitSettings.ts
-var import_client_fetch22 = require("@ory/client-fetch");
-
-// src/util/onSubmitVerification.ts
-var import_client_fetch23 = require("@ory/client-fetch");
-
-// src/components/form/form.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
-
-// src/components/form/messages.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-
-// src/components/form/nodes/node.tsx
-var import_client_fetch26 = require("@ory/client-fetch");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-
-// src/components/form/social.tsx
-var import_react_hook_form16 = require("react-hook-form");
-var import_jsx_runtime77 = require("react/jsx-runtime");
-
-// src/components/card/card-two-step.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
-
-// src/components/form/groups.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
-
-// src/components/form/section.tsx
-var import_react_hook_form18 = require("react-hook-form");
-var import_jsx_runtime80 = require("react/jsx-runtime");
-
-// src/components/generic/divider.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
-
-// src/components/generic/page-header.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-
-// src/components/settings/settings-card.tsx
-var import_client_fetch28 = require("@ory/client-fetch");
-var import_react_intl19 = require("react-intl");
-
-// src/components/settings/oidc-settings.tsx
-var import_react_intl14 = require("react-intl");
-var import_react_hook_form19 = require("react-hook-form");
-var import_jsx_runtime83 = require("react/jsx-runtime");
-
-// src/components/settings/passkey-settings.tsx
-var import_react_hook_form20 = require("react-hook-form");
-var import_react_intl15 = require("react-intl");
-var import_jsx_runtime84 = require("react/jsx-runtime");
-
-// src/components/settings/recovery-codes-settings.tsx
-var import_react_intl16 = require("react-intl");
-var import_react_hook_form21 = require("react-hook-form");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-
-// src/components/settings/totp-settings.tsx
-var import_react_hook_form22 = require("react-hook-form");
-var import_react_intl17 = require("react-intl");
-var import_jsx_runtime86 = require("react/jsx-runtime");
-
-// src/components/settings/webauthn-settings.tsx
-var import_react_hook_form23 = require("react-hook-form");
-var import_react_intl18 = require("react-intl");
-var import_jsx_runtime87 = require("react/jsx-runtime");
-
-// src/components/settings/settings-card.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-
-// src/context/intl-context.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
-
-// src/context/provider.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
-
-// src/components/form/nodes/input.tsx
-var import_client_fetch29 = require("@ory/client-fetch");
-var import_react12 = require("react");
-var import_react_hook_form24 = require("react-hook-form");
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var NodeInput = ({
-  node,
-  attributes
-}) => {
-  var _a;
-  const { Node: Node2 } = useComponents();
-  const { setValue } = (0, import_react_hook_form24.useFormContext)();
-  const {
-    onloadTrigger,
-    onclickTrigger,
-    // These properties do not exist on input fields so we remove them (as we already have handled them).
-    onclick: _ignoredOnclick,
-    onload: _ignoredOnload,
-    //
-    ...attrs
-  } = attributes;
-  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
-  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
-  const setFormValue = () => {
-    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
-      setValue(attrs.name, attrs.value);
-    }
-  };
-  const hasRun = (0, import_react12.useRef)(false);
-  (0, import_react12.useEffect)(
-    () => {
-      setFormValue();
-      if (!hasRun.current && onloadTrigger) {
-        hasRun.current = true;
-        triggerToWindowCall(onloadTrigger);
-      }
-    },
-    // TODO(jonas): make sure onloadTrigger is stable
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
-    []
-  );
-  const handleClick = () => {
-    setFormValue();
-    if (onclickTrigger) {
-      triggerToWindowCall(onclickTrigger);
-    }
-  };
-  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
-  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
-  switch (attributes.type) {
-    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Submit:
-    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Button:
-      if (isSocial) {
-        return null;
-      }
-      if (isResendNode || isScreenSelectionNode) {
-        return null;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Node2.Button, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
-    case import_client_fetch29.UiNodeInputAttributesTypeEnum.DatetimeLocal:
-      throw new Error("Not implemented");
-    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Checkbox:
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
-    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Node2.Input, { attributes: attrs, node, onClick: handleClick });
-    default:
-      if (isPinCodeInput) {
-        return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-          Node2.CodeInput,
-          {
-            attributes: attrs,
-            node,
-            onClick: handleClick
-          }
-        ) });
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
-  }
-};
-
-// src/theme/default/components/form/captcha.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var DefaultCaptcha = ({ node }) => {
-  const { setValue } = (0, import_react_hook_form25.useFormContext)();
-  const ref = (0, import_react13.useRef)();
+  const { setValue } = (0, import_react_hook_form13.useFormContext)();
+  const ref = (0, import_react11.useRef)();
   const nodes = [];
-  if ((0, import_client_fetch30.isUiNodeInputAttributes)(node.attributes)) {
+  if ((0, import_client_fetch14.isUiNodeInputAttributes)(node.attributes)) {
     if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime92.jsx)(NodeInput, { node, attributes: node.attributes }, 1));
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DefaultInput, { node, attributes: node.attributes }, 1)
+      );
     }
   }
-  if ((0, import_client_fetch30.isUiNodeInputAttributes)(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
+  if ((0, import_client_fetch14.isUiNodeInputAttributes)(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
     const options = JSON.parse(node.attributes.value);
     nodes.push(
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         import_react_turnstile.Turnstile,
         {
           ref,
@@ -2936,18 +2712,18 @@ function getOryComponents(overrides) {
 }
 
 // src/theme/default/flows/error.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function Error2({
   error,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
-var import_client_fetch31 = require("@ory/client-fetch");
+var import_client_fetch15 = require("@ory/client-fetch");
 var import_elements_react19 = require("@ory/elements-react");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function Login({
   flow,
   config,
@@ -2955,22 +2731,22 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     import_elements_react19.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch31.FlowType.Login,
+      flowType: import_client_fetch15.FlowType.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_elements_react19.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_elements_react19.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
-var import_client_fetch32 = require("@ory/client-fetch");
+var import_client_fetch16 = require("@ory/client-fetch");
 var import_elements_react20 = require("@ory/elements-react");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function Recovery({
   flow,
   config,
@@ -2978,22 +2754,22 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     import_elements_react20.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch32.FlowType.Recovery,
+      flowType: import_client_fetch16.FlowType.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_elements_react20.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_elements_react20.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
-var import_client_fetch33 = require("@ory/client-fetch");
+var import_client_fetch17 = require("@ory/client-fetch");
 var import_elements_react21 = require("@ory/elements-react");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function Registration({
   flow,
   children,
@@ -3001,22 +2777,22 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     import_elements_react21.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch33.FlowType.Registration,
+      flowType: import_client_fetch17.FlowType.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_elements_react21.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_elements_react21.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
-var import_client_fetch34 = require("@ory/client-fetch");
+var import_client_fetch18 = require("@ory/client-fetch");
 var import_elements_react22 = require("@ory/elements-react");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 function Settings({
   flow,
   config,
@@ -3024,25 +2800,25 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     import_elements_react22.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch34.FlowType.Settings,
+      flowType: import_client_fetch18.FlowType.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_elements_react22.HeadlessPageHeader, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_elements_react22.OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_elements_react22.HeadlessPageHeader, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_elements_react22.OrySettingsCard, {})
       ] })
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
-var import_client_fetch35 = require("@ory/client-fetch");
+var import_client_fetch19 = require("@ory/client-fetch");
 var import_elements_react23 = require("@ory/elements-react");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 function Verification({
   flow,
   config,
@@ -3050,14 +2826,14 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     import_elements_react23.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch35.FlowType.Verification,
+      flowType: import_client_fetch19.FlowType.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_elements_react23.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_elements_react23.OryTwoStepCard, {})
     }
   );
 }