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

package/dist/theme/default/index.mjs

@@ -105,13 +105,6 @@ var ComponentContext = createContext({
   nodeSorter: () => 0,
   groupSorter: () => 0
 });
-function useComponents() {
-  const ctx = useContext(ComponentContext);
-  if (!ctx) {
-    throw new Error("useComponents must be used within a ComponentProvider");
-  }
-  return ctx.components;
-}
 var defaultGroupOrder = [
   UiNodeGroupEnum.Default,
   UiNodeGroupEnum.Profile,
@@ -125,54 +118,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 = {};
@@ -352,7 +297,7 @@ function VerificationCardFooter() {
 }
 
 // src/theme/default/components/card/header.tsx
-import { useComponents as useComponents2, useOryFlow as useOryFlow3 } from "@ory/elements-react";
+import { useComponents, useOryFlow as useOryFlow3 } from "@ory/elements-react";
 
 // src/theme/default/utils/constructCardHeader.ts
 import {
@@ -668,7 +613,7 @@ function guessRegistrationBackButton(uiNodes) {
 // src/theme/default/components/card/header.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function InnerCardHeader({ title, text }) {
-  const { Card } = useComponents2();
+  const { Card } = useComponents();
   return /* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-8 antialiased", children: [
     /* @__PURE__ */ jsx8(Card.Logo, {}),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
@@ -1523,9 +1468,33 @@ import {
   uiTextToFormattedMessage as uiTextToFormattedMessage6,
   useOryFlow as useOryFlow7
 } from "@ory/elements-react";
+import { useRef, useState as useState2 } from "react";
 import { useFormContext as useFormContext4 } from "react-hook-form";
 import { useIntl as useIntl9 } from "react-intl";
+
+// src/theme/default/assets/icons/eye-off.svg
+import * as React24 from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
+var SvgEyeOff = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx42("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx42("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.585 10.587a2 2 0 0 0 2.829 2.828m3.267 3.258A8.7 8.7 0 0 1 12 18q-5.4 0-9-6 1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6-1 1.665-2.138 2.87M3 3l18 18" }) });
+};
+var eye_off_default = SvgEyeOff;
+
+// src/theme/default/assets/icons/eye.svg
+import * as React25 from "react";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var SvgEye = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx43("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs23("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx43("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ jsx43("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
+  ] }) });
+};
+var eye_default = SvgEye;
+
+// src/theme/default/components/form/input.tsx
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var DefaultInput = ({
   node,
   attributes,
@@ -1543,6 +1512,7 @@ var DefaultInput = ({
   } = attributes;
   const intl = useIntl9();
   const { flowType } = useOryFlow7();
+  const inputRef = useRef(null);
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
@@ -1552,29 +1522,79 @@ var DefaultInput = ({
       placeholder: uiTextToFormattedMessage6(label, intl)
     }
   ) : "";
-  return /* @__PURE__ */ jsx42(
-    "input",
+  if (rest.type === "hidden") {
+    return /* @__PURE__ */ jsx44(
+      "input",
+      {
+        ...rest,
+        onClick,
+        maxLength: maxlength,
+        autoComplete: autocomplete,
+        placeholder: formattedLabel,
+        "data-testid": `ory/form/node/input/${name}`,
+        ...register(name, { value })
+      }
+    );
+  }
+  const { ref, ...restRegister } = register(name, { value });
+  return /* @__PURE__ */ jsxs24(
+    "div",
     {
-      ...rest,
-      onClick,
-      maxLength: maxlength,
-      autoComplete: autocomplete,
-      placeholder: formattedLabel,
-      "data-testid": `ory/form/node/input/${name}`,
       className: cn(
-        "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0",
-        "bg-input-background-default border-input-border-default text-input-foreground-primary",
-        "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
-        "focus:border-input-border-focus focus-visible:border-input-border-focus",
-        "hover:bg-input-background-hover hover:border-input-border-hover",
-        "px-4 py-[13px]",
+        "relative flex justify-stretch",
         // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
         flowType === FlowType5.Settings && "max-w-[488px]"
       ),
-      ...register(name, { value })
+      children: [
+        /* @__PURE__ */ jsx44(
+          "input",
+          {
+            ...rest,
+            onClick,
+            maxLength: maxlength,
+            autoComplete: autocomplete,
+            placeholder: formattedLabel,
+            "data-testid": `ory/form/node/input/${name}`,
+            className: cn(
+              "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0 w-full",
+              "bg-input-background-default border-input-border-default text-input-foreground-primary",
+              "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
+              "focus:border-input-border-focus focus-visible:border-input-border-focus",
+              "hover:bg-input-background-hover hover:border-input-border-hover",
+              "px-4 py-[13px]"
+            ),
+            ref: (e) => {
+              inputRef.current = e;
+              ref(e);
+            },
+            ...restRegister
+          }
+        ),
+        rest.type === "password" && /* @__PURE__ */ jsx44(PasswordToggle, { inputRef })
+      ]
     }
   );
 };
+function PasswordToggle({
+  inputRef
+}) {
+  const [shown, setShown] = useState2(false);
+  const handleClick = () => {
+    setShown(!shown);
+    if (inputRef.current) {
+      inputRef.current.type = shown ? "password" : "text";
+    }
+  };
+  return /* @__PURE__ */ jsx44(
+    "button",
+    {
+      onClick: handleClick,
+      className: "absolute right-0 h-full w-12 flex items-center justify-center",
+      type: "button",
+      children: shown ? /* @__PURE__ */ jsx44(eye_off_default, {}) : /* @__PURE__ */ jsx44(eye_default, {})
+    }
+  );
+}
 
 // src/theme/default/components/form/label.tsx
 import {
@@ -1585,12 +1605,12 @@ import {
 import {
   messageTestId as messageTestId3,
   uiTextToFormattedMessage as uiTextToFormattedMessage7,
-  useComponents as useComponents3,
+  useComponents as useComponents2,
   useOryFlow as useOryFlow8
 } from "@ory/elements-react";
 import { useFormContext as useFormContext5 } from "react-hook-form";
 import { useIntl as useIntl10 } from "react-intl";
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 function findResendNode(nodes) {
   return nodes.find(
     (n) => "name" in n.attributes && (n.attributes.name === "email" && n.attributes.type === "submit" || n.attributes.name === "resend")
@@ -1604,7 +1624,7 @@ function DefaultLabel({
 }) {
   const intl = useIntl10();
   const label = getNodeLabel4(node);
-  const { Message } = useComponents3();
+  const { Message } = useComponents2();
   const { config, flowType, flow } = useOryFlow8();
   const { setValue, formState } = useFormContext5();
   const isPassword = attributes.type === "password";
@@ -1615,9 +1635,9 @@ function DefaultLabel({
     }
   };
   const fieldError = formState.errors[attributes.name];
-  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1 antialiased", children: [
-    label && /* @__PURE__ */ jsxs23("span", { className: "inline-flex justify-between", children: [
-      /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1 antialiased", children: [
+    label && /* @__PURE__ */ jsxs25("span", { className: "inline-flex justify-between", children: [
+      /* @__PURE__ */ jsx45(
         "label",
         {
           ...messageTestId3(label),
@@ -1629,7 +1649,7 @@ function DefaultLabel({
         }
       ),
       isPassword && config.project.recovery_enabled && flowType === FlowType6.Login && // TODO: make it possible to override with a custom component
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx45(
         "a",
         {
           href: initFlowUrl(config.sdk.url, "recovery", flow),
@@ -1640,7 +1660,7 @@ function DefaultLabel({
           })
         }
       ),
-      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx43(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx45(
         "button",
         {
           type: "submit",
@@ -1653,8 +1673,8 @@ function DefaultLabel({
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ jsx43(Message.Content, { message }, message.id)),
-    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx43(Message.Content, { message: fieldError })
+    node.messages.map((message) => /* @__PURE__ */ jsx45(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx45(Message.Content, { message: fieldError })
   ] });
 }
 
@@ -1665,11 +1685,11 @@ import {
 } from "@ory/elements-react";
 import { forwardRef } from "react";
 import { useIntl as useIntl11 } from "react-intl";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
   const intl = useIntl11();
   const label = getNodeLabel5(node);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(
     "a",
     {
       ...attributes,
@@ -1690,9 +1710,9 @@ import { useFormContext as useFormContext6 } from "react-hook-form";
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
-import * as React24 from "react";
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
-var InputOTP = React24.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx45(
+import * as React26 from "react";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+var InputOTP = React26.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx47(
   OTPInput,
   {
     ref,
@@ -1705,12 +1725,12 @@ var InputOTP = React24.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React24.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React24.useContext(OTPInputContext);
+var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React26.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref,
@@ -1722,8 +1742,8 @@ var InputOTPSlot = React24.forwardRef(({ index, className, ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx45("span", { className: "inline-block size-4", children: char }),
-        hasFakeCaret && /* @__PURE__ */ jsx45("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx45("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
+        /* @__PURE__ */ jsx47("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ jsx47("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx47("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
       ]
     }
   );
@@ -1733,7 +1753,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 // src/theme/default/components/form/pin-code-input.tsx
 import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
 import { FlowType as FlowType7 } from "@ory/client-fetch";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var DefaultPinCodeInput = ({ attributes }) => {
   const { setValue, watch } = useFormContext6();
   const { maxlength, name } = attributes;
@@ -1743,14 +1763,14 @@ var DefaultPinCodeInput = ({ attributes }) => {
     setValue(name, v);
   };
   const value = watch(name);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     InputOTP,
     {
       maxLength: maxlength != null ? maxlength : 6,
       onChange: handleInputChange,
       name,
       value,
-      children: /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsx48(
         InputOTPGroup,
         {
           className: cn(
@@ -1758,7 +1778,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
             // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
             flowType === FlowType7.Settings && "max-w-[488px]"
           ),
-          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx46(InputOTPSlot, { index }, index))
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx48(InputOTPSlot, { index }, index))
         }
       )
     }
@@ -1766,13 +1786,13 @@ var DefaultPinCodeInput = ({ attributes }) => {
 };
 
 // src/theme/default/components/form/section.tsx
-import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 var DefaultFormSection = ({
   children,
   nodes: _nodes,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     "form",
     {
       className: "flex w-full max-w-screen-sm flex-col md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] px-4",
@@ -1786,10 +1806,10 @@ var DefaultFormSectionContent = ({
   description,
   children
 }) => {
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-8 rounded-t-cards border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
-    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx47("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
-      /* @__PURE__ */ jsx47("span", { className: "text-interface-foreground-default-secondary", children: description })
+  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-8 rounded-t-cards border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx49("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx49("span", { className: "text-interface-foreground-default-secondary", children: description })
     ] }),
     children
   ] });
@@ -1798,14 +1818,14 @@ var DefaultFormSectionFooter = ({
   children,
   text
 }) => {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
         "flex min-h-[72px] items-center justify-between gap-2 rounded-b-cards border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
       ),
       children: [
-        /* @__PURE__ */ jsx47("span", { children: text }),
+        /* @__PURE__ */ jsx49("span", { children: text }),
         children
       ]
     }
@@ -1815,31 +1835,31 @@ var DefaultFormSectionFooter = ({
 // src/theme/default/components/form/text.tsx
 import { uiTextToFormattedMessage as uiTextToFormattedMessage9 } from "@ory/elements-react";
 import { useIntl as useIntl12 } from "react-intl";
-import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl12();
   const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
   if (lookup) {
-    return /* @__PURE__ */ jsxs26(Fragment4, { children: [
-      /* @__PURE__ */ jsx48("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
-      lookup.map((text, index) => /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsxs28(Fragment4, { children: [
+      /* @__PURE__ */ jsx50("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
+      lookup.map((text, index) => /* @__PURE__ */ jsx50(
         "pre",
         {
           "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
-          children: /* @__PURE__ */ jsx48("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
+          children: /* @__PURE__ */ jsx50("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
         },
         index
       ))
     ] });
   }
-  return /* @__PURE__ */ jsx48(Fragment4, { children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx50(Fragment4, { children: /* @__PURE__ */ jsxs28(
     "p",
     {
       "data-testid": `ory/form/node/text/${attributes.id}/label`,
       id: attributes.id,
       children: [
-        node.meta.label ? /* @__PURE__ */ jsx48("label", { children: uiTextToFormattedMessage9(node.meta.label, intl) }) : null,
+        node.meta.label ? /* @__PURE__ */ jsx50("label", { children: uiTextToFormattedMessage9(node.meta.label, intl) }) : null,
         attributes.text ? uiTextToFormattedMessage9(attributes.text, intl) : ""
       ]
     }
@@ -1847,11 +1867,11 @@ function DefaultText({ node, attributes }) {
 }
 
 // src/theme/default/components/generic/page-header.tsx
-import { useComponents as useComponents4 } from "@ory/elements-react";
+import { useComponents as useComponents3 } from "@ory/elements-react";
 
 // src/theme/default/components/ui/user-menu.tsx
 import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
-import { useCallback, useEffect as useEffect3, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
 
 // src/util/client.ts
@@ -1872,22 +1892,22 @@ function frontendClient(sdkUrl, opts = {}) {
 }
 
 // src/theme/default/assets/icons/logout.svg
-import * as React25 from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SvgLogout = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx49("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
+  return /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx51("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
 };
 var logout_default = SvgLogout;
 
 // src/theme/default/assets/icons/settings.svg
-import * as React26 from "react";
-import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
 var SvgSettings = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx50("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs27("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx50("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
-    /* @__PURE__ */ jsx50("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
+  return /* @__PURE__ */ jsx52("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs29("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx52("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
+    /* @__PURE__ */ jsx52("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
   ] }) });
 };
 var settings_default = SvgSettings;
@@ -1934,10 +1954,10 @@ var getUserInitials = (session) => {
 // src/theme/default/components/ui/dropdown-menu.tsx
 import { forwardRef as forwardRef3 } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx51(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx51(
+var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx53(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx53(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1952,7 +1972,7 @@ var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx51(
+var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx53(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1970,7 +1990,7 @@ var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx51(
+var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx53(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1988,32 +2008,32 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 import { forwardRef as forwardRef4 } from "react";
 
 // src/theme/default/assets/icons/user.svg
-import * as React27 from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var SvgUser = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx52("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx52("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
+  return /* @__PURE__ */ jsx54("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx54("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
 };
 var user_default = SvgUser;
 
 // src/theme/default/components/ui/user-avater.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var UserAvatar = forwardRef4(
   ({ initials, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx55(
       "button",
       {
         ref,
         className: "relative flex size-10 items-center justify-center overflow-hidden rounded-[999px] bg-button-primary-background-default hover:bg-button-primary-background-hover",
         ...rest,
-        children: /* @__PURE__ */ jsx53("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx53(
+        children: /* @__PURE__ */ jsx55("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx55(
           "img",
           {
             src: initials.avatar,
             alt: initials.primary,
             className: "w-full object-contain"
           }
-        ) : /* @__PURE__ */ jsx53(
+        ) : /* @__PURE__ */ jsx55(
           user_default,
           {
             size: 24,
@@ -2027,11 +2047,11 @@ var UserAvatar = forwardRef4(
 UserAvatar.displayName = "UserAvatar";
 
 // src/theme/default/components/ui/user-menu.tsx
-import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const { config } = useOryFlow10();
   const initials = getUserInitials(session);
-  const [logoutFlow, setLogoutFlow] = useState2();
+  const [logoutFlow, setLogoutFlow] = useState3();
   const fetchLogoutFlow = useCallback(async () => {
     const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
     setLogoutFlow(flow);
@@ -2039,22 +2059,22 @@ var UserMenu = ({ session }) => {
   useEffect3(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
-  return /* @__PURE__ */ jsxs28(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx54(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(UserAvatar, { initials }) }),
-    /* @__PURE__ */ jsxs28(DropdownMenuContent, { children: [
-      /* @__PURE__ */ jsxs28(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
-        /* @__PURE__ */ jsx54(UserAvatar, { disabled: true, initials }),
-        /* @__PURE__ */ jsxs28("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
-          /* @__PURE__ */ jsx54("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
-          initials.secondary && /* @__PURE__ */ jsx54("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
+  return /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx56(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(UserAvatar, { initials }) }),
+    /* @__PURE__ */ jsxs30(DropdownMenuContent, { children: [
+      /* @__PURE__ */ jsxs30(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
+        /* @__PURE__ */ jsx56(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ jsxs30("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx56("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ jsx56("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
         ] })
       ] }),
-      /* @__PURE__ */ jsx54(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs28("a", { href: "/settings", children: [
-        /* @__PURE__ */ jsx54(settings_default, { size: 16 }),
+      /* @__PURE__ */ jsx56(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs30("a", { href: "/settings", children: [
+        /* @__PURE__ */ jsx56(settings_default, { size: 16 }),
         " User settings"
       ] }) }),
-      /* @__PURE__ */ jsx54(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs28("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
-        /* @__PURE__ */ jsx54(logout_default, { size: 16 }),
+      /* @__PURE__ */ jsx56(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs30("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
+        /* @__PURE__ */ jsx56(logout_default, { size: 16 }),
         " Logout"
       ] }) })
     ] })
@@ -2063,13 +2083,13 @@ var UserMenu = ({ session }) => {
 
 // src/theme/default/components/generic/page-header.tsx
 import { useSession } from "@ory/elements-react/client";
-import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
-  const { Card } = useComponents4();
+  const { Card } = useComponents3();
   const { session } = useSession();
-  return /* @__PURE__ */ jsx55("div", { className: "mt-16 flex max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ jsx55("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
-    /* @__PURE__ */ jsx55("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx55(Card.Logo, {}) }),
-    /* @__PURE__ */ jsx55(UserMenu, { session })
+  return /* @__PURE__ */ jsx57("div", { className: "mt-16 flex max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ jsx57("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs31("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+    /* @__PURE__ */ jsx57("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx57(Card.Logo, {}) }),
+    /* @__PURE__ */ jsx57(UserMenu, { session })
   ] }) }) });
 };
 
@@ -2079,26 +2099,26 @@ import { useFormContext as useFormContext7 } from "react-hook-form";
 import { useDebounceValue as useDebounceValue2 } from "usehooks-ts";
 
 // src/theme/default/assets/icons/trash.svg
-import * as React28 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import * as React30 from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var SvgTrash = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx56("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
+  return /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx58("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
 };
 var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs32 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
   unlinkButtons
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ jsx57("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
+  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-8", children: [
+    hasLinkButtons && /* @__PURE__ */ jsx59("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
       const attrs = button.attributes;
-      return /* @__PURE__ */ jsx57(
+      return /* @__PURE__ */ jsx59(
         DefaultButtonSocial,
         {
           showLabel: true,
@@ -2109,12 +2129,12 @@ function DefaultSettingsOidc({
         attrs.value
       );
     }) }),
-    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx57(DefaultHorizontalDivider, {}) : null,
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx59(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
       if (button.attributes.node_type !== "input") {
         return null;
       }
-      return /* @__PURE__ */ jsx57(UnlinkRow, { button }, button.attributes.value);
+      return /* @__PURE__ */ jsx59(UnlinkRow, { button }, button.attributes.value);
     })
   ] });
 }
@@ -2136,12 +2156,12 @@ function UnlinkRow({ button }) {
       setClicked(false);
     }
   }, [isSubmitting, setClicked]);
-  return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
-      Logo ? /* @__PURE__ */ jsx57(Logo, { size: 32 }) : /* @__PURE__ */ jsx57(provider_logos_default.generic, { size: 32 }),
-      /* @__PURE__ */ jsx57("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+  return /* @__PURE__ */ jsxs32("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-6", children: [
+      Logo ? /* @__PURE__ */ jsx59(Logo, { size: 32 }) : /* @__PURE__ */ jsx59(provider_logos_default.generic, { size: 32 }),
+      /* @__PURE__ */ jsx59("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
     ] }),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx59(
       "button",
       {
         ...attrs,
@@ -2150,7 +2170,7 @@ function UnlinkRow({ button }) {
         disabled: isSubmitting,
         className: "relative",
         title: `Unlink ${provider}`,
-        children: clicked ? /* @__PURE__ */ jsx57(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx57(
+        children: clicked ? /* @__PURE__ */ jsx59(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx59(
           trash_default,
           {
             className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2163,9 +2183,9 @@ function UnlinkRow({ button }) {
 }
 
 // src/theme/default/components/settings/settings-passkey.tsx
-import { useComponents as useComponents5 } from "@ory/elements-react";
+import { useComponents as useComponents4 } from "@ory/elements-react";
 import { useFormContext as useFormContext8 } from "react-hook-form";
-import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
@@ -2173,49 +2193,49 @@ function DefaultSettingsPasskey({
   const {
     formState: { isSubmitting }
   } = useFormContext8();
-  const { Node: Node2 } = useComponents5();
+  const { Node } = useComponents4();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsx58("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx58(
-      Node2.Button,
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsx60("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx60(
+      Node.Button,
       {
         node: triggerButton,
         attributes: triggerButton.attributes,
         onClick: triggerButton.onClick
       }
     ) }),
-    hasRemoveButtons ? /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx58(DefaultHorizontalDivider, {}),
-      /* @__PURE__ */ jsx58("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+    hasRemoveButtons ? /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx60(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ jsx60("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
         const displayName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
-        return /* @__PURE__ */ jsxs31(
+        return /* @__PURE__ */ jsxs33(
           "div",
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
-                /* @__PURE__ */ jsx58(
+              /* @__PURE__ */ jsxs33("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ jsx60(
                   passkey_default,
                   {
                     size: 32,
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
-                  /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col truncate", children: [
-                    /* @__PURE__ */ jsx58("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
-                    /* @__PURE__ */ jsx58("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
+                /* @__PURE__ */ jsxs33("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ jsxs33("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ jsx60("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ jsx60("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ jsx58("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ jsx60("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx58(
+              /* @__PURE__ */ jsx60(
                 "button",
                 {
                   ...node.attributes,
@@ -2223,7 +2243,7 @@ function DefaultSettingsPasskey({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx58(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx58(
+                  children: isSubmitting ? /* @__PURE__ */ jsx60(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx60(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2242,38 +2262,26 @@ function DefaultSettingsPasskey({
 }
 
 // src/theme/default/assets/icons/download.svg
-import * as React29 from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import * as React31 from "react";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var SvgDownload = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx59("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx59("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
+  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx61("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
 };
 var download_default = SvgDownload;
 
-// src/theme/default/assets/icons/eye.svg
-import * as React30 from "react";
-import { jsx as jsx60, jsxs as jsxs32 } from "react/jsx-runtime";
-var SvgEye = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsx60("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsxs32("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx60("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
-    /* @__PURE__ */ jsx60("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
-  ] }) });
-};
-var eye_default = SvgEye;
-
 // src/theme/default/assets/icons/refresh.svg
-import * as React31 from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import * as React32 from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var SvgRefresh = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx61("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
+  return /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx62("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
 };
 var refresh_default = SvgRefresh;
 
 // src/theme/default/components/settings/settings-recovery-codes.tsx
 import { useFormContext as useFormContext9 } from "react-hook-form";
-import { Fragment as Fragment5, jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
@@ -2295,12 +2303,12 @@ function DefaultSettingsRecoveryCodes({
     element.click();
   };
   const hasCodes = codes.length >= 1;
-  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
-    codes.length > 0 && /* @__PURE__ */ jsx62(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ jsxs33("div", { className: "flex gap-4 justify-between", children: [
-      /* @__PURE__ */ jsx62("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex gap-2", children: [
-        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-8", children: [
+    codes.length > 0 && /* @__PURE__ */ jsx63(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ jsxs34("div", { className: "flex gap-4 justify-between", children: [
+      /* @__PURE__ */ jsx63("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx63(
           "button",
           {
             ...regnerateButton.attributes,
@@ -2309,7 +2317,7 @@ function DefaultSettingsRecoveryCodes({
             onClick: onRegenerate,
             disabled: isSubmitting,
             "data-loading": isSubmitting,
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx63(
               refresh_default,
               {
                 size: 24,
@@ -2318,7 +2326,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ),
-        revealButton && /* @__PURE__ */ jsx62(Fragment5, { children: /* @__PURE__ */ jsx62(
+        revealButton && /* @__PURE__ */ jsx63(Fragment5, { children: /* @__PURE__ */ jsx63(
           "button",
           {
             ...revealButton.attributes,
@@ -2326,7 +2334,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             onClick: onReveal,
             title: "Reveal recovery codes",
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx63(
               eye_default,
               {
                 size: 24,
@@ -2335,7 +2343,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ) }),
-        hasCodes && /* @__PURE__ */ jsx62(
+        hasCodes && /* @__PURE__ */ jsx63(
           "button",
           {
             onClick: onDownload,
@@ -2343,7 +2351,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             "data-testid": "ory/screen/settings/group/recovery_code/download",
             title: "Download recovery codes",
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx63(
               download_default,
               {
                 size: 24,
@@ -2354,32 +2362,32 @@ function DefaultSettingsRecoveryCodes({
         )
       ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ jsx62("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx62(
+    hasCodes ? /* @__PURE__ */ jsx63("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx63(
       "div",
       {
         className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary",
         "data-testid": "ory/screen/settings/group/recovery_code/codes",
-        children: codes.map((code) => /* @__PURE__ */ jsx62("p", { children: code }, code))
+        children: codes.map((code) => /* @__PURE__ */ jsx63("p", { children: code }, code))
       }
     ) }) : null
   ] });
 }
 
 // src/theme/default/components/settings/settings-totp.tsx
-import { useComponents as useComponents6 } from "@ory/elements-react";
+import { useComponents as useComponents5 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/qrcode.svg
-import * as React32 from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import * as React33 from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var SvgQrcode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx63("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx63("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
+  return /* @__PURE__ */ jsx64("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx64("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
 };
 var qrcode_default = SvgQrcode;
 
 // src/theme/default/components/settings/settings-totp.tsx
 import { useFormContext as useFormContext10 } from "react-hook-form";
-import { jsx as jsx64, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultSettingsTotp({
   totpImage,
   totpInput,
@@ -2387,7 +2395,7 @@ function DefaultSettingsTotp({
   totpUnlink,
   onUnlink
 }) {
-  const { Node: Node2, Card } = useComponents6();
+  const { Node, Card } = useComponents5();
   const {
     formState: { isSubmitting }
   } = useFormContext10();
@@ -2399,19 +2407,19 @@ function DefaultSettingsTotp({
       node_type: _ignoredNodeType,
       ...buttonAttrs
     } = totpUnlink.attributes;
-    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx64("div", { className: "col-span-full", children: /* @__PURE__ */ jsx64(Card.Divider, {}) }),
-      /* @__PURE__ */ jsxs34("div", { className: "col-span-full flex items-center gap-6", children: [
-        /* @__PURE__ */ jsx64("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx64(qrcode_default, { size: 32 }) }),
-        /* @__PURE__ */ jsx64("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx64("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
-        /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx65("div", { className: "col-span-full", children: /* @__PURE__ */ jsx65(Card.Divider, {}) }),
+      /* @__PURE__ */ jsxs35("div", { className: "col-span-full flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx65("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx65(qrcode_default, { size: 32 }) }),
+        /* @__PURE__ */ jsx65("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx65("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+        /* @__PURE__ */ jsx65(
           "button",
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
             onClick: onUnlink,
             disabled: isSubmitting,
-            children: isSubmitting ? /* @__PURE__ */ jsx64(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx64(
+            children: isSubmitting ? /* @__PURE__ */ jsx65(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx65(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2424,10 +2432,10 @@ function DefaultSettingsTotp({
     ] });
   }
   if (totpImage && totpSecret && totpInput) {
-    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx64("div", { className: "col-span-full", children: /* @__PURE__ */ jsx64(DefaultHorizontalDivider, {}) }),
-      /* @__PURE__ */ jsx64("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx64("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx64("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx64(
-        Node2.Image,
+    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx65("div", { className: "col-span-full", children: /* @__PURE__ */ jsx65(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ jsx65("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx65("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx65("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx65(
+        Node.Image,
         {
           node: totpImage,
           attributes: {
@@ -2435,14 +2443,14 @@ function DefaultSettingsTotp({
           }
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx64(
-          Node2.Label,
+      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx65(
+          Node.Label,
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ jsx64(
-              Node2.Input,
+            children: /* @__PURE__ */ jsx65(
+              Node.Input,
               {
                 node: totpSecret,
                 attributes: {
@@ -2456,13 +2464,13 @@ function DefaultSettingsTotp({
             )
           }
         ),
-        /* @__PURE__ */ jsx64(
-          Node2.Label,
+        /* @__PURE__ */ jsx65(
+          Node.Label,
           {
             attributes: totpInput.attributes,
             node: totpInput,
-            children: /* @__PURE__ */ jsx64(
-              Node2.CodeInput,
+            children: /* @__PURE__ */ jsx65(
+              Node.CodeInput,
               {
                 node: totpInput,
                 attributes: totpInput.attributes
@@ -2476,20 +2484,20 @@ function DefaultSettingsTotp({
 }
 
 // src/theme/default/components/settings/settings-webauthn.tsx
-import { useComponents as useComponents7 } from "@ory/elements-react";
+import { useComponents as useComponents6 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/key.svg
-import * as React33 from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import * as React34 from "react";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var SvgKey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx65("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx65("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
+  return /* @__PURE__ */ jsx66("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx66("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
 };
 var key_default = SvgKey;
 
 // src/theme/default/components/settings/settings-webauthn.tsx
 import { useFormContext as useFormContext11 } from "react-hook-form";
-import { jsx as jsx66, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
@@ -2498,17 +2506,17 @@ function DefaultSettingsWebauthn({
   const {
     formState: { isSubmitting }
   } = useFormContext11();
-  const { Node: Node2, Card } = useComponents7();
+  const { Node, Card } = useComponents6();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs35("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
-      /* @__PURE__ */ jsx66("div", { className: "flex-1", children: /* @__PURE__ */ jsx66(
-        Node2.Label,
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
+      /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67(
+        Node.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
-          children: /* @__PURE__ */ jsx66(
-            Node2.Input,
+          children: /* @__PURE__ */ jsx67(
+            Node.Input,
             {
               node: nameInput,
               attributes: nameInput.attributes
@@ -2516,8 +2524,8 @@ function DefaultSettingsWebauthn({
           )
         }
       ) }),
-      triggerButton ? /* @__PURE__ */ jsx66(
-        Node2.Button,
+      triggerButton ? /* @__PURE__ */ jsx67(
+        Node.Button,
         {
           node: triggerButton,
           attributes: triggerButton.attributes,
@@ -2525,38 +2533,38 @@ function DefaultSettingsWebauthn({
         }
       ) : null
     ] }),
-    hasRemoveButtons ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx66(Card.Divider, {}),
-      /* @__PURE__ */ jsx66("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
+    hasRemoveButtons ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx67(Card.Divider, {}),
+      /* @__PURE__ */ jsx67("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
         const displayName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
-        return /* @__PURE__ */ jsxs35(
+        return /* @__PURE__ */ jsxs36(
           "div",
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
-                /* @__PURE__ */ jsx66(
+              /* @__PURE__ */ jsxs36("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+                /* @__PURE__ */ jsx67(
                   key_default,
                   {
                     size: 32,
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
-                  /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col truncate", children: [
-                    /* @__PURE__ */ jsx66("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
-                    /* @__PURE__ */ jsx66("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
+                /* @__PURE__ */ jsxs36("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                  /* @__PURE__ */ jsxs36("div", { className: "flex-1 flex-col truncate", children: [
+                    /* @__PURE__ */ jsx67("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
+                    /* @__PURE__ */ jsx67("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ jsx66("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ jsx67("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx66(
+              /* @__PURE__ */ jsx67(
                 "button",
                 {
                   ...node.attributes,
@@ -2564,7 +2572,7 @@ function DefaultSettingsWebauthn({
                   onClick: node.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx66(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx66(
+                  children: isSubmitting ? /* @__PURE__ */ jsx67(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx67(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2583,313 +2591,34 @@ function DefaultSettingsWebauthn({
 }
 
 // src/theme/default/components/card/auth-method-list-container.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function DefaultAuthMethodListContainer({
   children
 }) {
-  return /* @__PURE__ */ jsx67("div", { className: "grid grid-cols-1 gap-2", children });
+  return /* @__PURE__ */ jsx68("div", { className: "grid grid-cols-1 gap-2", children });
 }
 
 // src/theme/default/components/form/captcha.tsx
-import { isUiNodeInputAttributes as isUiNodeInputAttributes7 } from "@ory/client-fetch";
+import { isUiNodeInputAttributes as isUiNodeInputAttributes3 } from "@ory/client-fetch";
 import { Turnstile } from "@marsidev/react-turnstile";
 import { useRef as useRef2 } from "react";
-import { useFormContext as useFormContext23 } from "react-hook-form";
-
-// src/context/flow-context.tsx
-import {
-  createContext as createContext2,
-  useContext as useContext3,
-  useState as useState3
-} from "react";
-
-// src/context/form-state.ts
-import { FlowType as FlowType9 } from "@ory/client-fetch";
-import { useReducer } from "react";
-
-// src/components/card/card-two-step.utils.ts
-import { FlowType as FlowType8, UiNodeGroupEnum as UiNodeGroupEnum3 } from "@ory/client-fetch";
-
-// src/context/flow-context.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
-var OryFlowContext = createContext2(null);
-
-// src/context/intl-context.tsx
-import { IntlProvider as OriginalIntlProvider } from "react-intl";
-
-// src/components/card/header.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
-
-// src/components/form/form-provider.tsx
-import { UiNodeGroupEnum as UiNodeGroupEnum5 } from "@ory/client-fetch";
-import { FormProvider, useForm as useForm2 } from "react-hook-form";
-
-// src/components/form/form-helpers.ts
-import { isUiNodeInputAttributes as isUiNodeInputAttributes3 } from "@ory/client-fetch";
-
-// src/components/form/form-resolver.ts
-import { isUiNodeInputAttributes as isUiNodeInputAttributes4 } from "@ory/client-fetch";
-
-// src/components/form/form-provider.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
-
-// src/components/card/card.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-
-// src/components/card/footer.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
-
-// src/components/card/content.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
-
-// src/components/card/card-two-step.tsx
-import { UiNodeGroupEnum as UiNodeGroupEnum7 } from "@ory/client-fetch";
-import { useFormContext as useFormContext15 } from "react-hook-form";
-
-// src/components/form/form.tsx
-import {
-  FlowType as FlowType16,
-  isUiNodeAnchorAttributes,
-  isUiNodeImageAttributes,
-  isUiNodeInputAttributes as isUiNodeInputAttributes5,
-  isUiNodeScriptAttributes
-} from "@ory/client-fetch";
-import { useFormContext as useFormContext13 } from "react-hook-form";
-import { useIntl as useIntl13 } from "react-intl";
-
-// src/components/form/useOryFormSubmit.ts
-import {
-  FlowType as FlowType15
-} from "@ory/client-fetch";
 import { useFormContext as useFormContext12 } from "react-hook-form";
-
-// src/util/onSubmitLogin.ts
-import {
-  FlowType as FlowType10,
-  handleFlowError,
-  loginUrl
-} from "@ory/client-fetch";
-
-// src/util/onSubmitRecovery.ts
-import {
-  FlowType as FlowType11,
-  handleContinueWith,
-  handleFlowError as handleFlowError2,
-  instanceOfContinueWithRecoveryUi,
-  recoveryUrl
-} from "@ory/client-fetch";
-
-// src/util/onSubmitRegistration.ts
-import {
-  FlowType as FlowType12,
-  handleContinueWith as handleContinueWith2,
-  handleFlowError as handleFlowError3,
-  registrationUrl
-} from "@ory/client-fetch";
-
-// src/util/onSubmitSettings.ts
-import {
-  FlowType as FlowType13,
-  handleContinueWith as handleContinueWith3,
-  handleFlowError as handleFlowError4,
-  isResponseError,
-  loginUrl as loginUrl2,
-  settingsUrl
-} from "@ory/client-fetch";
-
-// src/util/onSubmitVerification.ts
-import {
-  FlowType as FlowType14,
-  handleFlowError as handleFlowError5,
-  verificationUrl
-} from "@ory/client-fetch";
-
-// src/components/form/form.tsx
-import { Fragment as Fragment6, jsx as jsx74, jsxs as jsxs36 } from "react/jsx-runtime";
-
-// src/components/form/messages.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
-
-// src/components/form/nodes/node.tsx
-import {
-  isUiNodeAnchorAttributes as isUiNodeAnchorAttributes2,
-  isUiNodeImageAttributes as isUiNodeImageAttributes2,
-  isUiNodeInputAttributes as isUiNodeInputAttributes6,
-  isUiNodeScriptAttributes as isUiNodeScriptAttributes2,
-  isUiNodeTextAttributes,
-  UiNodeGroupEnum as UiNodeGroupEnum6
-} from "@ory/client-fetch";
-import { jsx as jsx76 } from "react/jsx-runtime";
-
-// src/components/form/social.tsx
-import { useFormContext as useFormContext14 } from "react-hook-form";
-import { jsx as jsx77 } from "react/jsx-runtime";
-
-// src/components/card/card-two-step.tsx
-import { Fragment as Fragment7, jsx as jsx78, jsxs as jsxs37 } from "react/jsx-runtime";
-
-// src/components/form/groups.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
-
-// src/components/form/section.tsx
-import { useFormContext as useFormContext16 } from "react-hook-form";
-import { jsx as jsx80 } from "react/jsx-runtime";
-
-// src/components/generic/divider.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
-
-// src/components/generic/page-header.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
-
-// src/components/settings/settings-card.tsx
-import { UiNodeGroupEnum as UiNodeGroupEnum8 } from "@ory/client-fetch";
-import { useIntl as useIntl19 } from "react-intl";
-
-// src/components/settings/oidc-settings.tsx
-import { useIntl as useIntl14 } from "react-intl";
-import { useFormContext as useFormContext17 } from "react-hook-form";
-import { Fragment as Fragment8, jsx as jsx83, jsxs as jsxs38 } from "react/jsx-runtime";
-
-// src/components/settings/passkey-settings.tsx
-import { useFormContext as useFormContext18 } from "react-hook-form";
-import { useIntl as useIntl15 } from "react-intl";
-import { Fragment as Fragment9, jsx as jsx84, jsxs as jsxs39 } from "react/jsx-runtime";
-
-// src/components/settings/recovery-codes-settings.tsx
-import { useIntl as useIntl16 } from "react-intl";
-import { useFormContext as useFormContext19 } from "react-hook-form";
-import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs40 } from "react/jsx-runtime";
-
-// src/components/settings/totp-settings.tsx
-import { useFormContext as useFormContext20 } from "react-hook-form";
-import { useIntl as useIntl17 } from "react-intl";
-import { Fragment as Fragment11, jsx as jsx86, jsxs as jsxs41 } from "react/jsx-runtime";
-
-// src/components/settings/webauthn-settings.tsx
-import { useFormContext as useFormContext21 } from "react-hook-form";
-import { useIntl as useIntl18 } from "react-intl";
-import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs42 } from "react/jsx-runtime";
-
-// src/components/settings/settings-card.tsx
-import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs43 } from "react/jsx-runtime";
-
-// src/context/intl-context.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
-
-// src/context/provider.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
-
-// src/components/form/nodes/input.tsx
-import {
-  UiNodeInputAttributesTypeEnum
-} from "@ory/client-fetch";
-import { useEffect as useEffect5, useRef } from "react";
-import { useFormContext as useFormContext22 } from "react-hook-form";
-import { jsx as jsx91 } from "react/jsx-runtime";
-var NodeInput = ({
-  node,
-  attributes
-}) => {
-  var _a;
-  const { Node: Node2 } = useComponents();
-  const { setValue } = useFormContext22();
-  const {
-    onloadTrigger,
-    onclickTrigger,
-    // These properties do not exist on input fields so we remove them (as we already have handled them).
-    onclick: _ignoredOnclick,
-    onload: _ignoredOnload,
-    //
-    ...attrs
-  } = attributes;
-  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
-  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
-  const setFormValue = () => {
-    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
-      setValue(attrs.name, attrs.value);
-    }
-  };
-  const hasRun = useRef(false);
-  useEffect5(
-    () => {
-      setFormValue();
-      if (!hasRun.current && onloadTrigger) {
-        hasRun.current = true;
-        triggerToWindowCall(onloadTrigger);
-      }
-    },
-    // TODO(jonas): make sure onloadTrigger is stable
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
-    []
-  );
-  const handleClick = () => {
-    setFormValue();
-    if (onclickTrigger) {
-      triggerToWindowCall(onclickTrigger);
-    }
-  };
-  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
-  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
-  switch (attributes.type) {
-    case UiNodeInputAttributesTypeEnum.Submit:
-    case UiNodeInputAttributesTypeEnum.Button:
-      if (isSocial) {
-        return null;
-      }
-      if (isResendNode || isScreenSelectionNode) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx91(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsx91(Node2.Button, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
-    case UiNodeInputAttributesTypeEnum.DatetimeLocal:
-      throw new Error("Not implemented");
-    case UiNodeInputAttributesTypeEnum.Checkbox:
-      return /* @__PURE__ */ jsx91(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsx91(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
-    case UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ jsx91(Node2.Input, { attributes: attrs, node, onClick: handleClick });
-    default:
-      if (isPinCodeInput) {
-        return /* @__PURE__ */ jsx91(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx91(
-          Node2.CodeInput,
-          {
-            attributes: attrs,
-            node,
-            onClick: handleClick
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsx91(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx91(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
-  }
-};
-
-// src/theme/default/components/form/captcha.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var DefaultCaptcha = ({ node }) => {
-  const { setValue } = useFormContext23();
+  const { setValue } = useFormContext12();
   const ref = useRef2();
   const nodes = [];
-  if (isUiNodeInputAttributes7(node.attributes)) {
+  if (isUiNodeInputAttributes3(node.attributes)) {
     if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-      nodes.push(/* @__PURE__ */ jsx92(NodeInput, { node, attributes: node.attributes }, 1));
+      nodes.push(
+        /* @__PURE__ */ jsx69(DefaultInput, { node, attributes: node.attributes }, 1)
+      );
     }
   }
-  if (isUiNodeInputAttributes7(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
+  if (isUiNodeInputAttributes3(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
     const options = JSON.parse(node.attributes.value);
     nodes.push(
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx69(
         Turnstile,
         {
           ref,
@@ -2966,21 +2695,21 @@ function getOryComponents(overrides) {
 }
 
 // src/theme/default/flows/error.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function Error2({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsx93("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ jsx70("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
-import { FlowType as FlowType17 } from "@ory/client-fetch";
+import { FlowType as FlowType8 } from "@ory/client-fetch";
 import {
   OryProvider,
-  OryTwoStepCard as OryTwoStepCard2
+  OryTwoStepCard
 } from "@ory/elements-react";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 function Login({
   flow,
   config,
@@ -2988,25 +2717,25 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx71(
     OryProvider,
     {
       config,
       flow,
-      flowType: FlowType17.Login,
+      flowType: FlowType8.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx94(OryTwoStepCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx71(OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
-import { FlowType as FlowType18 } from "@ory/client-fetch";
+import { FlowType as FlowType9 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider2,
-  OryTwoStepCard as OryTwoStepCard3
+  OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 function Recovery({
   flow,
   config,
@@ -3014,25 +2743,25 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx72(
     OryProvider2,
     {
       config,
       flow,
-      flowType: FlowType18.Recovery,
+      flowType: FlowType9.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx95(OryTwoStepCard3, {})
+      children: children != null ? children : /* @__PURE__ */ jsx72(OryTwoStepCard2, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
-import { FlowType as FlowType19 } from "@ory/client-fetch";
+import { FlowType as FlowType10 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider3,
-  OryTwoStepCard as OryTwoStepCard4
+  OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 function Registration({
   flow,
   children,
@@ -3040,26 +2769,26 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx73(
     OryProvider3,
     {
       config,
       flow,
-      flowType: FlowType19.Registration,
+      flowType: FlowType10.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx96(OryTwoStepCard4, {})
+      children: children != null ? children : /* @__PURE__ */ jsx73(OryTwoStepCard3, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
-import { FlowType as FlowType20 } from "@ory/client-fetch";
+import { FlowType as FlowType11 } from "@ory/client-fetch";
 import {
   HeadlessPageHeader,
   OryProvider as OryProvider4,
   OrySettingsCard
 } from "@ory/elements-react";
-import { Fragment as Fragment14, jsx as jsx97, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx74, jsxs as jsxs37 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -3067,28 +2796,28 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx74(
     OryProvider4,
     {
       config,
       flow,
-      flowType: FlowType20.Settings,
+      flowType: FlowType11.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs44(Fragment14, { children: [
-        /* @__PURE__ */ jsx97(HeadlessPageHeader, {}),
-        /* @__PURE__ */ jsx97(OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsxs37(Fragment6, { children: [
+        /* @__PURE__ */ jsx74(HeadlessPageHeader, {}),
+        /* @__PURE__ */ jsx74(OrySettingsCard, {})
       ] })
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
-import { FlowType as FlowType21 } from "@ory/client-fetch";
+import { FlowType as FlowType12 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider5,
-  OryTwoStepCard as OryTwoStepCard5
+  OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 function Verification({
   flow,
   config,
@@ -3096,14 +2825,14 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx75(
     OryProvider5,
     {
       config,
       flow,
-      flowType: FlowType21.Verification,
+      flowType: FlowType12.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx98(OryTwoStepCard5, {})
+      children: children != null ? children : /* @__PURE__ */ jsx75(OryTwoStepCard4, {})
     }
   );
 }