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

package/dist/theme/default/index.mjs

@@ -1523,9 +1523,33 @@ import {
   uiTextToFormattedMessage as uiTextToFormattedMessage6,
   useOryFlow as useOryFlow7
 } from "@ory/elements-react";
+import { useRef, useState as useState2 } from "react";
 import { useFormContext as useFormContext4 } from "react-hook-form";
 import { useIntl as useIntl9 } from "react-intl";
+
+// 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 +1567,7 @@ var DefaultInput = ({
   } = attributes;
   const intl = useIntl9();
   const { flowType } = useOryFlow7();
+  const inputRef = useRef(null);
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
@@ -1552,29 +1577,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 {
@@ -1590,7 +1665,7 @@ import {
 } 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")
@@ -1615,9 +1690,9 @@ function DefaultLabel({
     }
   };
   const fieldError = formState.errors[attributes.name];
-  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1 antialiased", children: [
-    label && /* @__PURE__ */ jsxs23("span", { className: "inline-flex justify-between", children: [
-      /* @__PURE__ */ 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 +1704,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 +1715,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 +1728,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 +1740,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 +1765,9 @@ import { useFormContext as useFormContext6 } from "react-hook-form";
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
-import * as 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 +1780,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 +1797,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 +1808,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 // src/theme/default/components/form/pin-code-input.tsx
 import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
 import { FlowType as FlowType7 } from "@ory/client-fetch";
-import { jsx as 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 +1818,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 +1833,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
             // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
             flowType === FlowType7.Settings && "max-w-[488px]"
           ),
-          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx46(InputOTPSlot, { index }, index))
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx48(InputOTPSlot, { index }, index))
         }
       )
     }
@@ -1766,13 +1841,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 +1861,10 @@ var DefaultFormSectionContent = ({
   description,
   children
 }) => {
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-8 rounded-t-cards border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
-    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ 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 +1873,14 @@ var DefaultFormSectionFooter = ({
   children,
   text
 }) => {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
         "flex min-h-[72px] items-center justify-between gap-2 rounded-b-cards border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
       ),
       children: [
-        /* @__PURE__ */ jsx47("span", { children: text }),
+        /* @__PURE__ */ jsx49("span", { children: text }),
         children
       ]
     }
@@ -1815,31 +1890,31 @@ var DefaultFormSectionFooter = ({
 // src/theme/default/components/form/text.tsx
 import { uiTextToFormattedMessage as uiTextToFormattedMessage9 } from "@ory/elements-react";
 import { useIntl as useIntl12 } from "react-intl";
-import { Fragment as Fragment4, jsx as 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) : ""
       ]
     }
@@ -1851,7 +1926,7 @@ import { useComponents as useComponents4 } from "@ory/elements-react";
 
 // src/theme/default/components/ui/user-menu.tsx
 import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
-import { useCallback, useEffect as useEffect3, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
 
 // src/util/client.ts
@@ -1872,22 +1947,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 +2009,10 @@ var getUserInitials = (session) => {
 // src/theme/default/components/ui/dropdown-menu.tsx
 import { forwardRef as forwardRef3 } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as 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 +2027,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 +2045,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 +2063,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 +2102,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 +2114,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 +2138,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 { 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 +2154,26 @@ import { useFormContext as useFormContext7 } from "react-hook-form";
 import { useDebounceValue as useDebounceValue2 } from "usehooks-ts";
 
 // src/theme/default/assets/icons/trash.svg
-import * as 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 +2184,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 +2211,12 @@ function UnlinkRow({ button }) {
       setClicked(false);
     }
   }, [isSubmitting, setClicked]);
-  return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
-      Logo ? /* @__PURE__ */ 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 +2225,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",
@@ -2165,7 +2240,7 @@ function UnlinkRow({ button }) {
 // src/theme/default/components/settings/settings-passkey.tsx
 import { useComponents as useComponents5 } 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
@@ -2175,8 +2250,8 @@ function DefaultSettingsPasskey({
   } = useFormContext8();
   const { Node: Node2 } = useComponents5();
   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(
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsx60("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx60(
       Node2.Button,
       {
         node: triggerButton,
@@ -2184,38 +2259,38 @@ function DefaultSettingsPasskey({
         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 +2298,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 +2317,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 +2358,12 @@ function DefaultSettingsRecoveryCodes({
     element.click();
   };
   const hasCodes = codes.length >= 1;
-  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
-    codes.length > 0 && /* @__PURE__ */ 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 +2372,7 @@ function DefaultSettingsRecoveryCodes({
             onClick: onRegenerate,
             disabled: isSubmitting,
             "data-loading": isSubmitting,
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx63(
               refresh_default,
               {
                 size: 24,
@@ -2318,7 +2381,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ),
-        revealButton && /* @__PURE__ */ jsx62(Fragment5, { children: /* @__PURE__ */ jsx62(
+        revealButton && /* @__PURE__ */ jsx63(Fragment5, { children: /* @__PURE__ */ jsx63(
           "button",
           {
             ...revealButton.attributes,
@@ -2326,7 +2389,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             onClick: onReveal,
             title: "Reveal recovery codes",
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx63(
               eye_default,
               {
                 size: 24,
@@ -2335,7 +2398,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ) }),
-        hasCodes && /* @__PURE__ */ jsx62(
+        hasCodes && /* @__PURE__ */ jsx63(
           "button",
           {
             onClick: onDownload,
@@ -2343,7 +2406,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,12 +2417,12 @@ 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
   ] });
@@ -2369,17 +2432,17 @@ function DefaultSettingsRecoveryCodes({
 import { useComponents as useComponents6 } 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,
@@ -2399,19 +2462,19 @@ function DefaultSettingsTotp({
       node_type: _ignoredNodeType,
       ...buttonAttrs
     } = totpUnlink.attributes;
-    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ 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,9 +2487,9 @@ function DefaultSettingsTotp({
     ] });
   }
   if (totpImage && totpSecret && totpInput) {
-    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ 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(
+    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx65("div", { className: "col-span-full", children: /* @__PURE__ */ jsx65(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ jsx65("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx65("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx65("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx65(
         Node2.Image,
         {
           node: totpImage,
@@ -2435,13 +2498,13 @@ function DefaultSettingsTotp({
           }
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx65(
           Node2.Label,
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ jsx64(
+            children: /* @__PURE__ */ jsx65(
               Node2.Input,
               {
                 node: totpSecret,
@@ -2456,12 +2519,12 @@ function DefaultSettingsTotp({
             )
           }
         ),
-        /* @__PURE__ */ jsx64(
+        /* @__PURE__ */ jsx65(
           Node2.Label,
           {
             attributes: totpInput.attributes,
             node: totpInput,
-            children: /* @__PURE__ */ jsx64(
+            children: /* @__PURE__ */ jsx65(
               Node2.CodeInput,
               {
                 node: totpInput,
@@ -2479,17 +2542,17 @@ function DefaultSettingsTotp({
 import { useComponents as useComponents7 } 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,
@@ -2500,14 +2563,14 @@ function DefaultSettingsWebauthn({
   } = useFormContext11();
   const { Node: Node2, Card } = useComponents7();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs35("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
-      /* @__PURE__ */ jsx66("div", { className: "flex-1", children: /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
+      /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67(
         Node2.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
-          children: /* @__PURE__ */ jsx66(
+          children: /* @__PURE__ */ jsx67(
             Node2.Input,
             {
               node: nameInput,
@@ -2516,7 +2579,7 @@ function DefaultSettingsWebauthn({
           )
         }
       ) }),
-      triggerButton ? /* @__PURE__ */ jsx66(
+      triggerButton ? /* @__PURE__ */ jsx67(
         Node2.Button,
         {
           node: triggerButton,
@@ -2525,38 +2588,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 +2627,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,24 +2646,24 @@ 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 { Turnstile } from "@marsidev/react-turnstile";
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import { useFormContext as useFormContext23 } from "react-hook-form";
 
 // src/context/flow-context.tsx
 import {
   createContext as createContext2,
   useContext as useContext3,
-  useState as useState3
+  useState as useState4
 } from "react";
 
 // src/context/form-state.ts
@@ -2611,14 +2674,14 @@ import { useReducer } from "react";
 import { FlowType as FlowType8, UiNodeGroupEnum as UiNodeGroupEnum3 } from "@ory/client-fetch";
 
 // src/context/flow-context.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var OryFlowContext = createContext2(null);
 
 // src/context/intl-context.tsx
 import { IntlProvider as OriginalIntlProvider } from "react-intl";
 
 // src/components/card/header.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 
 // src/components/form/form-provider.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum5 } from "@ory/client-fetch";
@@ -2631,16 +2694,16 @@ import { isUiNodeInputAttributes as isUiNodeInputAttributes3 } from "@ory/client
 import { isUiNodeInputAttributes as isUiNodeInputAttributes4 } from "@ory/client-fetch";
 
 // src/components/form/form-provider.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 
 // src/components/card/card.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 
 // src/components/card/footer.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 
 // src/components/card/content.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 
 // src/components/card/card-two-step.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum7 } from "@ory/client-fetch";
@@ -2705,10 +2768,10 @@ import {
 } from "@ory/client-fetch";
 
 // src/components/form/form.tsx
-import { Fragment as Fragment6, jsx as jsx74, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx75, jsxs as jsxs37 } from "react/jsx-runtime";
 
 // src/components/form/messages.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 
 // src/components/form/nodes/node.tsx
 import {
@@ -2719,27 +2782,27 @@ import {
   isUiNodeTextAttributes,
   UiNodeGroupEnum as UiNodeGroupEnum6
 } from "@ory/client-fetch";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 
 // src/components/form/social.tsx
 import { useFormContext as useFormContext14 } from "react-hook-form";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } 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";
+import { Fragment as Fragment7, jsx as jsx79, jsxs as jsxs38 } from "react/jsx-runtime";
 
 // src/components/form/groups.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 
 // src/components/form/section.tsx
 import { useFormContext as useFormContext16 } from "react-hook-form";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 
 // src/components/generic/divider.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 
 // src/components/generic/page-header.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 
 // src/components/settings/settings-card.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum8 } from "@ory/client-fetch";
@@ -2748,44 +2811,44 @@ 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";
+import { Fragment as Fragment8, jsx as jsx84, jsxs as jsxs39 } from "react/jsx-runtime";
 
 // src/components/settings/passkey-settings.tsx
 import { useFormContext as useFormContext18 } from "react-hook-form";
 import { useIntl as useIntl15 } from "react-intl";
-import { Fragment as Fragment9, jsx as jsx84, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs40 } from "react/jsx-runtime";
 
 // src/components/settings/recovery-codes-settings.tsx
 import { useIntl as useIntl16 } from "react-intl";
 import { useFormContext as useFormContext19 } from "react-hook-form";
-import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx86, jsxs as jsxs41 } from "react/jsx-runtime";
 
 // src/components/settings/totp-settings.tsx
 import { useFormContext as useFormContext20 } from "react-hook-form";
 import { useIntl as useIntl17 } from "react-intl";
-import { Fragment as Fragment11, jsx as jsx86, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs42 } from "react/jsx-runtime";
 
 // src/components/settings/webauthn-settings.tsx
 import { useFormContext as useFormContext21 } from "react-hook-form";
 import { useIntl as useIntl18 } from "react-intl";
-import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs43 } from "react/jsx-runtime";
 
 // src/components/settings/settings-card.tsx
-import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx89, jsxs as jsxs44 } from "react/jsx-runtime";
 
 // src/context/intl-context.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 
 // src/context/provider.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 
 // src/components/form/nodes/input.tsx
 import {
   UiNodeInputAttributesTypeEnum
 } from "@ory/client-fetch";
-import { useEffect as useEffect5, useRef } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 import { useFormContext as useFormContext22 } from "react-hook-form";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var NodeInput = ({
   node,
   attributes
@@ -2809,7 +2872,7 @@ var NodeInput = ({
       setValue(attrs.name, attrs.value);
     }
   };
-  const hasRun = useRef(false);
+  const hasRun = useRef2(false);
   useEffect5(
     () => {
       setFormValue();
@@ -2839,30 +2902,30 @@ var NodeInput = ({
       if (isResendNode || isScreenSelectionNode) {
         return null;
       }
-      return /* @__PURE__ */ jsx91(
+      return /* @__PURE__ */ jsx92(
         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 })
+          children: /* @__PURE__ */ jsx92(Node2.Button, { attributes: attrs, node, onClick: handleClick })
         }
       );
     case UiNodeInputAttributesTypeEnum.DatetimeLocal:
       throw new Error("Not implemented");
     case UiNodeInputAttributesTypeEnum.Checkbox:
-      return /* @__PURE__ */ jsx91(
+      return /* @__PURE__ */ jsx92(
         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 })
+          children: /* @__PURE__ */ jsx92(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
         }
       );
     case UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ jsx91(Node2.Input, { attributes: attrs, node, onClick: handleClick });
+      return /* @__PURE__ */ jsx92(Node2.Input, { attributes: attrs, node, onClick: handleClick });
     default:
       if (isPinCodeInput) {
-        return /* @__PURE__ */ jsx91(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx91(
+        return /* @__PURE__ */ jsx92(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx92(
           Node2.CodeInput,
           {
             attributes: attrs,
@@ -2871,25 +2934,25 @@ var NodeInput = ({
           }
         ) });
       }
-      return /* @__PURE__ */ jsx91(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx91(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
+      return /* @__PURE__ */ jsx92(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx92(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
   }
 };
 
 // src/theme/default/components/form/captcha.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var DefaultCaptcha = ({ node }) => {
   const { setValue } = useFormContext23();
-  const ref = useRef2();
+  const ref = useRef3();
   const nodes = [];
   if (isUiNodeInputAttributes7(node.attributes)) {
     if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-      nodes.push(/* @__PURE__ */ jsx92(NodeInput, { node, attributes: node.attributes }, 1));
+      nodes.push(/* @__PURE__ */ jsx93(NodeInput, { node, attributes: node.attributes }, 1));
     }
   }
   if (isUiNodeInputAttributes7(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
     const options = JSON.parse(node.attributes.value);
     nodes.push(
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx93(
         Turnstile,
         {
           ref,
@@ -2966,12 +3029,12 @@ function getOryComponents(overrides) {
 }
 
 // src/theme/default/flows/error.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } 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__ */ jsx94("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
@@ -2980,7 +3043,7 @@ import {
   OryProvider,
   OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function Login({
   flow,
   config,
@@ -2988,14 +3051,14 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     OryProvider,
     {
       config,
       flow,
       flowType: FlowType17.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx94(OryTwoStepCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx95(OryTwoStepCard2, {})
     }
   );
 }
@@ -3006,7 +3069,7 @@ import {
   OryProvider as OryProvider2,
   OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 function Recovery({
   flow,
   config,
@@ -3014,14 +3077,14 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96(
     OryProvider2,
     {
       config,
       flow,
       flowType: FlowType18.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx95(OryTwoStepCard3, {})
+      children: children != null ? children : /* @__PURE__ */ jsx96(OryTwoStepCard3, {})
     }
   );
 }
@@ -3032,7 +3095,7 @@ import {
   OryProvider as OryProvider3,
   OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 function Registration({
   flow,
   children,
@@ -3040,14 +3103,14 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx97(
     OryProvider3,
     {
       config,
       flow,
       flowType: FlowType19.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx96(OryTwoStepCard4, {})
+      children: children != null ? children : /* @__PURE__ */ jsx97(OryTwoStepCard4, {})
     }
   );
 }
@@ -3059,7 +3122,7 @@ import {
   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 Fragment14, jsx as jsx98, jsxs as jsxs45 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -3067,16 +3130,16 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     OryProvider4,
     {
       config,
       flow,
       flowType: FlowType20.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs44(Fragment14, { children: [
-        /* @__PURE__ */ jsx97(HeadlessPageHeader, {}),
-        /* @__PURE__ */ jsx97(OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsxs45(Fragment14, { children: [
+        /* @__PURE__ */ jsx98(HeadlessPageHeader, {}),
+        /* @__PURE__ */ jsx98(OrySettingsCard, {})
       ] })
     }
   );
@@ -3088,7 +3151,7 @@ import {
   OryProvider as OryProvider5,
   OryTwoStepCard as OryTwoStepCard5
 } from "@ory/elements-react";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 function Verification({
   flow,
   config,
@@ -3096,14 +3159,14 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     OryProvider5,
     {
       config,
       flow,
       flowType: FlowType21.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx98(OryTwoStepCard5, {})
+      children: children != null ? children : /* @__PURE__ */ jsx99(OryTwoStepCard5, {})
     }
   );
 }