@ory/elements-react 1.2.0-rc.0 → 1.2.0-rc.1

package/dist/theme/default/index.mjs

@@ -41,16 +41,16 @@ function DefaultCardContent({ children }) {
 // src/theme/default/components/card/footer.tsx
 import { FlowType as FlowType11 } from "@ory/client-fetch";
 import {
-  useComponents as useComponents3,
+  Node as Node2,
   useOryConfiguration as useOryConfiguration2,
   useOryFlow as useOryFlow3
 } from "@ory/elements-react";
-import { useIntl as useIntl9 } from "react-intl";
+import { useIntl as useIntl10 } from "react-intl";
 
 // src/components/card/two-step/state-select-method.tsx
 import {
-  isUiNodeScriptAttributes as isUiNodeScriptAttributes6,
-  UiNodeGroupEnum as UiNodeGroupEnum14
+  isUiNodeScriptAttributes as isUiNodeScriptAttributes5,
+  UiNodeGroupEnum as UiNodeGroupEnum15
 } from "@ory/client-fetch";
 
 // src/context/component.tsx
@@ -66,6 +66,13 @@ 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,
@@ -104,6 +111,33 @@ import {
 } from "@ory/client-fetch";
 import { UiNodeGroupEnum as UiNodeGroupEnum2 } from "@ory/client-fetch";
 import { useMemo } from "react";
+function triggerToWindowCall(trigger) {
+  if (!trigger) {
+    return;
+  }
+  const fn = triggerToFunction(trigger);
+  if (fn) {
+    fn();
+    return;
+  }
+  let i = 0;
+  const ms = 100;
+  const interval = setInterval(() => {
+    i++;
+    if (i > 100) {
+      clearInterval(interval);
+      throw new Error(
+        "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console."
+      );
+    }
+    const fn2 = triggerToFunction(trigger);
+    if (fn2) {
+      clearInterval(interval);
+      return fn2();
+    }
+  }, ms);
+  return;
+}
 function triggerToFunction(trigger) {
   if (typeof window === "undefined") {
     console.debug(
@@ -319,11 +353,7 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 import { jsx as jsx8 } from "react/jsx-runtime";
 
 // src/components/form/social.tsx
-import {
-  getNodeId,
-  UiNodeGroupEnum as UiNodeGroupEnum7
-} from "@ory/client-fetch";
-import { useFormContext as useFormContext3 } from "react-hook-form";
+import { getNodeId, UiNodeGroupEnum as UiNodeGroupEnum10 } from "@ory/client-fetch";
 
 // src/components/form/form-provider.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum6 } from "@ory/client-fetch";
@@ -335,81 +365,193 @@ import { isUiNodeInputAttributes as isUiNodeInputAttributes5 } from "@ory/client
 // src/components/form/form-provider.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
 
-// src/components/form/social.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-
-// src/components/form/settings-section.tsx
-import { useFormContext as useFormContext4 } from "react-hook-form";
-import { jsx as jsx11 } from "react/jsx-runtime";
-
-// src/components/generic/divider.tsx
-import { UiNodeGroupEnum as UiNodeGroupEnum8 } from "@ory/client-fetch";
-import { jsx as jsx12 } from "react/jsx-runtime";
-
-// src/components/generic/page-header.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-
-// src/components/settings/settings-card.tsx
-import {
-  getNodeId as getNodeId2,
-  isUiNodeScriptAttributes as isUiNodeScriptAttributes4,
-  UiNodeGroupEnum as UiNodeGroupEnum11
-} from "@ory/client-fetch";
-import { useEffect as useEffect2 } from "react";
-import { useIntl as useIntl7 } from "react-intl";
-import { Toaster } from "sonner";
+// src/components/form/nodes/node.tsx
+import { UiNodeGroupEnum as UiNodeGroupEnum9 } from "@ory/client-fetch";
 
-// src/util/showToast.tsx
-import { toast as sonnerToast } from "sonner";
-import { jsx as jsx14 } from "react/jsx-runtime";
+// src/util/utilFixSDKTypesHelper.ts
+function isUiNodeInput(node) {
+  return node.type === "input";
+}
+function isUiNodeImage(node) {
+  return node.type === "img";
+}
+function isUiNodeAnchor(node) {
+  return node.type === "a";
+}
+function isUiNodeText(node) {
+  return node.type === "text";
+}
+function isUiNodeScript(node) {
+  return node.type === "script";
+}
 
 // src/components/form/nodes/input.tsx
 import {
-  UiNodeGroupEnum as UiNodeGroupEnum9,
+  UiNodeGroupEnum as UiNodeGroupEnum8,
   UiNodeInputAttributesTypeEnum
 } from "@ory/client-fetch";
-import { useEffect, useRef as useRef2 } from "react";
-import { useFormContext as useFormContext5 } from "react-hook-form";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useFormContext as useFormContext6 } from "react-hook-form";
 
-// src/components/form/nodes/node.tsx
-import {
-  isUiNodeAnchorAttributes as isUiNodeAnchorAttributes2,
-  isUiNodeImageAttributes as isUiNodeImageAttributes2,
-  isUiNodeInputAttributes as isUiNodeInputAttributes6,
-  isUiNodeScriptAttributes as isUiNodeScriptAttributes3,
-  isUiNodeTextAttributes,
-  UiNodeGroupEnum as UiNodeGroupEnum10
-} from "@ory/client-fetch";
-import { jsx as jsx16 } from "react/jsx-runtime";
+// src/components/form/nodes/renderer/consent-checkbox-renderer.tsx
+import { useMemo as useMemo2 } from "react";
+import { useFormContext as useFormContext3 } from "react-hook-form";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ConsentCheckboxRenderer({ node }) {
+  const attributes = node.attributes;
+  const { Node: Node5 } = useComponents();
+  const { setValue, watch, formState } = useFormContext3();
+  const scopes = watch("grant_scope");
+  const checked = useMemo2(() => {
+    if (Array.isArray(scopes)) {
+      return scopes.includes(attributes.value);
+    }
+    return false;
+  }, [scopes, attributes.value]);
+  const handleScopeChange = (checked2) => {
+    const scopes2 = watch("grant_scope");
+    if (Array.isArray(scopes2)) {
+      if (checked2) {
+        setValue(
+          "grant_scope",
+          Array.from(/* @__PURE__ */ new Set([...scopes2, attributes.value]))
+        );
+      } else {
+        setValue(
+          "grant_scope",
+          scopes2.filter((scope) => scope !== attributes.value)
+        );
+      }
+    }
+  };
+  const inputProps = {
+    value: attributes.value,
+    checked: checked === true,
+    disabled: attributes.disabled || !formState.isReady,
+    name: attributes.name
+  };
+  return /* @__PURE__ */ jsx10(
+    Node5.ConsentScopeCheckbox,
+    {
+      attributes,
+      node,
+      inputProps,
+      onCheckedChange: handleScopeChange
+    }
+  );
+}
 
-// src/components/settings/oidc-settings.tsx
-import { useIntl as useIntl2 } from "react-intl";
-import { useFormContext as useFormContext6 } from "react-hook-form";
-import { Fragment, jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/components/form/nodes/node-button.tsx
+import { UiNodeGroupEnum as UiNodeGroupEnum7 } from "@ory/client-fetch";
 
-// src/components/settings/passkey-settings.tsx
-import { useFormContext as useFormContext7 } from "react-hook-form";
-import { useIntl as useIntl3 } from "react-intl";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/components/form/nodes/renderer/button-renderer.tsx
+import { useCallback, useEffect } from "react";
+import { useFormContext as useFormContext4 } from "react-hook-form";
+import { useDebounceValue } from "usehooks-ts";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ButtonRenderer({ node }) {
+  const { Node: Node5 } = useComponents();
+  const { formState, setValue } = useFormContext4();
+  const [clicked, setClicked] = useDebounceValue(false, 100);
+  const handleClick = useCallback(() => {
+    setValue(node.attributes.name, node.attributes.value);
+    setClicked(true);
+    if (node.attributes.onclickTrigger) {
+      triggerToWindowCall(node.attributes.onclickTrigger);
+    }
+  }, [node.attributes, setValue, setClicked]);
+  const buttonProps = {
+    type: node.attributes.type === "submit" ? "submit" : "button",
+    name: node.attributes.name,
+    value: node.attributes.value,
+    onClick: handleClick,
+    disabled: node.attributes.disabled || !formState.isReady || formState.isSubmitting
+  };
+  useEffect(() => {
+    if (!formState.isSubmitting) {
+      setClicked(false);
+    }
+  }, [formState.isSubmitting, setClicked]);
+  return /* @__PURE__ */ jsx11(
+    Node5.Button,
+    {
+      attributes: node.attributes,
+      node,
+      buttonProps,
+      isSubmitting: clicked
+    }
+  );
+}
 
-// src/components/settings/recovery-codes-settings.tsx
-import { useIntl as useIntl4 } from "react-intl";
-import { useFormContext as useFormContext8 } from "react-hook-form";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+// src/components/form/nodes/renderer/checkbox-renderer.tsx
+import { useController } from "react-hook-form";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function CheckboxRenderer({ node }) {
+  const attributes = node.attributes;
+  const { Node: Node5 } = useComponents();
+  const controller = useController({
+    name: attributes.name,
+    defaultValue: attributes.value,
+    disabled: attributes.disabled
+  });
+  const inputProps = {
+    ...controller.field,
+    type: "checkbox",
+    value: controller.field.value === true ? "true" : "false",
+    checked: controller.field.value === true,
+    disabled: attributes.disabled || !controller.formState.isReady
+  };
+  return /* @__PURE__ */ jsx12(
+    Node5.Label,
+    {
+      attributes: { ...attributes, label: void 0 },
+      node: { ...node, meta: { ...node.meta, label: void 0 } },
+      fieldError: controller.fieldState.error,
+      children: /* @__PURE__ */ jsx12(
+        Node5.Checkbox,
+        {
+          attributes,
+          node,
+          inputProps,
+          onClick: () => {
+          }
+        }
+      )
+    }
+  );
+}
 
-// src/components/settings/totp-settings.tsx
-import { useFormContext as useFormContext9 } from "react-hook-form";
-import { useIntl as useIntl5 } from "react-intl";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+// src/components/form/nodes/renderer/image-renderer.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function ImageRenderer({ node }) {
+  const { Node: Node5 } = useComponents();
+  return /* @__PURE__ */ jsx13(Node5.Image, { node, attributes: node.attributes });
+}
 
-// src/components/settings/webauthn-settings.tsx
-import { useFormContext as useFormContext10 } from "react-hook-form";
-import { useIntl as useIntl6 } from "react-intl";
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+// src/components/form/nodes/renderer/input-renderer.tsx
+import { getNodeLabel } from "@ory/client-fetch";
+import { useIntl as useIntl2 } from "react-intl";
+import { useFormState } from "react-hook-form";
 
-// src/components/settings/settings-card.tsx
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+// src/util/nodes.ts
+function findScreenSelectionButton(nodes) {
+  return nodes.find(
+    (node) => node.attributes.node_type === "input" && node.attributes.type === "submit" && node.attributes.name === "screen"
+  );
+}
+function isDynamicText(text) {
+  return text.id === 1070002 && !!text.context && "name" in text.context && typeof text.context["name"] === "string";
+}
+function resolveLabel(text, intl) {
+  if (isDynamicText(text)) {
+    const field = text.context.name;
+    return intl.formatMessage({
+      id: `forms.label.${field}`,
+      defaultMessage: text.text
+    });
+  }
+  return uiTextToFormattedMessage(text, intl);
+}
 
 // src/util/i18n/index.ts
 var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
@@ -466,6 +608,342 @@ var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
     contextInjectedMessage
   );
 };
+function resolvePlaceholder(text, intl) {
+  const fallback = intl.formatMessage(
+    {
+      id: "input.placeholder",
+      defaultMessage: "Enter your {placeholder}"
+    },
+    {
+      placeholder: uiTextToFormattedMessage(text, intl)
+    }
+  );
+  if (isDynamicText(text)) {
+    const field = text.context.name;
+    return intl.formatMessage({
+      id: `forms.input.placeholder.${field}`,
+      defaultMessage: fallback
+    });
+  }
+  return fallback;
+}
+
+// src/components/form/nodes/hooks/useInputProps.tsx
+import { useController as useController2 } from "react-hook-form";
+function useInputProps(attributes, placeholder) {
+  const controller = useController2({
+    name: attributes.name,
+    control: void 0,
+    disabled: attributes.disabled,
+    shouldUnregister: true
+    // TODO: consider adding rules based on attributes.required, attributes.pattern, etc.
+  });
+  const handleClick = () => {
+    if (attributes.onclickTrigger) {
+      triggerToWindowCall(attributes.onclickTrigger);
+    }
+  };
+  return {
+    ...controller.field,
+    type: attributes.type,
+    onClick: handleClick,
+    maxLength: attributes.maxlength,
+    autoComplete: attributes.autocomplete,
+    placeholder: placeholder || "",
+    disabled: attributes.disabled || !controller.formState.isReady
+  };
+}
+
+// src/components/form/nodes/renderer/input-renderer.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function InputRenderer({ node }) {
+  const { Node: Node5 } = useComponents();
+  const label = getNodeLabel(node);
+  const intl = useIntl2();
+  const formState = useFormState();
+  const attributes = node.attributes;
+  const placeholder = label ? resolvePlaceholder(label, intl) : "";
+  const inputProps = useInputProps(attributes, placeholder);
+  const isPinCodeInput = attributes.name === "code" && node.group === "code" || attributes.name === "totp_code" && node.group === "totp";
+  const InputComponent = isPinCodeInput ? Node5.CodeInput : Node5.Input;
+  return /* @__PURE__ */ jsx14(
+    Node5.Label,
+    {
+      attributes,
+      node,
+      fieldError: formState.errors[attributes.name],
+      children: /* @__PURE__ */ jsx14(
+        InputComponent,
+        {
+          attributes,
+          node,
+          onClick: inputProps.onClick,
+          inputProps
+        }
+      )
+    }
+  );
+}
+
+// src/components/form/nodes/renderer/sso-button-renderer.tsx
+import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useFormContext as useFormContext5 } from "react-hook-form";
+import { useDebounceValue as useDebounceValue2 } from "usehooks-ts";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function extractProvider(context) {
+  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
+    return context.provider;
+  }
+  return void 0;
+}
+function SSOButtonRenderer({ node }) {
+  var _a, _b;
+  const { Node: Node5 } = useComponents();
+  const attributes = node.attributes;
+  const {
+    setValue,
+    formState: { isSubmitting, isReady }
+  } = useFormContext5();
+  const [clicked, setClicked] = useDebounceValue2(false, 100);
+  useEffect2(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting, setClicked]);
+  const clickHandler = useCallback2(() => {
+    setValue("provider", attributes.value);
+    setValue("method", node.group);
+    setClicked(true);
+  }, [setValue, attributes.value, node.group, setClicked]);
+  const buttonProps = {
+    type: "submit",
+    name: attributes.name,
+    value: attributes.value,
+    onClick: clickHandler,
+    disabled: attributes.disabled || !isReady || isSubmitting
+  };
+  const provider = (_b = extractProvider((_a = node.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
+  return /* @__PURE__ */ jsx15(
+    Node5.SsoButton,
+    {
+      node,
+      attributes,
+      buttonProps,
+      provider,
+      isSubmitting: clicked
+    }
+  );
+}
+
+// src/components/form/nodes/renderer/text-renderer.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function TextRenderer({ node }) {
+  const { Node: Node5 } = useComponents();
+  return /* @__PURE__ */ jsx16(Node5.Text, { node, attributes: node.attributes });
+}
+
+// src/components/form/nodes/renderer/index.ts
+var NodeRenderer = {
+  Button: ButtonRenderer,
+  SsoButton: SSOButtonRenderer,
+  ConsentCheckbox: ConsentCheckboxRenderer,
+  Input: InputRenderer,
+  Checkbox: CheckboxRenderer,
+  Image: ImageRenderer,
+  Text: TextRenderer
+};
+
+// src/components/form/nodes/node-button.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function NodeButton({ node }) {
+  var _a;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
+  if (isResendNode || isScreenSelectionNode) {
+    return null;
+  }
+  if (node.group === "oauth2_consent") {
+    return null;
+  }
+  const isSocial = (node.attributes.name === "provider" || node.attributes.name === "link") && (node.group === UiNodeGroupEnum7.Oidc || node.group === UiNodeGroupEnum7.Saml);
+  if (isSocial) {
+    return /* @__PURE__ */ jsx17(NodeRenderer.SsoButton, { node });
+  }
+  return /* @__PURE__ */ jsx17(NodeRenderer.Button, { node });
+}
+
+// src/components/form/nodes/renderer/hidden-input-renderer.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function HiddenInputRenderer({ node }) {
+  const { Node: Node5 } = useComponents();
+  const attributes = node.attributes;
+  const inputProps = useInputProps(attributes);
+  return /* @__PURE__ */ jsx18(
+    Node5.Input,
+    {
+      inputProps,
+      attributes,
+      node,
+      onClick: () => {
+      }
+    }
+  );
+}
+
+// src/components/form/nodes/input.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var NodeInput = ({
+  node,
+  attributes
+}) => {
+  var _a;
+  const { setValue } = useFormContext6();
+  const {
+    onloadTrigger,
+    // 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 || node.group === UiNodeGroupEnum8.Oauth2Consent)) {
+      setValue(attrs.name, attrs.value);
+    }
+  };
+  const hasRun = useRef2(false);
+  useEffect3(
+    () => {
+      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
+    []
+  );
+  switch (attributes.type) {
+    case UiNodeInputAttributesTypeEnum.Submit:
+    case UiNodeInputAttributesTypeEnum.Button: {
+      return /* @__PURE__ */ jsx19(NodeButton, { node });
+    }
+    case UiNodeInputAttributesTypeEnum.DatetimeLocal:
+      throw new Error("Not implemented");
+    case UiNodeInputAttributesTypeEnum.Checkbox:
+      if (node.group === "oauth2_consent" && node.attributes.node_type === "input") {
+        switch (node.attributes.name) {
+          case "grant_scope":
+            return /* @__PURE__ */ jsx19(ConsentCheckboxRenderer, { node });
+          default:
+            return null;
+        }
+      }
+      return /* @__PURE__ */ jsx19(CheckboxRenderer, { node });
+    case UiNodeInputAttributesTypeEnum.Hidden:
+      return /* @__PURE__ */ jsx19(HiddenInputRenderer, { node });
+    default:
+      return /* @__PURE__ */ jsx19(InputRenderer, { node });
+  }
+};
+
+// src/components/form/nodes/node.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ignoredScriptGroups = ["captcha"];
+var NodeBase = ({ node }) => {
+  const { Node: Node5 } = useComponents();
+  if (node.group === UiNodeGroupEnum9.Captcha) {
+    return /* @__PURE__ */ jsx20(Node5.Captcha, { node });
+  }
+  if (isUiNodeImage(node)) {
+    return /* @__PURE__ */ jsx20(NodeRenderer.Image, { node });
+  } else if (isUiNodeText(node)) {
+    return /* @__PURE__ */ jsx20(NodeRenderer.Text, { node });
+  } else if (isUiNodeInput(node)) {
+    return /* @__PURE__ */ jsx20(NodeInput, { node, attributes: node.attributes });
+  } else if (isUiNodeAnchor(node)) {
+    return /* @__PURE__ */ jsx20(Node5.Anchor, { attributes: node.attributes, node });
+  } else if (isUiNodeScript(node) && !ignoredScriptGroups.includes(node.group)) {
+    const {
+      crossorigin,
+      referrerpolicy,
+      node_type: _nodeType,
+      ...attributes
+    } = node.attributes;
+    return /* @__PURE__ */ jsx20(
+      "script",
+      {
+        crossOrigin: crossorigin,
+        referrerPolicy: referrerpolicy,
+        ...attributes
+      }
+    );
+  }
+  return null;
+};
+var Node = Object.assign(NodeBase, NodeRenderer);
+
+// src/components/form/social.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+
+// src/components/form/settings-section.tsx
+import { useFormContext as useFormContext7 } from "react-hook-form";
+import { jsx as jsx22 } from "react/jsx-runtime";
+
+// src/components/form/useResendCode.ts
+import { useCallback as useCallback3 } from "react";
+
+// src/components/generic/divider.tsx
+import { UiNodeGroupEnum as UiNodeGroupEnum11 } from "@ory/client-fetch";
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// src/components/generic/page-header.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+// src/components/settings/settings-card.tsx
+import {
+  getNodeId as getNodeId2,
+  isUiNodeScriptAttributes as isUiNodeScriptAttributes3,
+  UiNodeGroupEnum as UiNodeGroupEnum12
+} from "@ory/client-fetch";
+import { useEffect as useEffect4 } from "react";
+import { useIntl as useIntl8 } from "react-intl";
+import { Toaster } from "sonner";
+
+// src/util/showToast.tsx
+import { toast as sonnerToast } from "sonner";
+import { jsx as jsx25 } from "react/jsx-runtime";
+
+// src/components/settings/oidc-settings.tsx
+import { useFormContext as useFormContext8 } from "react-hook-form";
+import { useIntl as useIntl3 } from "react-intl";
+import { Fragment, jsx as jsx26, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// src/components/settings/passkey-settings.tsx
+import { useFormContext as useFormContext9 } from "react-hook-form";
+import { useIntl as useIntl4 } from "react-intl";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/components/settings/recovery-codes-settings.tsx
+import { useFormContext as useFormContext10 } from "react-hook-form";
+import { useIntl as useIntl5 } from "react-intl";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/components/settings/totp-settings.tsx
+import { useFormContext as useFormContext11 } from "react-hook-form";
+import { useIntl as useIntl6 } from "react-intl";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/components/settings/webauthn-settings.tsx
+import { useFormContext as useFormContext12 } from "react-hook-form";
+import { useIntl as useIntl7 } from "react-intl";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/components/settings/settings-card.tsx
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs9 } from "react/jsx-runtime";
 
 // src/locales/af.json
 var af_default = {
@@ -25289,7 +25767,7 @@ var OryLocales = Object.freeze({
 });
 
 // src/context/intl-context.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function mergeTranslations(locale, customTranslations) {
   return Object.keys(customTranslations).reduce((acc, key) => {
     var _a;
@@ -25312,100 +25790,80 @@ var IntlProvider = ({
   }
   const cache = createIntlCache();
   const intl = createIntl({ locale, messages }, cache);
-  return /* @__PURE__ */ jsx23(RawIntlProvider, { value: intl, children });
+  return /* @__PURE__ */ jsx32(RawIntlProvider, { value: intl, children });
 };
 
 // src/context/provider.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 
 // src/components/card/header.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 
 // src/components/card/card.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 
 // src/components/card/footer.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 
 // src/components/card/content.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 
 // src/components/card/card-two-step.tsx
 import { FlowType as FlowType10 } from "@ory/client-fetch";
 
 // src/components/card/two-step/state-method-active.tsx
 import {
-  isUiNodeScriptAttributes as isUiNodeScriptAttributes5,
-  UiNodeGroupEnum as UiNodeGroupEnum12
+  isUiNodeScriptAttributes as isUiNodeScriptAttributes4,
+  UiNodeGroupEnum as UiNodeGroupEnum13
 } from "@ory/client-fetch";
-import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 
 // src/components/card/two-step/state-provide-identifier.tsx
-import { UiNodeGroupEnum as UiNodeGroupEnum13 } from "@ory/client-fetch";
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+import { UiNodeGroupEnum as UiNodeGroupEnum14 } from "@ory/client-fetch";
+import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
 
 // src/components/card/card-two-step.tsx
 import { OrySettingsCard, useOryFlow as useOryFlow2 } from "@ory/elements-react";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
 
 // src/components/card/card-consent.tsx
 import { getNodeId as getNodeId3 } from "@ory/client-fetch";
-import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // src/components/card/two-step/state-select-method.tsx
-import { useIntl as useIntl8 } from "react-intl";
+import { useIntl as useIntl9 } from "react-intl";
 
 // src/components/card/two-step/list-methods.tsx
 import { useComponents as useComponents2 } from "@ory/elements-react";
-import { useFormContext as useFormContext11 } from "react-hook-form";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { useFormContext as useFormContext13 } from "react-hook-form";
+import { jsx as jsx42 } from "react/jsx-runtime";
 
 // src/components/card/two-step/state-select-method.tsx
-import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs14 } from "react/jsx-runtime";
 function toAuthMethodPickerOptions(visibleGroups) {
   return Object.fromEntries(
-    Object.values(UiNodeGroupEnum14).filter((group) => {
+    Object.values(UiNodeGroupEnum15).filter((group) => {
       var _a;
       return (_a = visibleGroups[group]) == null ? void 0 : _a.length;
     }).filter(
       (group) => ![
-        UiNodeGroupEnum14.Oidc,
-        UiNodeGroupEnum14.Saml,
-        UiNodeGroupEnum14.Default,
-        UiNodeGroupEnum14.IdentifierFirst,
-        UiNodeGroupEnum14.Profile,
-        UiNodeGroupEnum14.Captcha
+        UiNodeGroupEnum15.Oidc,
+        UiNodeGroupEnum15.Saml,
+        UiNodeGroupEnum15.Default,
+        UiNodeGroupEnum15.IdentifierFirst,
+        UiNodeGroupEnum15.Profile,
+        UiNodeGroupEnum15.Captcha
       ].includes(group)
     ).map((g) => [g, {}])
   );
 }
 
-// src/util/nodes.ts
-function findScreenSelectionButton(nodes) {
-  return nodes.find(
-    (node) => node.attributes.node_type === "input" && node.attributes.type === "submit" && node.attributes.name === "screen"
-  );
-}
-function isDynamicText(text) {
-  return text.id === 1070002 && !!text.context && "name" in text.context && typeof text.context["name"] === "string";
-}
-function resolveLabel(text, intl) {
-  if (isDynamicText(text)) {
-    const field = text.context.name;
-    return intl.formatMessage({
-      id: `forms.label.${field}`,
-      defaultMessage: text.text
-    });
-  }
-  return uiTextToFormattedMessage(text, intl);
-}
-
 // src/theme/default/utils/logout.ts
-import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState3 } from "react";
 function useClientLogout(config) {
   const [logoutFlow, setLogoutFlow] = useState3();
   const [isLoading, setIsLoading] = useState3(true);
-  const fetchLogoutFlow = useCallback(async () => {
+  const fetchLogoutFlow = useCallback4(async () => {
     try {
       const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow().catch((err) => {
         var _a;
@@ -25419,7 +25877,7 @@ function useClientLogout(config) {
       setIsLoading(false);
     }
   }, [config.sdk.url]);
-  useEffect3(() => {
+  useEffect5(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
   return { logoutFlow, didLoad: !isLoading };
@@ -25467,20 +25925,20 @@ function appendReturnToAndIdentitySchema(url, returnTo, identitySchema) {
 }
 
 // src/theme/default/components/card/footer.tsx
-import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
 function DefaultCardFooter() {
   const oryFlow = useOryFlow3();
   switch (oryFlow.flowType) {
     case FlowType11.Login:
-      return /* @__PURE__ */ jsx35(LoginCardFooter, { flow: oryFlow.flow });
+      return /* @__PURE__ */ jsx44(LoginCardFooter, { flow: oryFlow.flow });
     case FlowType11.Registration:
-      return /* @__PURE__ */ jsx35(RegistrationCardFooter, {});
+      return /* @__PURE__ */ jsx44(RegistrationCardFooter, {});
     case FlowType11.Recovery:
-      return /* @__PURE__ */ jsx35(RecoveryCardFooter, {});
+      return /* @__PURE__ */ jsx44(RecoveryCardFooter, {});
     case FlowType11.Verification:
-      return /* @__PURE__ */ jsx35(VerificationCardFooter, {});
+      return /* @__PURE__ */ jsx44(VerificationCardFooter, {});
     case FlowType11.OAuth2Consent:
-      return /* @__PURE__ */ jsx35(ConsentCardFooter, { flow: oryFlow.flow });
+      return /* @__PURE__ */ jsx44(ConsentCardFooter, { flow: oryFlow.flow });
     default:
       return null;
   }
@@ -25505,7 +25963,7 @@ function shouldShowLogoutButton(flow, formState, authMethods) {
 function LoginCardFooter({ flow }) {
   const { dispatchFormState, formState } = useOryFlow3();
   const config = useOryConfiguration2();
-  const intl = useIntl9();
+  const intl = useIntl10();
   const authMethods = nodesToAuthMethodGroups(flow.ui.nodes);
   let returnTo = config.project.default_redirect_url;
   if (flow.return_to) {
@@ -25518,7 +25976,7 @@ function LoginCardFooter({ flow }) {
     );
   }
   if (shouldShowLogoutButton(flow, formState, authMethods)) {
-    return /* @__PURE__ */ jsx35(LogoutButton, { returnTo });
+    return /* @__PURE__ */ jsx44(LogoutButton, { returnTo });
   }
   return /* @__PURE__ */ jsxs15(Fragment8, { children: [
     formState.current === "provide_identifier" && config.project.registration_enabled && /* @__PURE__ */ jsxs15("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: [
@@ -25527,7 +25985,7 @@ function LoginCardFooter({ flow }) {
         defaultMessage: "No account?"
       }),
       " ",
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx44(
         "a",
         {
           className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
@@ -25540,7 +25998,7 @@ function LoginCardFooter({ flow }) {
         }
       )
     ] }),
-    authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ jsx35("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx35(
+    authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ jsx44("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx44(
       "button",
       {
         className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
@@ -25555,7 +26013,7 @@ function LoginCardFooter({ flow }) {
         })
       }
     ) }),
-    authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ jsx35("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx35(
+    authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ jsx44("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx44(
       "a",
       {
         className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
@@ -25570,14 +26028,14 @@ function LoginCardFooter({ flow }) {
 }
 function LogoutButton({ returnTo }) {
   const config = useOryConfiguration2();
-  const intl = useIntl9();
+  const intl = useIntl10();
   const { logoutFlow: logout, didLoad: didLoadLogout } = useClientLogout(config);
   return /* @__PURE__ */ jsxs15("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: [
     intl.formatMessage({
       id: "login.2fa.go-back"
     }),
     " ",
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx44(
       "a",
       {
         className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
@@ -25594,7 +26052,7 @@ function LogoutButton({ returnTo }) {
   ] });
 }
 function RegistrationCardFooter() {
-  const intl = useIntl9();
+  const intl = useIntl10();
   const { flow, formState, dispatchFormState } = useOryFlow3();
   const config = useOryConfiguration2();
   const visibleGroups = useNodeGroupsWithVisibleNodes(flow.ui.nodes);
@@ -25605,7 +26063,7 @@ function RegistrationCardFooter() {
       if (!screenSelectionNode || Object.entries(authMethodBlocks).length < 2) {
         return null;
       }
-      return /* @__PURE__ */ jsx35("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx44("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx44(
         "button",
         {
           className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
@@ -25630,7 +26088,7 @@ function RegistrationCardFooter() {
           defaultMessage: "Already have an account?"
         }),
         " ",
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx44(
           "a",
           {
             className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
@@ -25653,7 +26111,6 @@ function VerificationCardFooter() {
 }
 function ConsentCardFooter({ flow }) {
   var _a, _b;
-  const { Node: Node2 } = useComponents3();
   const rememberNode = findNode(flow.ui.nodes, {
     group: "oauth2_consent",
     node_type: "input",
@@ -25665,29 +26122,15 @@ function ConsentCardFooter({ flow }) {
         "Make sure you trust ",
         (_a = flow.consent_request.client) == null ? void 0 : _a.client_name
       ] }),
-      /* @__PURE__ */ jsx35("p", { className: "leading-normal text-interface-foreground-default-secondary", children: "You may be sharing sensitive information with this site or application." })
+      /* @__PURE__ */ jsx44("p", { className: "leading-normal text-interface-foreground-default-secondary", children: "You may be sharing sensitive information with this site or application." })
     ] }),
-    rememberNode && /* @__PURE__ */ jsx35(
-      Node2.Checkbox,
-      {
-        attributes: rememberNode.attributes,
-        node: rememberNode
-      }
-    ),
-    /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: flow.ui.nodes.filter(
-      (n) => n.attributes.node_type === "input" && n.attributes.type === "submit"
+    rememberNode && /* @__PURE__ */ jsx44(Node2.Checkbox, { node: rememberNode }),
+    /* @__PURE__ */ jsx44("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: flow.ui.nodes.filter(
+      (n) => n.attributes.node_type === "input" && n.attributes.type === "submit" && isUiNodeInput(n)
     ).map((n) => {
-      const attributes = n.attributes;
-      return /* @__PURE__ */ jsx35(
-        Node2.Button,
-        {
-          node: n,
-          attributes
-        },
-        attributes.value
-      );
+      return /* @__PURE__ */ jsx44(Node2.Button, { node: n }, n.attributes.value);
     }) }),
-    /* @__PURE__ */ jsx35("p", { className: "text-sm", children: /* @__PURE__ */ jsxs15("span", { className: "text-interface-foreground-default-tertiary", children: [
+    /* @__PURE__ */ jsx44("p", { className: "text-sm", children: /* @__PURE__ */ jsxs15("span", { className: "text-interface-foreground-default-tertiary", children: [
       "Authorizing will redirect to",
       " ",
       (_b = flow.consent_request.client) == null ? void 0 : _b.client_name
@@ -25696,14 +26139,14 @@ function ConsentCardFooter({ flow }) {
 }
 
 // src/theme/default/components/card/header.tsx
-import { messageTestId, useComponents as useComponents4, useOryFlow as useOryFlow5 } from "@ory/elements-react";
+import { messageTestId, useComponents as useComponents3, useOryFlow as useOryFlow5 } from "@ory/elements-react";
 
 // src/theme/default/utils/constructCardHeader.ts
 import {
   FlowType as FlowType12,
-  isUiNodeInputAttributes as isUiNodeInputAttributes7
+  isUiNodeInputAttributes as isUiNodeInputAttributes6
 } from "@ory/client-fetch";
-import { useIntl as useIntl10 } from "react-intl";
+import { useIntl as useIntl11 } from "react-intl";
 function joinWithCommaOr(list, orText = "or") {
   if (list.length === 0) {
     return ".";
@@ -25717,7 +26160,7 @@ function joinWithCommaOr(list, orText = "or") {
 function useCardHeaderText(container, opts) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const nodes = container.nodes;
-  const intl = useIntl10();
+  const intl = useIntl11();
   switch (opts.flowType) {
     case FlowType12.Recovery: {
       const recoveryV2Message = (_a = container.messages) == null ? void 0 : _a.find(
@@ -25850,7 +26293,7 @@ function useCardHeaderText(container, opts) {
   }
   if (nodes.find((node) => node.group === "identifier_first")) {
     const identifier = nodes.find(
-      (node) => isUiNodeInputAttributes7(node.attributes) && node.attributes.name.startsWith("identifier") && node.attributes.type !== "hidden"
+      (node) => isUiNodeInputAttributes6(node.attributes) && node.attributes.name.startsWith("identifier") && node.attributes.type !== "hidden"
     );
     if (identifier) {
       parts.push(
@@ -25867,7 +26310,7 @@ function useCardHeaderText(container, opts) {
   }
   if (nodes.some((node) => node.group === "profile")) {
     const identifier = nodes.find(
-      (node) => isUiNodeInputAttributes7(node.attributes) && node.attributes.name.startsWith("traits.") && node.attributes.type !== "hidden"
+      (node) => isUiNodeInputAttributes6(node.attributes) && node.attributes.name.startsWith("traits.") && node.attributes.type !== "hidden"
     );
     if (identifier) {
       parts.push(
@@ -25986,11 +26429,11 @@ function useCardHeaderText(container, opts) {
 // src/theme/default/components/card/current-identifier-button.tsx
 import {
   FlowType as FlowType13,
-  isUiNodeInputAttributes as isUiNodeInputAttributes8
+  isUiNodeInputAttributes as isUiNodeInputAttributes7
 } from "@ory/client-fetch";
 import { useOryConfiguration as useOryConfiguration3, useOryFlow as useOryFlow4 } from "@ory/elements-react";
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { useFormContext as useFormContext12 } from "react-hook-form";
+import { useEffect as useEffect6, useState as useState4 } from "react";
+import { useFormContext as useFormContext14 } from "react-hook-form";
 
 // src/theme/default/utils/attributes.ts
 function omit(obj, keys) {
@@ -26019,24 +26462,24 @@ function omitInputAttributes({
 
 // src/theme/default/assets/icons/arrow-left.svg
 import * as React3 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var SvgArrowLeft = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx36("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx36("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.325h14m-14 0 6 6m-6-6 6-6" }) });
+  return /* @__PURE__ */ jsx45("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx45("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.325h14m-14 0 6 6m-6-6 6-6" }) });
 };
 var arrow_left_default = SvgArrowLeft;
 
 // src/theme/default/components/card/current-identifier-button.tsx
-import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
 function DefaultCurrentIdentifierButton() {
   var _a;
   const { flow, flowType, formState } = useOryFlow4();
-  const { setValue, getValues, watch } = useFormContext12();
+  const { setValue, getValues, watch } = useFormContext14();
   const [turnstileResponse, setTurnstileResponse] = useState4();
   const config = useOryConfiguration3();
   const ui = flow.ui;
   const captchaVerificationValue = (_a = watch("transient_payload")) == null ? void 0 : _a.captcha_turnstile_response;
-  useEffect4(() => {
+  useEffect6(() => {
     if (captchaVerificationValue) {
       setTurnstileResponse(captchaVerificationValue);
     }
@@ -26059,7 +26502,7 @@ function DefaultCurrentIdentifierButton() {
   if (screenSelectionNode) {
     return /* @__PURE__ */ jsxs16("form", { action: flow.ui.action, method: flow.ui.method, children: [
       flow.ui.nodes.filter((n) => {
-        if (isUiNodeInputAttributes8(n.attributes)) {
+        if (isUiNodeInputAttributes7(n.attributes)) {
           return n.attributes.type === "hidden" && ["default", "captcha"].includes(n.group);
         }
         return false;
@@ -26069,7 +26512,7 @@ function DefaultCurrentIdentifierButton() {
         if (attrs.name === "transient_payload.captcha_turnstile_response" && turnstileResponse) {
           value = turnstileResponse;
         }
-        return /* @__PURE__ */ jsx37(
+        return /* @__PURE__ */ jsx46(
           "input",
           {
             type: "hidden",
@@ -26079,7 +26522,7 @@ function DefaultCurrentIdentifierButton() {
           attrs.name
         );
       }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx46(
         "button",
         {
           className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border border-button-identifier-border-border-default bg-button-identifier-background-default px-[11px] py-[5px] transition-colors hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
@@ -26097,7 +26540,7 @@ function DefaultCurrentIdentifierButton() {
           title: nodeBackButton.value ? `Adjust ${nodeBackButton.value}` : `Back`,
           "data-testid": `ory/screen/${flowType}/action/restart`,
           children: /* @__PURE__ */ jsxs16("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx46(
               arrow_left_default,
               {
                 size: 16,
@@ -26105,13 +26548,13 @@ function DefaultCurrentIdentifierButton() {
                 className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
               }
             ),
-            /* @__PURE__ */ jsx37("span", { className: "overflow-hidden text-sm font-medium text-nowrap text-ellipsis text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton.value ? nodeBackButton.value : "Back" })
+            /* @__PURE__ */ jsx46("span", { className: "overflow-hidden text-sm font-medium text-nowrap text-ellipsis text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton.value ? nodeBackButton.value : "Back" })
           ] })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx46(
     "a",
     {
       className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border border-button-identifier-border-border-default bg-button-identifier-background-default px-[11px] py-[5px] transition-colors hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
@@ -26120,7 +26563,7 @@ function DefaultCurrentIdentifierButton() {
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.value}`,
       "data-testid": `ory/screen/${flowType}/action/restart`,
       children: /* @__PURE__ */ jsxs16("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx46(
           arrow_left_default,
           {
             size: 16,
@@ -26128,7 +26571,7 @@ function DefaultCurrentIdentifierButton() {
             className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
           }
         ),
-        /* @__PURE__ */ jsx37("span", { className: "overflow-hidden text-sm font-medium text-nowrap text-ellipsis text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.value })
+        /* @__PURE__ */ jsx46("span", { className: "overflow-hidden text-sm font-medium text-nowrap text-ellipsis text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.value })
       ] })
     }
   );
@@ -26139,7 +26582,7 @@ function getBackButtonNodeAttributes(flowType, nodes) {
   switch (flowType) {
     case FlowType13.Login:
       nodeBackButtonAttributes = (_a = nodes.find(
-        (node) => isUiNodeInputAttributes8(node.attributes) && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
+        (node) => isUiNodeInputAttributes7(node.attributes) && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
       )) == null ? void 0 : _a.attributes;
       break;
     case FlowType13.Registration:
@@ -26147,14 +26590,14 @@ function getBackButtonNodeAttributes(flowType, nodes) {
       break;
     case FlowType13.Recovery:
       nodeBackButtonAttributes = (_b = nodes.find(
-        (n) => isUiNodeInputAttributes8(n.attributes) && !!n.attributes.value && ["email", "recovery_confirm_address", "recovery_address"].includes(
+        (n) => isUiNodeInputAttributes7(n.attributes) && !!n.attributes.value && ["email", "recovery_confirm_address", "recovery_address"].includes(
           n.attributes.name
         )
       )) == null ? void 0 : _b.attributes;
       break;
     case FlowType13.Verification:
       nodeBackButtonAttributes = (_c = nodes.find(
-        (n) => isUiNodeInputAttributes8(n.attributes) && n.attributes.name === "email"
+        (n) => isUiNodeInputAttributes7(n.attributes) && n.attributes.name === "email"
       )) == null ? void 0 : _c.attributes;
       break;
   }
@@ -26171,23 +26614,23 @@ var backButtonCandiates = [
 function guessRegistrationBackButton(uiNodes) {
   var _a;
   return (_a = uiNodes.find(
-    (node) => isUiNodeInputAttributes8(node.attributes) && backButtonCandiates.includes(node.attributes.name) && node.group === "default"
+    (node) => isUiNodeInputAttributes7(node.attributes) && backButtonCandiates.includes(node.attributes.name) && node.group === "default"
   )) == null ? void 0 : _a.attributes;
 }
 
 // src/theme/default/components/card/header.tsx
-import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs17 } from "react/jsx-runtime";
 function InnerCardHeader({
   title,
   text,
   messageId
 }) {
-  const { Card } = useComponents4();
+  const { Card } = useComponents3();
   return /* @__PURE__ */ jsxs17("header", { className: "flex flex-col gap-8 antialiased", children: [
-    /* @__PURE__ */ jsx38(Card.Logo, {}),
+    /* @__PURE__ */ jsx47(Card.Logo, {}),
     /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx38("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: title }),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx47("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx47(
         "p",
         {
           className: "leading-normal text-interface-foreground-default-secondary",
@@ -26195,7 +26638,7 @@ function InnerCardHeader({
           children: text
         }
       ),
-      /* @__PURE__ */ jsx38(DefaultCurrentIdentifierButton, {})
+      /* @__PURE__ */ jsx47(DefaultCurrentIdentifierButton, {})
     ] })
   ] });
 }
@@ -26205,16 +26648,16 @@ function DefaultCardHeader() {
     context.flow.ui,
     context
   );
-  return /* @__PURE__ */ jsx38(InnerCardHeader, { title, text: description, messageId });
+  return /* @__PURE__ */ jsx47(InnerCardHeader, { title, text: description, messageId });
 }
 
 // src/theme/default/components/card/logo.tsx
 import { useOryConfiguration as useOryConfiguration4 } from "@ory/elements-react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function DefaultCardLogo() {
   const config = useOryConfiguration4();
   if (config.project.logo_light_url) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx48(
       "img",
       {
         src: config.project.logo_light_url,
@@ -26223,7 +26666,7 @@ function DefaultCardLogo() {
       }
     );
   }
-  return /* @__PURE__ */ jsx39("h1", { className: "text-xl leading-normal font-semibold text-interface-foreground-default-primary", children: config.project.name });
+  return /* @__PURE__ */ jsx48("h1", { className: "text-xl leading-normal font-semibold text-interface-foreground-default-primary", children: config.project.name });
 }
 
 // src/theme/default/utils/cn.ts
@@ -26234,85 +26677,83 @@ function cn(...inputs) {
 }
 
 // src/theme/default/components/card/index.tsx
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 function DefaultCard({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx40("div", { className: cn("ory-elements", className), ...rest, children: /* @__PURE__ */ jsx40("div", { className: "flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center", children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx49("div", { className: cn("ory-elements", className), ...rest, children: /* @__PURE__ */ jsx49("div", { className: "flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center", children: /* @__PURE__ */ jsxs18(
     "div",
     {
       className: "relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14",
       "data-testid": "ory/card",
       children: [
         children,
-        /* @__PURE__ */ jsx40(Badge, {})
+        /* @__PURE__ */ jsx49(Badge, {})
       ]
     }
   ) }) });
 }
 
 // src/theme/default/components/form/index.tsx
-import { useIntl as useIntl12 } from "react-intl";
+import { useIntl as useIntl13 } from "react-intl";
 import {
   messageTestId as messageTestId2,
   uiTextToFormattedMessage as uiTextToFormattedMessage3,
   useOryFlow as useOryFlow7
 } from "@ory/elements-react";
-import { FlowType as FlowType14 } from "@ory/client-fetch";
+import { FlowType as FlowType15 } from "@ory/client-fetch";
 
 // src/theme/default/components/form/sso.tsx
+import { FlowType as FlowType14, UiNodeGroupEnum as UiNodeGroupEnum16 } from "@ory/client-fetch";
 import {
   uiTextToFormattedMessage as uiTextToFormattedMessage2,
   useOryFlow as useOryFlow6
 } from "@ory/elements-react";
-import { useEffect as useEffect5 } from "react";
-import { useFormContext as useFormContext13 } from "react-hook-form";
-import { useIntl as useIntl11 } from "react-intl";
-import { useDebounceValue } from "usehooks-ts";
+import { useIntl as useIntl12 } from "react-intl";
 
 // src/theme/default/provider-logos/apple.svg
 import * as React4 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var SvgApple = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx41("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__ */ jsx41("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
+  return /* @__PURE__ */ jsx50("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__ */ jsx50("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
 };
 var apple_default = SvgApple;
 
 // src/theme/default/provider-logos/auth0.svg
 import * as React5 from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SvgAuth0 = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx42("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx42("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
+  return /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx51("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
 };
 var auth0_default = SvgAuth0;
 
 // src/theme/default/provider-logos/discord.svg
 import * as React6 from "react";
-import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs19 } from "react/jsx-runtime";
 var SvgDiscord = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs19("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__ */ jsx43("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
-    /* @__PURE__ */ jsx43("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
+    /* @__PURE__ */ jsx52("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
+    /* @__PURE__ */ jsx52("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
   ] });
 };
 var discord_default = SvgDiscord;
 
 // src/theme/default/provider-logos/facebook.svg
 import * as React7 from "react";
-import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs20 } from "react/jsx-runtime";
 var SvgFacebook = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs20("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__ */ jsx44("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
-    /* @__PURE__ */ jsx44("path", { fill: "#fff", d: "m21.214 20.282.622-3.952h-3.89v-2.563c0-1.081.542-2.136 2.284-2.136H22V8.267S20.395 8 18.86 8c-3.205 0-5.298 1.893-5.298 5.318v3.012H10v3.952h3.562v9.552q1.073.165 2.191.166 1.12 0 2.192-.166v-9.552z" }),
-    /* @__PURE__ */ jsx44("defs", { children: /* @__PURE__ */ jsxs20("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx44("stop", { stopColor: "#18ACFE" }),
-      /* @__PURE__ */ jsx44("stop", { offset: 1, stopColor: "#0163E0" })
+    /* @__PURE__ */ jsx53("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
+    /* @__PURE__ */ jsx53("path", { fill: "#fff", d: "m21.214 20.282.622-3.952h-3.89v-2.563c0-1.081.542-2.136 2.284-2.136H22V8.267S20.395 8 18.86 8c-3.205 0-5.298 1.893-5.298 5.318v3.012H10v3.952h3.562v9.552q1.073.165 2.191.166 1.12 0 2.192-.166v-9.552z" }),
+    /* @__PURE__ */ jsx53("defs", { children: /* @__PURE__ */ jsxs20("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx53("stop", { stopColor: "#18ACFE" }),
+      /* @__PURE__ */ jsx53("stop", { offset: 1, stopColor: "#0163E0" })
     ] }) })
   ] });
 };
@@ -26320,111 +26761,111 @@ var facebook_default = SvgFacebook;
 
 // src/theme/default/provider-logos/github.svg
 import * as React8 from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var SvgGithub = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx45("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx45("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
+  return /* @__PURE__ */ jsx54("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx54("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
 };
 var github_default = SvgGithub;
 
 // src/theme/default/provider-logos/gitlab.svg
 import * as React9 from "react";
-import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var SvgGitlab = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs21("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__ */ jsx46("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
-    /* @__PURE__ */ jsx46("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
-    /* @__PURE__ */ jsx46("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
-    /* @__PURE__ */ jsx46("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
+    /* @__PURE__ */ jsx55("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
+    /* @__PURE__ */ jsx55("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
+    /* @__PURE__ */ jsx55("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
+    /* @__PURE__ */ jsx55("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
   ] });
 };
 var gitlab_default = SvgGitlab;
 
 // src/theme/default/provider-logos/google.svg
 import * as React10 from "react";
-import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
 var SvgGoogle = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs22("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__ */ jsx47("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
-    /* @__PURE__ */ jsx47("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
-    /* @__PURE__ */ jsx47("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
-    /* @__PURE__ */ jsx47("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
+    /* @__PURE__ */ jsx56("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
+    /* @__PURE__ */ jsx56("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
+    /* @__PURE__ */ jsx56("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
+    /* @__PURE__ */ jsx56("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
   ] });
 };
 var google_default = SvgGoogle;
 
 // src/theme/default/provider-logos/linkedin.svg
 import * as React11 from "react";
-import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var SvgLinkedin = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs23("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__ */ jsx48("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
-    /* @__PURE__ */ jsx48("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
+    /* @__PURE__ */ jsx57("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
+    /* @__PURE__ */ jsx57("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
   ] });
 };
 var linkedin_default = SvgLinkedin;
 
 // src/theme/default/provider-logos/microsoft.svg
 import * as React12 from "react";
-import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var SvgMicrosoft = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs24("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 23 23", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx49("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
-    /* @__PURE__ */ jsx49("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
-    /* @__PURE__ */ jsx49("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
-    /* @__PURE__ */ jsx49("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
+    /* @__PURE__ */ jsx58("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
+    /* @__PURE__ */ jsx58("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
+    /* @__PURE__ */ jsx58("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
+    /* @__PURE__ */ jsx58("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
   ] });
 };
 var microsoft_default = SvgMicrosoft;
 
 // src/theme/default/provider-logos/slack.svg
 import * as React13 from "react";
-import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
 var SvgSlack = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs25("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__ */ jsx50("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
-    /* @__PURE__ */ jsx50("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
-    /* @__PURE__ */ jsx50("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
-    /* @__PURE__ */ jsx50("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
+    /* @__PURE__ */ jsx59("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
+    /* @__PURE__ */ jsx59("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
+    /* @__PURE__ */ jsx59("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
+    /* @__PURE__ */ jsx59("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
   ] });
 };
 var slack_default = SvgSlack;
 
 // src/theme/default/provider-logos/spotify.svg
 import * as React14 from "react";
-import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs26 } from "react/jsx-runtime";
 var SvgSpotify = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs26("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__ */ jsx51("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
-    /* @__PURE__ */ jsx51("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
+    /* @__PURE__ */ jsx60("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
+    /* @__PURE__ */ jsx60("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
   ] });
 };
 var spotify_default = SvgSpotify;
 
 // src/theme/default/provider-logos/yandex.svg
 import * as React15 from "react";
-import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs27 } from "react/jsx-runtime";
 var SvgYandex = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs27("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__ */ jsx52("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
-    /* @__PURE__ */ jsx52("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
+    /* @__PURE__ */ jsx61("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
+    /* @__PURE__ */ jsx61("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
   ] });
 };
 var yandex_default = SvgYandex;
 
 // src/theme/default/provider-logos/x.svg
 import * as React16 from "react";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var SvgX = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx53("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__ */ jsx53("path", { fill: "#0F172A", d: "M24.122 3h4.292L18.99 13.73 30 28.285h-8.64l-6.764-8.845-7.744 8.845H2.56l9.983-11.476L2 3h8.854l6.112 8.08zM22.62 25.766h2.379L9.604 5.426H7.048z" }) });
+  return /* @__PURE__ */ 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", { fill: "#0F172A", d: "M24.122 3h4.292L18.99 13.73 30 28.285h-8.64l-6.764-8.845-7.744 8.845H2.56l9.983-11.476L2 3h8.854l6.112 8.08zM22.62 25.766h2.379L9.604 5.426H7.048z" }) });
 };
 var x_default = SvgX;
 
@@ -26447,7 +26888,7 @@ var logos = {
 var provider_logos_default = logos;
 
 // src/theme/default/components/form/spinner.tsx
-import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
 function Spinner({ className }) {
   return /* @__PURE__ */ jsxs28(
     "svg",
@@ -26462,7 +26903,7 @@ function Spinner({ className }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx54("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx63("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx63(
           "path",
           {
             d: "M23.364 10.6362C22.1053 9.37751 20.5016 8.52034 18.7558 8.17307C17.01 7.82581 15.2004 8.00404 13.5559 8.68523C11.9113 9.36641 10.5057 10.52 9.51678 12C8.52784 13.4801 8 15.2201 8 17.0001C8 18.7802 8.52784 20.5202 9.51678 22.0003C10.5057 23.4803 11.9113 24.6339 13.5559 25.3151C15.2004 25.9962 17.01 26.1745 18.7558 25.8272C20.5016 25.4799 22.1053 24.6228 23.364 23.3641",
@@ -26471,7 +26912,7 @@ function Spinner({ className }) {
             strokeLinejoin: "round"
           }
         ) }),
-        /* @__PURE__ */ jsx54("defs", { children: /* @__PURE__ */ jsx54("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx63("defs", { children: /* @__PURE__ */ jsx63("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx63(
           "rect",
           {
             width: "24",
@@ -26486,77 +26927,53 @@ function Spinner({ className }) {
 }
 
 // src/theme/default/components/form/sso.tsx
-import { UiNodeGroupEnum as UiNodeGroupEnum15 } from "@ory/client-fetch";
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
-function extractProvider(context) {
-  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
-    return context.provider;
-  }
-  return void 0;
-}
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
 function DefaultButtonSocial({
-  attributes,
   node,
-  onClick,
-  showLabel: _showLabel,
-  logos: providedLogos
+  logos: providedLogos,
+  isSubmitting,
+  buttonProps,
+  provider,
+  attributes
 }) {
-  var _a, _b, _c;
+  var _a;
   const logos2 = { ...provider_logos_default, ...providedLogos };
-  const { type: _ignoredType, name: _ignoredName, ...rest } = attributes;
+  const intl = useIntl12();
   const {
-    flow: { ui }
+    flow: { ui },
+    flowType
   } = useOryFlow6();
-  const [clicked, setClicked] = useDebounceValue(false, 100);
-  const intl = useIntl11();
-  const {
-    formState: { isSubmitting }
-  } = useFormContext13();
-  const ssoNodeCount = (_a = ui.nodes.filter(
-    (node2) => node2.group === UiNodeGroupEnum15.Oidc || node2.group === UiNodeGroupEnum15.Saml
-  ).length) != null ? _a : 0;
+  const ssoNodes = ui.nodes.filter(
+    (node2) => node2.group === UiNodeGroupEnum16.Oidc || node2.group === UiNodeGroupEnum16.Saml
+  );
+  const ssoNodeCount = (_a = ssoNodes.length) != null ? _a : 0;
   const Logo = logos2[attributes.value.split("-")[0]];
-  const showLabel = _showLabel != null ? _showLabel : ssoNodeCount % 3 !== 0 && ssoNodeCount % 4 !== 0;
-  const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
-  const localOnClick = () => {
-    onClick == null ? void 0 : onClick();
-    setClicked(true);
-  };
-  useEffect5(() => {
-    if (!isSubmitting) {
-      setClicked(false);
-    }
-  }, [isSubmitting, setClicked]);
+  const showLabel = flowType === FlowType14.Settings || ssoNodeCount % 3 !== 0 && ssoNodeCount % 4 !== 0;
   const label = node.meta.label ? uiTextToFormattedMessage2(node.meta.label, intl) : "";
   return /* @__PURE__ */ jsxs29(
     "button",
     {
-      className: "flex items-center justify-center gap-3 rounded-buttons border border-button-social-border-default bg-button-social-background-default px-4 py-[13px] transition-colors hover:border-button-social-border-hover hover:bg-button-social-background-hover hover:text-button-social-foreground-hover loading:border-button-social-border-disabled loading:bg-button-social-background-disabled loading:text-button-social-foreground-disabled",
-      value: attributes.value,
-      type: "submit",
-      name: "provider",
+      className: "flex cursor-pointer items-center justify-center gap-3 rounded-buttons border border-button-social-border-default bg-button-social-background-default px-4 py-[13px] transition-colors hover:border-button-social-border-hover hover:bg-button-social-background-hover hover:text-button-social-foreground-hover loading:border-button-social-border-disabled loading:bg-button-social-background-disabled loading:text-button-social-foreground-disabled",
       "data-testid": `ory/form/node/input/${attributes.name}`,
-      onClick: localOnClick,
-      "data-loading": clicked,
-      disabled: isSubmitting,
+      "data-loading": isSubmitting,
       "aria-label": label,
-      ...omitInputAttributes(rest),
+      ...buttonProps,
       children: [
-        /* @__PURE__ */ jsx55("span", { className: "relative size-5", children: !clicked ? Logo ? /* @__PURE__ */ jsx55(Logo, { size: 20 }) : /* @__PURE__ */ jsx55(GenericLogo, { label: provider.slice(0, 1) }) : /* @__PURE__ */ jsx55(Spinner, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx64("span", { className: "relative size-5", children: !isSubmitting ? Logo ? /* @__PURE__ */ jsx64(Logo, { size: 20 }) : /* @__PURE__ */ jsx64(GenericLogo, { label: provider.slice(0, 1) }) : /* @__PURE__ */ jsx64(Spinner, { className: "size-5" }) }),
         showLabel && node.meta.label ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
-          /* @__PURE__ */ jsx55("span", { className: "grow text-center leading-none font-medium text-button-social-foreground-default", children: label }),
-          /* @__PURE__ */ jsx55("span", { className: "block size-5" })
+          /* @__PURE__ */ jsx64("span", { className: "grow text-center leading-none font-medium text-button-social-foreground-default", children: label }),
+          /* @__PURE__ */ jsx64("span", { className: "block size-5" })
         ] }) : null
       ]
     }
   );
 }
-DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx55(DefaultButtonSocial, { ...props, logos: logos2 });
+DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx64(DefaultButtonSocial, { ...props, logos: logos2 });
 function DefaultSocialButtonContainer({
   children,
   nodes
 }) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx64(
     "div",
     {
       className: cn("grid gap-3", {
@@ -26570,18 +26987,18 @@ function DefaultSocialButtonContainer({
   );
 }
 function GenericLogo({ label }) {
-  return /* @__PURE__ */ jsx55("span", { className: "flex size-full items-center justify-center rounded-buttons border-button-social-border-generic-provider bg-button-social-background-generic-provider text-xs text-button-social-foreground-generic-provider", children: label });
+  return /* @__PURE__ */ jsx64("span", { className: "flex size-full items-center justify-center rounded-buttons border-button-social-border-generic-provider bg-button-social-background-generic-provider text-xs text-button-social-foreground-generic-provider", children: label });
 }
 
 // src/theme/default/components/form/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function DefaultFormContainer({
   children,
   onSubmit,
   action,
   method
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx65(
     "form",
     {
       onSubmit,
@@ -26598,19 +27015,19 @@ function DefaultMessageContainer({ children }) {
   if (!children || Array.isArray(children) && children.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx65(
     "section",
     {
       className: cn(
-        flowType === FlowType14.Settings ? "text-center" : "text-left"
+        flowType === FlowType15.Settings ? "text-center" : "text-left"
       ),
       children
     }
   );
 }
 function DefaultMessage({ message }) {
-  const intl = useIntl12();
-  return /* @__PURE__ */ jsx56(
+  const intl = useIntl13();
+  return /* @__PURE__ */ jsx65(
     "span",
     {
       className: cn(
@@ -26627,77 +27044,77 @@ function DefaultMessage({ message }) {
 
 // src/theme/default/components/card/auth-method-list-item.tsx
 import { useOryFlow as useOryFlow8 } from "@ory/elements-react";
-import { useEffect as useEffect6, useState as useState5 } from "react";
-import { useIntl as useIntl13 } from "react-intl";
+import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useIntl as useIntl14 } from "react-intl";
 import { useEventListener, useTimeout } from "usehooks-ts";
 
 // src/theme/default/assets/icons/alert-triangle.svg
 import * as React17 from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var SvgAlertTriangle = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx57("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__ */ jsx57("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.24 3.957l-8.422 14.06A1.99 1.99 0 0 0 3.518 21h16.845a1.99 1.99 0 0 0 1.7-2.983L13.64 3.957a1.988 1.988 0 0 0-3.4 0" }) });
+  return /* @__PURE__ */ jsx66("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__ */ jsx66("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.24 3.957l-8.422 14.06A1.99 1.99 0 0 0 3.518 21h16.845a1.99 1.99 0 0 0 1.7-2.983L13.64 3.957a1.988 1.988 0 0 0-3.4 0" }) });
 };
 var alert_triangle_default = SvgAlertTriangle;
 
 // src/theme/default/assets/icons/code-asterix.svg
 import * as React18 from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var SvgCodeAsterix = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx58("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 19.325a2 2 0 0 1-2-2v-4l-1-1 1-1v-4a2 2 0 0 1 2-2m6 6.875 3-1.687M12 12.2v3.375m0-3.375-3-1.687m3 1.687 3 1.688M12 12.2V8.825m0 3.375-3 1.688m9 5.437a2 2 0 0 0 2-2v-4l1-1-1-1v-4a2 2 0 0 0-2-2" }) });
+  return /* @__PURE__ */ jsx67("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx67("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 19.325a2 2 0 0 1-2-2v-4l-1-1 1-1v-4a2 2 0 0 1 2-2m6 6.875 3-1.687M12 12.2v3.375m0-3.375-3-1.687m3 1.687 3 1.688M12 12.2V8.825m0 3.375-3 1.688m9 5.437a2 2 0 0 0 2-2v-4l1-1-1-1v-4a2 2 0 0 0-2-2" }) });
 };
 var code_asterix_default = SvgCodeAsterix;
 
 // src/theme/default/assets/icons/code.svg
 import * as React19 from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var SvgCode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx59("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx59("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
+  return /* @__PURE__ */ jsx68("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx68("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
 };
 var code_default = SvgCode;
 
 // src/theme/default/assets/icons/passkey.svg
 import * as React20 from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var SvgPasskey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx60("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx60("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
+  return /* @__PURE__ */ jsx69("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx69("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
 };
 var passkey_default = SvgPasskey;
 
 // src/theme/default/assets/icons/password.svg
 import * as React21 from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var SvgPassword = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx61("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
+  return /* @__PURE__ */ jsx70("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx70("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
 };
 var password_default = SvgPassword;
 
 // src/theme/default/assets/icons/totp.svg
 import * as React22 from "react";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var SvgTotp = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx62("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
+  return /* @__PURE__ */ jsx71("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__ */ jsx71("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
 };
 var totp_default = SvgTotp;
 
 // src/theme/default/assets/icons/webauthn.svg
 import * as React23 from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var SvgWebauthn = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx63("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx63("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
+  return /* @__PURE__ */ jsx72("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx72("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
 };
 var webauthn_default = SvgWebauthn;
 
 // src/theme/default/components/card/list-item.tsx
-import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs30 } from "react/jsx-runtime";
 function ListItem({
-  icon: Icon,
+  icon: Icon2,
   as,
   title,
   description,
@@ -26716,10 +27133,10 @@ function ListItem({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx64("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx64(Icon, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
+        /* @__PURE__ */ jsx73("span", { className: "mt-1", children: Icon2 && /* @__PURE__ */ jsx73(Icon2, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
         /* @__PURE__ */ jsxs30("span", { className: "inline-flex max-w-full min-w-1 flex-1 flex-col leading-normal", children: [
-          /* @__PURE__ */ jsx64("span", { className: "break-words text-interface-foreground-default-primary", children: title }),
-          /* @__PURE__ */ jsx64("span", { className: "text-interface-foreground-default-secondary", children: description })
+          /* @__PURE__ */ jsx73("span", { className: "break-words text-interface-foreground-default-primary", children: title }),
+          /* @__PURE__ */ jsx73("span", { className: "text-interface-foreground-default-secondary", children: description })
         ] }),
         children
       ]
@@ -26728,8 +27145,7 @@ function ListItem({
 }
 
 // src/theme/default/components/card/auth-method-list-item.tsx
-import { useFormContext as useFormContext14 } from "react-hook-form";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var iconsMap = {
   code: code_default,
   passkey: passkey_default,
@@ -26743,26 +27159,34 @@ var iconsMap = {
 function DefaultAuthMethodListItem({
   onClick,
   group,
-  title
+  title,
+  disabled
 }) {
   var _a;
-  const intl = useIntl13();
-  const Icon = iconsMap[group] || null;
+  const intl = useIntl14();
+  const Icon2 = iconsMap[group] || null;
   const { flow } = useOryFlow8();
-  const { formState } = useFormContext14();
   if (group === "passkey") {
     const passkeyNode = findPasskeyNode(flow);
     if (!passkeyNode) {
       console.error("Passkey node not found");
       return null;
     }
-    return /* @__PURE__ */ jsx65(PasskeyListItem, { passkeyNode, group, title });
+    return /* @__PURE__ */ jsx74(
+      PasskeyListItem,
+      {
+        passkeyNode,
+        group,
+        title,
+        disabled
+      }
+    );
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx74(
     ListItem,
     {
       as: "button",
-      icon: Icon,
+      icon: Icon2,
       title: intl.formatMessage(
         { id: (_a = title == null ? void 0 : title.id) != null ? _a : `two-step.${group}.title` },
         title == null ? void 0 : title.values
@@ -26773,7 +27197,7 @@ function DefaultAuthMethodListItem({
       onClick,
       type: isGroupImmediateSubmit(group) ? "submit" : "button",
       "data-testid": `ory/form/auth-picker/${group}`,
-      disabled: !formState.isReady
+      disabled
     }
   );
 }
@@ -26788,11 +27212,15 @@ function findPasskeyNode(flow) {
   }
   return passkeyTriggerNode;
 }
-function PasskeyListItem({ group, title, passkeyNode }) {
+function PasskeyListItem({
+  group,
+  title,
+  passkeyNode,
+  disabled
+}) {
   var _a, _b;
-  const intl = useIntl13();
-  const Icon = iconsMap[group] || null;
-  const { formState } = useFormContext14();
+  const intl = useIntl14();
+  const Icon2 = iconsMap[group] || null;
   const [isPasskeyScriptInitalized, setPasskeyScriptInitalized] = useState5(false);
   const [failedToLoad, setFailedToLoad] = useState5(false);
   const clickHandler = () => {
@@ -26807,7 +27235,7 @@ function PasskeyListItem({ group, title, passkeyNode }) {
       console.error("Passkey node trigger function not found");
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (!passkeyNode.attributes.onclickTrigger) {
       console.error("Passkey node not found");
       return;
@@ -26824,11 +27252,11 @@ function PasskeyListItem({ group, title, passkeyNode }) {
     }
   }, 5e3);
   if (failedToLoad) {
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx74(
       ListItem,
       {
         as: "button",
-        icon: Icon,
+        icon: Icon2,
         disabled: true,
         title: intl.formatMessage(
           { id: (_a = title == null ? void 0 : title.id) != null ? _a : `two-step.${group}.title` },
@@ -26839,16 +27267,16 @@ function PasskeyListItem({ group, title, passkeyNode }) {
         }),
         type: "button",
         "data-testid": `ory/form/auth-picker/${group}`,
-        children: /* @__PURE__ */ jsx65(alert_triangle_default, {})
+        children: /* @__PURE__ */ jsx74(alert_triangle_default, {})
       }
     );
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx74(
     ListItem,
     {
       as: "button",
-      icon: Icon,
-      disabled: !isPasskeyScriptInitalized || !formState.isReady,
+      icon: Icon2,
+      disabled: !isPasskeyScriptInitalized || disabled,
       name: passkeyNode.attributes.name,
       title: intl.formatMessage(
         { id: (_b = title == null ? void 0 : title.id) != null ? _b : `two-step.${group}.title` },
@@ -26865,18 +27293,17 @@ function PasskeyListItem({ group, title, passkeyNode }) {
 }
 
 // src/theme/default/components/form/button.tsx
-import { getNodeLabel } from "@ory/client-fetch";
+import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
 import {
   uiTextToFormattedMessage as uiTextToFormattedMessage4
 } from "@ory/elements-react";
 import { cva } from "class-variance-authority";
-import { useFormContext as useFormContext15 } from "react-hook-form";
-import { useIntl as useIntl14 } from "react-intl";
-import { useEffect as useEffect7, useState as useState6 } from "react";
-import { jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useIntl as useIntl15 } from "react-intl";
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
-    "relative flex justify-center gap-3 overflow-hidden rounded-buttons leading-none font-medium ring-1 ring-inset",
+    "relative flex cursor-pointer justify-center gap-3 overflow-hidden rounded-buttons leading-none font-medium ring-1 ring-inset",
     "disabled:cursor-not-allowed loading:cursor-wait loading:before:pointer-events-none",
     "transition-colors duration-100 ease-linear",
     "max-w-[488px] p-4"
@@ -26899,51 +27326,32 @@ var buttonStyles = cva(
           "loading:bg-button-secondary-background-default loading:text-button-secondary-foreground-default loading:ring-button-secondary-border-default",
           "loading:before:absolute loading:before:inset-0 loading:before:bg-button-secondary-background-default loading:before:opacity-80 loading:before:content-['']"
         ]
-      }
-    }
-  }
-);
-var DefaultButton = ({
-  attributes,
-  node,
-  onClick
-}) => {
-  const { type, name, value, ...rest } = attributes;
-  const [clicked, setClicked] = useState6(false);
-  const intl = useIntl14();
-  const label = getNodeLabel(node);
-  const {
-    formState: { isSubmitting, isReady },
-    setValue
-  } = useFormContext15();
-  useEffect7(() => {
-    if (!isSubmitting) {
-      setClicked(false);
+      }
     }
-  }, [isSubmitting]);
-  const isPrimary = attributes.name === "method" || attributes.name.includes("passkey") || attributes.name.includes("webauthn") || attributes.name.includes("lookup_secret") || attributes.name.includes("action") && attributes.value === "accept";
+  }
+);
+var DefaultButton = ({
+  node,
+  buttonProps,
+  isSubmitting
+}) => {
+  const intl = useIntl15();
+  const label = getNodeLabel2(node);
+  const isPrimary = useMemo3(() => {
+    return node.attributes.name === "method" || node.attributes.name.includes("passkey") || node.attributes.name.includes("webauthn") || node.attributes.name.includes("lookup_secret") || node.attributes.name.includes("action") && node.attributes.value === "accept";
+  }, [node.attributes.name, node.attributes.value]);
   return /* @__PURE__ */ jsxs31(
     "button",
     {
-      ...omitInputAttributes(rest),
-      value,
-      name,
-      type: type === "button" ? "button" : "submit",
-      onClick: (e) => {
-        onClick == null ? void 0 : onClick(e);
-        setClicked(true);
-        if (type !== "button") {
-          setValue(name, value);
-        }
-      },
+      ...buttonProps,
+      "data-testid": `ory/form/node/button/${node.attributes.name}`,
+      "data-loading": isSubmitting,
       className: buttonStyles({
         intent: isPrimary ? "primary" : "secondary"
       }),
-      disabled: rest.disabled === true || !isReady || isSubmitting,
-      "data-loading": clicked,
       children: [
-        clicked ? /* @__PURE__ */ jsx66(Spinner, {}) : null,
-        label ? /* @__PURE__ */ jsx66("span", { children: uiTextToFormattedMessage4(label, intl) }) : ""
+        isSubmitting ? /* @__PURE__ */ jsx75(Spinner, {}) : null,
+        label ? /* @__PURE__ */ jsx75("span", { children: uiTextToFormattedMessage4(label, intl) }) : ""
       ]
     }
   );
@@ -26951,17 +27359,16 @@ var DefaultButton = ({
 DefaultButton.displayName = "DefaultButton";
 
 // src/theme/default/components/form/checkbox.tsx
-import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
+import { getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
 import {
   messageTestId as messageTestId3,
   uiTextToFormattedMessage as uiTextToFormattedMessage5
 } from "@ory/elements-react";
-import { useFormContext as useFormContext16 } from "react-hook-form";
-import { useIntl as useIntl16 } from "react-intl";
+import { useIntl as useIntl17 } from "react-intl";
 
 // src/theme/default/components/ui/checkbox-label.tsx
-import { useIntl as useIntl15 } from "react-intl";
-import { Fragment as Fragment10, jsx as jsx67 } from "react/jsx-runtime";
+import { useIntl as useIntl16 } from "react-intl";
+import { Fragment as Fragment10, jsx as jsx76 } from "react/jsx-runtime";
 var linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
 function computeLabelElements(labelText) {
   const elements = [];
@@ -26977,7 +27384,7 @@ function computeLabelElements(labelText) {
       elements.push(labelText.slice(lastIndex, matchStart));
     }
     elements.push(
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx76(
         "a",
         {
           href: url,
@@ -26997,18 +27404,18 @@ function computeLabelElements(labelText) {
   return elements;
 }
 function CheckboxLabel({ label }) {
-  const intl = useIntl15();
+  const intl = useIntl16();
   if (!label) {
     return null;
   }
   const labelText = resolveLabel(label, intl);
-  return /* @__PURE__ */ jsx67(Fragment10, { children: computeLabelElements(labelText) });
+  return /* @__PURE__ */ jsx76(Fragment10, { children: computeLabelElements(labelText) });
 }
 
 // src/theme/default/components/form/checkbox.tsx
-import { jsx as jsx68, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
 function CheckboxSVG() {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx77(
     "svg",
     {
       className: "absolute hidden size-4 fill-checkbox-foreground-checked peer-checked:block",
@@ -27017,7 +27424,7 @@ function CheckboxSVG() {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx68(
+      children: /* @__PURE__ */ jsx77(
         "path",
         {
           fillRule: "evenodd",
@@ -27028,36 +27435,28 @@ function CheckboxSVG() {
     }
   );
 }
-var DefaultCheckbox = ({
-  attributes: initialAttributes,
-  node
-}) => {
-  const { value, name, ...attributes } = initialAttributes;
-  const intl = useIntl16();
-  const label = getNodeLabel2(node);
-  const { register } = useFormContext16();
+var DefaultCheckbox = ({ node, inputProps }) => {
+  const intl = useIntl17();
+  const label = getNodeLabel3(node);
   const hasError = node.messages.some((m) => m.type === "error");
-  return /* @__PURE__ */ jsxs32("label", { className: "flex items-start gap-3 self-stretch antialiased", children: [
+  return /* @__PURE__ */ jsxs32("label", { className: "flex cursor-pointer items-start gap-3 self-stretch antialiased", children: [
     /* @__PURE__ */ jsxs32("span", { className: "flex h-5 items-center", children: [
-      /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx77(
         "input",
         {
-          ...omitInputAttributes(attributes),
-          defaultChecked: Boolean(value),
-          type: "checkbox",
+          ...inputProps,
           className: cn(
             "peer size-4 appearance-none rounded-forms border border-checkbox-border-checkbox-border-default bg-checkbox-background-default checked:border-checkbox-border-checkbox-border-checked checked:bg-checkbox-background-checked",
             hasError && "border-interface-border-validation-danger"
           ),
-          "data-testid": `ory/form/node/input/${name}`,
-          ...register(name)
+          "data-testid": `ory/form/node/input/${node.attributes.name}`
         }
       ),
-      /* @__PURE__ */ jsx68(CheckboxSVG, {})
+      /* @__PURE__ */ jsx77(CheckboxSVG, {})
     ] }),
     /* @__PURE__ */ jsxs32("span", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx68("span", { className: "leading-tight font-normal text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx68(CheckboxLabel, { label }) }),
-      node.messages.map((message) => /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx77("span", { className: "leading-tight font-normal text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx77(CheckboxLabel, { label }) }),
+      node.messages.map((message) => /* @__PURE__ */ jsx77(
         "span",
         {
           className: cn(
@@ -27075,7 +27474,7 @@ var DefaultCheckbox = ({
 
 // src/theme/default/components/form/group-container.tsx
 import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
-import { FlowType as FlowType15 } from "@ory/client-fetch";
+import { FlowType as FlowType16 } from "@ory/client-fetch";
 
 // src/util/childCounter.ts
 import { Children, isValidElement } from "react";
@@ -27089,19 +27488,19 @@ function countRenderableChildren(children) {
 }
 
 // src/theme/default/components/form/group-container.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 function DefaultGroupContainer({ children }) {
   const { flowType } = useOryFlow9();
   const count = countRenderableChildren(children);
   if (count === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       className: cn(
         "grid",
-        flowType === FlowType15.OAuth2Consent ? "grid-cols-2 gap-2" : "grid-cols-1 gap-8"
+        flowType === FlowType16.OAuth2Consent ? "grid-cols-2 gap-2" : "grid-cols-1 gap-8"
       ),
       children
     }
@@ -27109,236 +27508,207 @@ function DefaultGroupContainer({ children }) {
 }
 
 // src/theme/default/components/form/horizontal-divider.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 function DefaultHorizontalDivider() {
-  return /* @__PURE__ */ jsx70("hr", { className: "border-interface-border-default-primary" });
+  return /* @__PURE__ */ jsx79("hr", { className: "border-interface-border-default-primary" });
 }
 
 // src/theme/default/components/form/image.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-function DefaultImage({ attributes, node }) {
+import { jsx as jsx80 } from "react/jsx-runtime";
+function DefaultImage({ node }) {
   var _a;
-  return /* @__PURE__ */ jsx71("figure", { children: /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx80("figure", { children: /* @__PURE__ */ jsx80(
     "img",
     {
-      ...omitInputAttributes(attributes),
+      ...omitInputAttributes(node.attributes),
       alt: ((_a = node.meta.label) == null ? void 0 : _a.text) || ""
     }
   ) });
 }
 
 // src/theme/default/components/form/input.tsx
-import { FlowType as FlowType16, getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
-import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage6,
-  useOryFlow as useOryFlow10
-} from "@ory/elements-react";
-import { useRef as useRef3, useState as useState7 } from "react";
-import { useFormContext as useFormContext17 } from "react-hook-form";
-import { useIntl as useIntl17 } from "react-intl";
+import { FlowType as FlowType17 } from "@ory/client-fetch";
+import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
+import * as PasswordToggleField from "@radix-ui/react-password-toggle-field";
+import { forwardRef } from "react";
 
 // src/theme/default/assets/icons/eye-off.svg
 import * as React24 from "react";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var SvgEyeOff = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx72("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__ */ jsx72("path", { stroke: "currentColor", 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" }) });
+  return /* @__PURE__ */ jsx81("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__ */ jsx81("path", { stroke: "currentColor", 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 jsx73, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 var SvgEye = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx73("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__ */ jsxs33("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx73("path", { d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
-    /* @__PURE__ */ jsx73("path", { d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
+  return /* @__PURE__ */ jsx82("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__ */ jsxs33("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx82("path", { d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ jsx82("path", { 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 jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs34 } from "react/jsx-runtime";
 var defaultInputClassName = cn(
-  "w-full rounded-forms border leading-tight antialiased transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus:ring-0 focus-visible:outline-hidden",
+  "w-full rounded-forms border leading-tight antialiased transition-colors focus:ring-0 focus-visible:outline-none",
   "border-input-border-default bg-input-background-default text-input-foreground-primary",
-  "disabled:border-input-border-disabled disabled:bg-input-background-disabled disabled:text-input-foreground-disabled",
-  "focus:border-input-border-focus focus-visible:border-input-border-focus",
-  "hover:border-input-border-hover hover:bg-input-background-hover",
-  "px-4 py-[13px]"
+  "focus-within:border-input-border-focus focus-visible:border-input-border-focus",
+  "hover:bg-input-background-hover"
 );
-function resolvePlaceholder(text, intl) {
-  const fallback = intl.formatMessage(
-    {
-      id: "input.placeholder",
-      defaultMessage: "Enter your {placeholder}"
-    },
-    {
-      placeholder: uiTextToFormattedMessage6(text, intl)
-    }
-  );
-  if (isDynamicText(text)) {
-    const field = text.context.name;
-    return intl.formatMessage({
-      id: `forms.input.placeholder.${field}`,
-      defaultMessage: fallback
-    });
-  }
-  return fallback;
+function isAutocompletePassword(autocomplete) {
+  return autocomplete === "new-password" || autocomplete === "current-password";
 }
-var DefaultInput = ({
-  node,
-  attributes,
-  onClick
-}) => {
-  const label = getNodeLabel3(node);
-  const { register } = useFormContext17();
-  const { value, autocomplete, name, maxlength, ...rest } = attributes;
-  const intl = useIntl17();
-  const { flowType } = useOryFlow10();
-  const inputRef = useRef3(null);
-  const placeholder = label ? resolvePlaceholder(label, intl) : "";
-  if (rest.type === "hidden") {
-    return /* @__PURE__ */ jsx74(
-      "input",
-      {
-        ...omitInputAttributes(rest),
-        "data-testid": `ory/form/node/input/${name}`,
-        ...register(name, { value })
-      }
-    );
-  }
-  const { ref, ...restRegister } = register(name, { value });
-  return /* @__PURE__ */ jsxs34(
+function PasswordInput({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx83(PasswordToggleField.Root, { children: /* @__PURE__ */ jsxs34(
     "div",
     {
       className: cn(
-        "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 === FlowType16.Settings && "max-w-[488px]"
+        defaultInputClassName,
+        "flex justify-stretch not-focus-within:hover:border-input-border-hover",
+        "data-[disabled=true]:border-input-border-disabled data-[disabled=true]:bg-input-background-disabled data-[disabled=true]:text-input-foreground-disabled"
       ),
+      "data-disabled": rest.disabled,
       children: [
-        /* @__PURE__ */ jsx74(
-          "input",
+        /* @__PURE__ */ jsx83(
+          PasswordToggleField.Input,
           {
-            ...omitInputAttributes(rest),
-            onClick,
-            maxLength: maxlength,
-            autoComplete: autocomplete,
-            placeholder,
-            "data-testid": `ory/form/node/input/${name}`,
-            className: defaultInputClassName,
-            ref: (e) => {
-              inputRef.current = e;
-              ref(e);
-            },
-            ...restRegister
+            ...rest,
+            className: cn(
+              "w-full rounded-l-forms rounded-r-none bg-transparent px-4 py-[13px] text-input-foreground-primary placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus:outline-none disabled:bg-input-background-disabled disabled:text-input-foreground-disabled",
+              className
+            )
           }
         ),
-        rest.type === "password" && /* @__PURE__ */ jsx74(PasswordToggle, { inputRef })
+        /* @__PURE__ */ jsx83(PasswordToggleField.Toggle, { className: "cursor-pointer bg-transparent px-2 py-[13px]", children: /* @__PURE__ */ jsx83(PasswordToggleField.Icon, { visible: /* @__PURE__ */ jsx83(eye_off_default, {}), hidden: /* @__PURE__ */ jsx83(eye_default, {}) }) })
       ]
     }
-  );
-};
-function PasswordToggle({
-  inputRef
-}) {
-  const [shown, setShown] = useState7(false);
-  const handleClick = () => {
-    setShown(!shown);
-    if (inputRef.current) {
-      inputRef.current.type = shown ? "password" : "text";
-    }
-  };
-  return /* @__PURE__ */ jsx74(
-    "button",
+  ) });
+}
+var TextInput = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { flowType } = useOryFlow10();
+    return /* @__PURE__ */ jsx83(
+      "input",
+      {
+        ...props,
+        className: cn(
+          defaultInputClassName,
+          "px-4 py-[13px] hover:border-input-border-hover",
+          "placeholder:h-[20px] placeholder:text-input-foreground-tertiary disabled:border-input-border-disabled disabled:bg-input-background-disabled disabled:text-input-foreground-disabled",
+          // 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 === FlowType17.Settings && "max-w-[488px]",
+          className
+        ),
+        ref
+      }
+    );
+  }
+);
+var DefaultInputRoot = ({ inputProps }) => {
+  if (inputProps.type === "password") {
+    const autoComplete = isAutocompletePassword(inputProps.autoComplete) ? inputProps.autoComplete : void 0;
+    return /* @__PURE__ */ jsx83(
+      PasswordInput,
+      {
+        "data-testid": `ory/form/node/input/${inputProps.name}`,
+        ...inputProps,
+        autoComplete
+      }
+    );
+  }
+  if (inputProps.type === "hidden") {
+    return /* @__PURE__ */ jsx83(
+      "input",
+      {
+        "data-testid": `ory/form/node/input/${inputProps.name}`,
+        ...inputProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx83(
+    TextInput,
     {
-      onClick: handleClick,
-      className: "absolute right-0 flex h-full w-12 items-center justify-center text-input-foreground-primary",
-      type: "button",
-      "aria-label": "Toggle password visibility",
-      children: shown ? /* @__PURE__ */ jsx74(eye_off_default, {}) : /* @__PURE__ */ jsx74(eye_default, {})
+      "data-testid": `ory/form/node/input/${inputProps.name}`,
+      ...inputProps
     }
   );
-}
+};
+var DefaultInput = Object.assign(DefaultInputRoot, {
+  TextInput,
+  PasswordInput
+});
 
 // src/theme/default/components/form/label.tsx
 import {
-  FlowType as FlowType17,
+  FlowType as FlowType18,
   getNodeLabel as getNodeLabel4,
   instanceOfUiText
 } from "@ory/client-fetch";
 import {
   messageTestId as messageTestId4,
-  useComponents as useComponents5,
+  useComponents as useComponents4,
   useOryConfiguration as useOryConfiguration5,
-  useOryFlow as useOryFlow11
+  useOryFlow as useOryFlow11,
+  useResendCode as useResendCode2
 } from "@ory/elements-react";
-import { useMemo as useMemo2 } from "react";
-import { useFormContext as useFormContext18 } from "react-hook-form";
+import { useMemo as useMemo4 } from "react";
 import { useIntl as useIntl18 } from "react-intl";
-import { jsx as jsx75, jsxs as jsxs35 } from "react/jsx-runtime";
-function findResendNode(nodes) {
-  return nodes.find(
-    (n) => "name" in n.attributes && (["email", "recovery_confirm_address"].includes(n.attributes.name) && n.attributes.type === "submit" || n.attributes.name === "resend")
-  );
-}
+import { jsx as jsx84, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultLabel({
   node,
   children,
   attributes,
-  ...rest
+  fieldError
 }) {
   const intl = useIntl18();
   const label = getNodeLabel4(node);
-  const { Message } = useComponents5();
-  const { flow } = useOryFlow11();
-  const { setValue, formState } = useFormContext18();
-  const resendNode = findResendNode(flow.ui.nodes);
-  const handleResend = () => {
-    if ((resendNode == null ? void 0 : resendNode.attributes) && "name" in resendNode.attributes) {
-      setValue(resendNode.attributes.name, resendNode.attributes.value);
-    }
-  };
-  const fieldError = formState.errors[attributes.name];
+  const { Message } = useComponents4();
+  const { resendCode, resendCodeNode } = useResendCode2();
   return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-1 antialiased", children: [
     label && /* @__PURE__ */ jsxs35("span", { className: "inline-flex justify-between", children: [
-      /* @__PURE__ */ jsx75(
+      /* @__PURE__ */ jsx84(
         "label",
         {
           ...messageTestId4(label),
           className: "leading-normal text-input-foreground-primary",
           htmlFor: attributes.name,
           "data-testid": `ory/form/node/input/label/${attributes.name}`,
-          ...rest,
           children: resolveLabel(label, intl)
         }
       ),
-      /* @__PURE__ */ jsx75(LabelAction, { attributes }),
-      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx75(
+      /* @__PURE__ */ jsx84(LabelAction, { attributes }),
+      (resendCodeNode == null ? void 0 : resendCodeNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx84(
         "button",
         {
-          type: "submit",
-          name: resendNode.attributes.name,
-          value: resendNode.attributes.value,
-          onClick: handleResend,
+          type: "button",
+          name: resendCodeNode.attributes.name,
+          value: resendCodeNode.attributes.value,
+          onClick: resendCode,
           className: "cursor-pointer text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
           children: intl.formatMessage({ id: "identities.messages.1070008" })
         }
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ jsx75(Message.Content, { message }, message.id)),
-    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx75(Message.Content, { message: fieldError })
+    node.messages.map((message) => /* @__PURE__ */ jsx84(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx84(Message.Content, { message: fieldError })
   ] });
 }
 function LabelAction({ attributes }) {
   const intl = useIntl18();
   const { flowType, flow, formState } = useOryFlow11();
   const config = useOryConfiguration5();
-  const action = useMemo2(() => {
-    if (flowType === FlowType17.Login && config.project.recovery_enabled) {
+  const action = useMemo4(() => {
+    if (flowType === FlowType18.Login && config.project.recovery_enabled) {
       if (formState.current === "provide_identifier" && !flow.refresh) {
         if (attributes.name === "identifier") {
           return {
@@ -27370,7 +27740,7 @@ function LabelAction({ attributes }) {
     config.sdk.url,
     formState
   ]);
-  return action ? /* @__PURE__ */ jsx75(
+  return action ? /* @__PURE__ */ jsx84(
     "a",
     {
       href: action.href,
@@ -27384,38 +27754,39 @@ function LabelAction({ attributes }) {
 // src/theme/default/components/form/link-button.tsx
 import { getNodeLabel as getNodeLabel5 } from "@ory/client-fetch";
 import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage7
+  uiTextToFormattedMessage as uiTextToFormattedMessage6
 } from "@ory/elements-react";
-import { forwardRef } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import { useIntl as useIntl19 } from "react-intl";
-import { jsx as jsx76 } from "react/jsx-runtime";
-var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
+import { jsx as jsx85 } from "react/jsx-runtime";
+var DefaultLinkButton = forwardRef2(({ attributes, node }, ref) => {
   const intl = useIntl19();
   const label = getNodeLabel5(node);
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx85(
     "a",
     {
       ...omitInputAttributes(attributes),
       ref,
-      title: label ? uiTextToFormattedMessage7(label, intl) : "",
+      title: label ? uiTextToFormattedMessage6(label, intl) : "",
       "data-testid": `ory/form/node/link/${attributes.id}`,
       className: cn(
         "cursor-pointer gap-3 border bg-button-primary-background-default p-4 text-center leading-none font-medium text-button-primary-foreground-default antialiased transition-colors hover:bg-button-primary-background-hover hover:text-button-primary-foreground-hover"
       ),
-      children: label ? uiTextToFormattedMessage7(label, intl) : ""
+      children: label ? uiTextToFormattedMessage6(label, intl) : ""
     }
   );
 });
 DefaultLinkButton.displayName = "DefaultLinkButton";
 
 // src/theme/default/components/form/pin-code-input.tsx
-import { useFormContext as useFormContext19 } from "react-hook-form";
+import { FlowType as FlowType19 } from "@ory/client-fetch";
+import { useOryFlow as useOryFlow12 } from "@ory/elements-react";
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
 import * as React26 from "react";
-import { jsx as jsx77, jsxs as jsxs36 } from "react/jsx-runtime";
-var InputOTP = React26.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx77(
+import { jsx as jsx86, jsxs as jsxs36 } from "react/jsx-runtime";
+var InputOTP = React26.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx86(
   OTPInput,
   {
     ref,
@@ -27428,7 +27799,7 @@ var InputOTP = React26.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx86("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
   const inputOTPContext = React26.useContext(OTPInputContext);
@@ -27445,8 +27816,8 @@ var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx77("span", { className: "inline-block size-4", children: char }),
-        hasFakeCaret && /* @__PURE__ */ jsx77("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx77("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
+        /* @__PURE__ */ jsx86("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ jsx86("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx86("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
       ]
     }
   );
@@ -27454,35 +27825,31 @@ var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
 InputOTPSlot.displayName = "InputOTPSlot";
 
 // src/theme/default/components/form/pin-code-input.tsx
-import { useOryFlow as useOryFlow12 } from "@ory/elements-react";
-import { FlowType as FlowType18 } from "@ory/client-fetch";
-import { jsx as jsx78 } from "react/jsx-runtime";
-var DefaultPinCodeInput = ({ attributes }) => {
-  const { setValue, watch } = useFormContext19();
-  const { maxlength, name } = attributes;
-  const elements = maxlength != null ? maxlength : 6;
+import { jsx as jsx87 } from "react/jsx-runtime";
+var DefaultPinCodeInput = ({
+  node,
+  inputProps
+}) => {
   const { flowType } = useOryFlow12();
-  const handleInputChange = (v) => {
-    setValue(name, v);
-  };
-  const value = watch(name);
-  return /* @__PURE__ */ jsx78(
+  const { value, maxLength, ...restInputProps } = inputProps;
+  const elements = maxLength != null ? maxLength : 6;
+  const valueCasted = value;
+  return /* @__PURE__ */ jsx87(
     InputOTP,
     {
-      maxLength: maxlength != null ? maxlength : 6,
-      onChange: handleInputChange,
-      name,
-      value,
-      "data-testid": `ory/form/node/input/${name}`,
-      children: /* @__PURE__ */ jsx78(
+      "data-testid": `ory/form/node/input/${node.attributes.name}`,
+      ...restInputProps,
+      value: valueCasted,
+      maxLength: elements,
+      children: /* @__PURE__ */ jsx87(
         InputOTPGroup,
         {
           className: cn(
             "flex w-full justify-stretch gap-2",
             // 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 === FlowType18.Settings && "max-w-[488px]"
+            flowType === FlowType19.Settings && "max-w-[488px]"
           ),
-          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx78(InputOTPSlot, { index }, index))
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx87(InputOTPSlot, { index }, index))
         }
       )
     }
@@ -27490,16 +27857,16 @@ var DefaultPinCodeInput = ({ attributes }) => {
 };
 
 // src/theme/default/components/form/section.tsx
-import { jsx as jsx79, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs37 } from "react/jsx-runtime";
 var DefaultFormSection = ({
   children,
   nodes: _nodes,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx88(
     "form",
     {
-      className: "flex w-full max-w-(--breakpoint-sm) flex-col px-4 md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px]",
+      className: "flex w-(--breakpoint-sm) flex-col px-4 md:w-[712px] lg:w-[802px] xl:w-[896px]",
       ...rest,
       children
     }
@@ -27512,8 +27879,8 @@ var DefaultFormSectionContent = ({
 }) => {
   return /* @__PURE__ */ jsxs37("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__ */ jsxs37("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx79("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
-      /* @__PURE__ */ jsx79("span", { className: "text-interface-foreground-default-secondary", children: description })
+      /* @__PURE__ */ jsx88("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx88("span", { className: "text-interface-foreground-default-secondary", children: description })
     ] }),
     children
   ] });
@@ -27529,7 +27896,7 @@ var DefaultFormSectionFooter = ({
         "flex min-h-[72px] items-center justify-between gap-2 rounded-b-cards border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
       ),
       children: [
-        /* @__PURE__ */ jsx79("span", { children: text }),
+        /* @__PURE__ */ jsx88("span", { children: text }),
         children
       ]
     }
@@ -27537,42 +27904,51 @@ var DefaultFormSectionFooter = ({
 };
 
 // src/theme/default/components/form/text.tsx
-import { uiTextToFormattedMessage as uiTextToFormattedMessage8 } from "@ory/elements-react";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage7
+} from "@ory/elements-react";
 import { useIntl as useIntl20 } from "react-intl";
-import { Fragment as Fragment11, jsx as jsx80, jsxs as jsxs38 } from "react/jsx-runtime";
-function DefaultText({ node, attributes }) {
-  var _a;
+import { jsx as jsx89, jsxs as jsxs38 } from "react/jsx-runtime";
+function DefaultText({ node }) {
   const intl = useIntl20();
-  const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
-  if (lookup) {
-    return /* @__PURE__ */ jsxs38(Fragment11, { children: [
-      /* @__PURE__ */ jsx80("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage8(node.meta.label, intl) : "" }),
-      lookup.map((text, index) => /* @__PURE__ */ jsx80(
-        "pre",
-        {
-          "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
-          children: /* @__PURE__ */ jsx80("code", { children: text ? uiTextToFormattedMessage8(text, intl) : "" })
-        },
-        index
-      ))
-    ] });
+  if (node.attributes.id === "totp_secret_key") {
+    return /* @__PURE__ */ jsx89(
+      DefaultLabel,
+      {
+        node,
+        attributes: node.attributes,
+        children: /* @__PURE__ */ jsx89("div", { className: "relative flex max-w-[488px] justify-stretch", children: /* @__PURE__ */ jsx89(
+          DefaultInput.TextInput,
+          {
+            disabled: true,
+            name: "totp_secret_key",
+            type: "text",
+            value: node.attributes.text.text,
+            "data-testid": `ory/form/node/input/totp_secret_key`
+          }
+        ) })
+      }
+    );
   }
-  return /* @__PURE__ */ jsx80(Fragment11, { children: /* @__PURE__ */ jsxs38(
+  if (node.attributes.id === "lookup_secret_codes") {
+    throw new Error("node `lookup_secret_codes` cannot be rendered as text");
+  }
+  return /* @__PURE__ */ jsxs38(
     "p",
     {
-      "data-testid": `ory/form/node/text/${attributes.id}/label`,
-      id: attributes.id,
+      "data-testid": `ory/form/node/text/${node.attributes.id}/label`,
+      id: node.attributes.id,
       children: [
-        node.meta.label ? /* @__PURE__ */ jsx80("label", { children: uiTextToFormattedMessage8(node.meta.label, intl) }) : null,
-        attributes.text ? uiTextToFormattedMessage8(attributes.text, intl) : ""
+        node.meta.label ? /* @__PURE__ */ jsx89("label", { children: uiTextToFormattedMessage7(node.meta.label, intl) }) : null,
+        node.attributes.text ? uiTextToFormattedMessage7(node.attributes.text, intl) : ""
       ]
     }
-  ) });
+  );
 }
 
 // src/theme/default/components/generic/page-header.tsx
 import {
-  useComponents as useComponents6,
+  useComponents as useComponents5,
   useOryConfiguration as useOryConfiguration7,
   useOryFlow as useOryFlow13
 } from "@ory/elements-react";
@@ -27583,21 +27959,21 @@ import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdow
 
 // src/theme/default/assets/icons/logout.svg
 import * as React27 from "react";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var SvgLogout = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx81("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__ */ jsx81("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__ */ jsx90("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__ */ jsx90("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 React28 from "react";
-import { jsx as jsx82, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs39 } from "react/jsx-runtime";
 var SvgSettings = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx82("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__ */ jsxs39("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx82("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__ */ jsx82("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
+  return /* @__PURE__ */ jsx91("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__ */ jsxs39("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx91("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__ */ jsx91("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
   ] }) });
 };
 var settings_default = SvgSettings;
@@ -27642,12 +28018,12 @@ var getUserInitials = (session) => {
 };
 
 // src/theme/default/components/ui/dropdown-menu.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx83(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx83(
+var DropdownMenuContent = forwardRef4(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx92(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx92(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -27662,7 +28038,7 @@ var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx83(
+var DropdownMenuItem = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx92(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -27680,7 +28056,7 @@ var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx83(
+var DropdownMenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx92(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -27695,35 +28071,35 @@ var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /*
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 // src/theme/default/components/ui/user-avater.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/theme/default/assets/icons/user.svg
 import * as React29 from "react";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var SvgUser = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx84("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__ */ jsx84("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__ */ jsx93("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__ */ jsx93("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 jsx85 } from "react/jsx-runtime";
-var UserAvatar = forwardRef4(
+import { jsx as jsx94 } from "react/jsx-runtime";
+var UserAvatar = forwardRef5(
   ({ initials, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx85(
+    return /* @__PURE__ */ jsx94(
       "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__ */ jsx85("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx85(
+        children: /* @__PURE__ */ jsx94("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx94(
           "img",
           {
             src: initials.avatar,
             alt: initials.primary,
             className: "w-full object-contain"
           }
-        ) : /* @__PURE__ */ jsx85(
+        ) : /* @__PURE__ */ jsx94(
           user_default,
           {
             size: 24,
@@ -27737,27 +28113,27 @@ var UserAvatar = forwardRef4(
 UserAvatar.displayName = "UserAvatar";
 
 // src/theme/default/components/ui/user-menu.tsx
-import { jsx as jsx86, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs40 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const config = useOryConfiguration6();
   const initials = getUserInitials(session);
   const { logoutFlow } = useClientLogout(config);
   return /* @__PURE__ */ jsxs40(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx86(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx86(UserAvatar, { initials, title: "User Menu" }) }),
+    /* @__PURE__ */ jsx95(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx95(UserAvatar, { initials, title: "User Menu" }) }),
     /* @__PURE__ */ jsxs40(DropdownMenuContent, { children: [
       /* @__PURE__ */ jsxs40(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
-        /* @__PURE__ */ jsx86(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ jsx95(UserAvatar, { disabled: true, initials }),
         /* @__PURE__ */ jsxs40("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
-          /* @__PURE__ */ jsx86("div", { className: "leading-tight font-medium text-interface-foreground-default-primary", children: initials.primary }),
-          initials.secondary && /* @__PURE__ */ jsx86("div", { className: "leading-tight text-interface-foreground-default-tertiary", children: initials.secondary })
+          /* @__PURE__ */ jsx95("div", { className: "leading-tight font-medium text-interface-foreground-default-primary", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ jsx95("div", { className: "leading-tight text-interface-foreground-default-tertiary", children: initials.secondary })
         ] })
       ] }),
-      /* @__PURE__ */ jsx86(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs40("a", { href: config.project.settings_ui_url, children: [
-        /* @__PURE__ */ jsx86(settings_default, { size: 16 }),
+      /* @__PURE__ */ jsx95(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs40("a", { href: config.project.settings_ui_url, children: [
+        /* @__PURE__ */ jsx95(settings_default, { size: 16 }),
         " User settings"
       ] }) }),
-      /* @__PURE__ */ jsx86(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs40("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
-        /* @__PURE__ */ jsx86(logout_default, { size: 16 }),
+      /* @__PURE__ */ jsx95(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs40("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
+        /* @__PURE__ */ jsx95(logout_default, { size: 16 }),
         " Logout"
       ] }) })
     ] })
@@ -27767,28 +28143,28 @@ var UserMenu = ({ session }) => {
 // src/theme/default/components/generic/page-header.tsx
 import { useSession } from "@ory/elements-react/client";
 import { useIntl as useIntl21 } from "react-intl";
-import { jsx as jsx87, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs41 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
   var _a;
-  const { Card } = useComponents6();
+  const { Card } = useComponents5();
   const { session } = useSession();
   const intl = useIntl21();
   const { flow } = useOryFlow13();
   const config = useOryConfiguration7();
   const returnUrl = (_a = flow.return_to) != null ? _a : config.project.default_redirect_url;
-  return /* @__PURE__ */ jsx87("div", { className: "mt-16 flex w-full max-w-(--breakpoint-sm) flex-col gap-3 px-4 md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px]", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-12", children: [
+  return /* @__PURE__ */ jsx96("div", { className: "mt-16 flex w-full max-w-(--breakpoint-sm) flex-col gap-3 px-4 md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px]", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-12", children: [
     /* @__PURE__ */ jsxs41("div", { className: "flex max-h-10 flex-1 items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx87("div", { className: "h-9", children: /* @__PURE__ */ jsx87(Card.Logo, {}) }),
-      /* @__PURE__ */ jsx87(UserMenu, { session })
+      /* @__PURE__ */ jsx96("div", { className: "h-9", children: /* @__PURE__ */ jsx96(Card.Logo, {}) }),
+      /* @__PURE__ */ jsx96(UserMenu, { session })
     ] }),
-    returnUrl && /* @__PURE__ */ jsx87("div", { children: /* @__PURE__ */ jsxs41(
+    returnUrl && /* @__PURE__ */ jsx96("div", { children: /* @__PURE__ */ jsxs41(
       "a",
       {
         "data-testid": "ory/screen/settings/back-button",
         href: returnUrl,
         className: "inline-flex items-center gap-2 text-button-link-default-primary hover:text-button-link-default-primary-hover",
         children: [
-          /* @__PURE__ */ jsx87(arrow_left_default, {}),
+          /* @__PURE__ */ jsx96(arrow_left_default, {}),
           " ",
           intl.formatMessage({
             id: "settings.navigation-back-button",
@@ -27801,59 +28177,72 @@ var DefaultPageHeader = (_props) => {
 };
 
 // src/theme/default/components/settings/settings-oidc.tsx
+import {
+  useComponents as useComponents6
+} from "@ory/elements-react";
 import { useEffect as useEffect8 } from "react";
-import { useFormContext as useFormContext20 } from "react-hook-form";
-import { useDebounceValue as useDebounceValue2 } from "usehooks-ts";
+import { useDebounceValue as useDebounceValue3 } from "usehooks-ts";
 
 // src/theme/default/assets/icons/trash.svg
 import * as React30 from "react";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var SvgTrash = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx88("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__ */ jsx88("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__ */ jsx97("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__ */ jsx97("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 jsx89, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs42 } from "react/jsx-runtime";
+function extractProvider2(context) {
+  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
+    return context.provider;
+  }
+  return void 0;
+}
 function DefaultSettingsOidc({
   linkButtons,
-  unlinkButtons
+  unlinkButtons,
+  isSubmitting
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
+  const { Node: Node5 } = useComponents6();
   return /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ jsx89("div", { className: "grid grid-cols-1 items-start gap-3 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
-      const attrs = button.attributes;
-      return /* @__PURE__ */ jsx89(
-        DefaultButtonSocial,
+    hasLinkButtons && /* @__PURE__ */ jsx98("div", { className: "grid grid-cols-1 items-start gap-3 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
+      return /* @__PURE__ */ jsx98(
+        Node5.SsoButton,
         {
-          showLabel: true,
           node: button,
-          attributes: attrs,
-          onClick: button.onClick
+          buttonProps: button.buttonProps,
+          attributes: button.attributes,
+          isSubmitting,
+          provider: (button.attributes.value + "").split("-")[0]
         },
-        attrs.value
+        button.attributes.value
       );
     }) }),
-    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx89(DefaultHorizontalDivider, {}) : null,
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx98(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
       if (button.attributes.node_type !== "input") {
         return null;
       }
-      return /* @__PURE__ */ jsx89(UnlinkRow, { button }, button.attributes.value);
+      return /* @__PURE__ */ jsx98(
+        UnlinkRow,
+        {
+          button,
+          isSubmitting
+        },
+        button.attributes.value
+      );
     })
   ] });
 }
-function UnlinkRow({ button }) {
+function UnlinkRow({ button, isSubmitting }) {
   var _a, _b;
-  const [clicked, setClicked] = useDebounceValue2(false, 100);
-  const {
-    formState: { isSubmitting }
-  } = useFormContext20();
-  const attrs = button.attributes;
-  const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
-  const Logo = provider_logos_default[attrs.value.split("-")[0]];
+  const [clicked, setClicked] = useDebounceValue3(false, 100);
+  const provider = (_b = extractProvider2((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
+  const Logo = provider_logos_default[button.attributes.value.split("-")[0]];
   const localOnClick = () => {
     button.onClick();
     setClicked(true);
@@ -27865,19 +28254,19 @@ function UnlinkRow({ button }) {
   }, [isSubmitting, setClicked]);
   return /* @__PURE__ */ jsxs42("div", { className: "flex justify-between", children: [
     /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-6", children: [
-      Logo ? /* @__PURE__ */ jsx89(Logo, { size: 32 }) : /* @__PURE__ */ jsx89(GenericLogo, { label: provider.slice(0, 1) }),
-      /* @__PURE__ */ jsx89("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+      Logo ? /* @__PURE__ */ jsx98(Logo, { size: 32 }) : /* @__PURE__ */ jsx98(GenericLogo, { label: provider.slice(0, 1) }),
+      /* @__PURE__ */ jsx98("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
     ] }),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx98(
       "button",
       {
-        ...omitInputAttributes(attrs),
+        ...omitInputAttributes(button.attributes),
         type: "submit",
         onClick: localOnClick,
         disabled: isSubmitting,
         className: "relative",
         title: `Unlink ${provider}`,
-        children: clicked ? /* @__PURE__ */ jsx89(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx89(
+        children: clicked ? /* @__PURE__ */ jsx98(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx98(
           trash_default,
           {
             className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -27886,34 +28275,32 @@ function UnlinkRow({ button }) {
         )
       }
     )
-  ] }, attrs.value);
+  ] });
 }
 
 // src/theme/default/components/settings/settings-passkey.tsx
 import { useComponents as useComponents7 } from "@ory/elements-react";
-import { useFormContext as useFormContext21 } from "react-hook-form";
-import { jsx as jsx90, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs43 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
-  removeButtons
+  removeButtons,
+  isSubmitting
 }) {
-  const {
-    formState: { isSubmitting }
-  } = useFormContext21();
-  const { Node: Node2 } = useComponents7();
+  const { Node: Node5 } = useComponents7();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsx90("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx90(
-      Node2.Button,
+    /* @__PURE__ */ jsx99("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx99(
+      Node5.Button,
       {
         node: triggerButton,
         attributes: triggerButton.attributes,
-        onClick: triggerButton.onClick
+        buttonProps: triggerButton.buttonProps,
+        isSubmitting
       }
     ) }),
     hasRemoveButtons ? /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx90(DefaultHorizontalDivider, {}),
-      /* @__PURE__ */ jsx90("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+      /* @__PURE__ */ jsx99(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ jsx99("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;
@@ -27925,7 +28312,7 @@ function DefaultSettingsPasskey({
             className: "flex justify-between gap-6 md:items-center",
             children: [
               /* @__PURE__ */ jsxs43("div", { className: "flex flex-1 items-center gap-2 truncate", children: [
-                /* @__PURE__ */ jsx90(
+                /* @__PURE__ */ jsx99(
                   passkey_default,
                   {
                     size: 32,
@@ -27934,23 +28321,23 @@ function DefaultSettingsPasskey({
                 ),
                 /* @__PURE__ */ jsxs43("div", { className: "flex flex-1 flex-col gap-4 truncate md:flex-row md:items-center md:justify-between", children: [
                   /* @__PURE__ */ jsxs43("div", { className: "flex-1 flex-col truncate", children: [
-                    /* @__PURE__ */ jsx90("p", { className: "truncate text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
-                    /* @__PURE__ */ jsx90("span", { className: "hidden truncate text-sm text-interface-foreground-default-tertiary sm:block", children: keyId })
+                    /* @__PURE__ */ jsx99("p", { className: "truncate text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ jsx99("span", { className: "hidden truncate text-sm text-interface-foreground-default-tertiary sm:block", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ jsx90("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ jsx99("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx90(
+              /* @__PURE__ */ jsx99(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  onClick: node.onClick,
+                  onClick: node.buttonProps.onClick,
                   disabled: isSubmitting,
                   className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx90(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx90(
+                  children: isSubmitting ? /* @__PURE__ */ jsx99(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx99(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -27970,35 +28357,32 @@ function DefaultSettingsPasskey({
 
 // src/theme/default/assets/icons/download.svg
 import * as React31 from "react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var SvgDownload = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx91("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__ */ jsx91("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__ */ jsx100("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__ */ jsx100("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/refresh.svg
 import * as React32 from "react";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var SvgRefresh = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx92("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__ */ jsx92("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__ */ jsx101("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__ */ jsx101("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 useFormContext22 } from "react-hook-form";
-import { Fragment as Fragment12, jsx as jsx93, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx102, jsxs as jsxs44 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
-  regnerateButton,
+  regenerateButton,
   revealButton,
   onRegenerate,
-  onReveal
+  onReveal,
+  isSubmitting
 }) {
-  const {
-    formState: { isSubmitting }
-  } = useFormContext22();
   const onDownload = () => {
     const element = document.createElement("a");
     const file = new Blob([codes.join("\n")], {
@@ -28011,20 +28395,20 @@ function DefaultSettingsRecoveryCodes({
   };
   const hasCodes = codes.length >= 1;
   return /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-8", children: [
-    codes.length > 0 && /* @__PURE__ */ jsx93(DefaultHorizontalDivider, {}),
+    codes.length > 0 && /* @__PURE__ */ jsx102(DefaultHorizontalDivider, {}),
     /* @__PURE__ */ jsxs44("div", { className: "flex justify-between gap-4", children: [
-      /* @__PURE__ */ jsx93("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ jsx102("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
       /* @__PURE__ */ jsxs44("div", { className: "flex gap-2", children: [
-        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx93(
+        regenerateButton && codes.length > 0 && /* @__PURE__ */ jsx102(
           "button",
           {
-            ...regnerateButton.attributes,
+            ...omitInputAttributes(regenerateButton.attributes),
             type: "submit",
             className: "ml-auto",
             onClick: onRegenerate,
             disabled: isSubmitting,
             "data-loading": isSubmitting,
-            children: /* @__PURE__ */ jsx93(
+            children: /* @__PURE__ */ jsx102(
               refresh_default,
               {
                 size: 24,
@@ -28033,7 +28417,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ),
-        revealButton && /* @__PURE__ */ jsx93(Fragment12, { children: /* @__PURE__ */ jsx93(
+        revealButton && /* @__PURE__ */ jsx102(Fragment11, { children: /* @__PURE__ */ jsx102(
           "button",
           {
             ...revealButton.attributes,
@@ -28041,7 +28425,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             onClick: onReveal,
             title: "Reveal recovery codes",
-            children: /* @__PURE__ */ jsx93(
+            children: /* @__PURE__ */ jsx102(
               eye_default,
               {
                 size: 24,
@@ -28050,7 +28434,7 @@ function DefaultSettingsRecoveryCodes({
             )
           }
         ) }),
-        hasCodes && /* @__PURE__ */ jsx93(
+        hasCodes && /* @__PURE__ */ jsx102(
           "button",
           {
             onClick: onDownload,
@@ -28058,7 +28442,7 @@ function DefaultSettingsRecoveryCodes({
             className: "ml-auto",
             "data-testid": "ory/screen/settings/group/recovery_code/download",
             title: "Download recovery codes",
-            children: /* @__PURE__ */ jsx93(
+            children: /* @__PURE__ */ jsx102(
               download_default,
               {
                 size: 24,
@@ -28069,178 +28453,145 @@ function DefaultSettingsRecoveryCodes({
         )
       ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ jsx93("div", { className: "rounded-general border-interface-border-default-primary bg-interface-background-default-secondary p-6", children: /* @__PURE__ */ jsx93(
+    hasCodes ? /* @__PURE__ */ jsx102("div", { className: "rounded-general border-interface-border-default-primary bg-interface-background-default-secondary p-6", children: /* @__PURE__ */ jsx102(
       "div",
       {
         className: "grid grid-cols-2 flex-wrap gap-4 text-sm text-interface-foreground-default-primary sm:grid-cols-3 md:grid-cols-5",
         "data-testid": "ory/screen/settings/group/recovery_code/codes",
-        children: codes.map((code) => /* @__PURE__ */ jsx93("p", { children: code }, code))
+        children: codes.map((code) => /* @__PURE__ */ jsx102("p", { children: code }, code))
       }
     ) }) : null
   ] });
 }
 
 // src/theme/default/components/settings/settings-totp.tsx
-import { useComponents as useComponents8 } from "@ory/elements-react";
+import { Node as Node3, useComponents as useComponents8 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/qrcode.svg
 import * as React33 from "react";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 var SvgQrcode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx94("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__ */ jsx94("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__ */ jsx103("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__ */ jsx103("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 useFormContext23 } from "react-hook-form";
-import { jsx as jsx95, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs45 } from "react/jsx-runtime";
 function DefaultSettingsTotp({
   totpImage,
   totpInput,
   totpSecret,
   totpUnlink,
-  onUnlink
+  onUnlink,
+  isSubmitting
 }) {
-  const { Node: Node2, Card } = useComponents8();
-  const {
-    formState: { isSubmitting }
-  } = useFormContext23();
   if (totpUnlink) {
-    const {
-      type,
-      autocomplete: _ignoredAutocomplete,
-      label: _ignoredLabel,
-      node_type: _ignoredNodeType,
-      ...buttonAttrs
-    } = totpUnlink.attributes;
-    return /* @__PURE__ */ jsxs45("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx95("div", { className: "col-span-full", children: /* @__PURE__ */ jsx95(Card.Divider, {}) }),
-      /* @__PURE__ */ jsxs45("div", { className: "col-span-full flex items-center gap-6", children: [
-        /* @__PURE__ */ jsx95("div", { className: "aspect-square size-8", children: /* @__PURE__ */ jsx95(qrcode_default, { size: 32 }) }),
-        /* @__PURE__ */ jsx95("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx95("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
-        /* @__PURE__ */ jsx95(
-          "button",
-          {
-            type: type === "button" ? "button" : "submit",
-            ...buttonAttrs,
-            onClick: onUnlink,
-            disabled: isSubmitting,
-            children: isSubmitting ? /* @__PURE__ */ jsx95(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx95(
-              trash_default,
-              {
-                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
-                size: 24
-              }
-            )
-          }
-        )
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx104(
+      SettingsTotpUnlink,
+      {
+        totpUnlinkAttributes: totpUnlink.attributes,
+        onUnlink,
+        isSubmitting
+      }
+    );
   }
   if (totpImage && totpSecret && totpInput) {
-    return /* @__PURE__ */ jsxs45("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx95("div", { className: "col-span-full", children: /* @__PURE__ */ jsx95(DefaultHorizontalDivider, {}) }),
-      /* @__PURE__ */ jsx95("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx95("div", { className: "aspect-square h-44 bg-[white]", children: /* @__PURE__ */ jsx95("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx95(
-        Node2.Image,
+    return /* @__PURE__ */ jsx104(
+      SettingsTotpLink,
+      {
+        totpImage,
+        totpSecret,
+        totpInput
+      }
+    );
+  }
+}
+function SettingsTotpUnlink({
+  totpUnlinkAttributes,
+  onUnlink,
+  isSubmitting
+}) {
+  const { Card } = useComponents8();
+  const {
+    type,
+    autocomplete: _ignoredAutocomplete,
+    label: _ignoredLabel,
+    node_type: _ignoredNodeType,
+    ...buttonAttrs
+  } = totpUnlinkAttributes;
+  return /* @__PURE__ */ jsxs45("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsx104("div", { className: "col-span-full", children: /* @__PURE__ */ jsx104(Card.Divider, {}) }),
+    /* @__PURE__ */ jsxs45("div", { className: "col-span-full flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx104("div", { className: "aspect-square size-8", children: /* @__PURE__ */ jsx104(qrcode_default, { size: 32 }) }),
+      /* @__PURE__ */ jsx104("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx104("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+      /* @__PURE__ */ jsx104(
+        "button",
         {
-          node: totpImage,
-          attributes: {
-            ...totpImage.attributes
-          }
+          type: type === "button" ? "button" : "submit",
+          ...buttonAttrs,
+          onClick: onUnlink,
+          disabled: isSubmitting,
+          children: isSubmitting ? /* @__PURE__ */ jsx104(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx104(
+            trash_default,
+            {
+              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+              size: 24
+            }
+          )
         }
-      ) }) }) }),
-      /* @__PURE__ */ jsxs45("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx95(
-          Node2.Label,
-          {
-            node: totpSecret,
-            attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ jsx95("div", { className: "relative flex max-w-[488px] justify-stretch", children: /* @__PURE__ */ jsx95(
-              "input",
-              {
-                disabled: true,
-                name: "totp_secret_key",
-                type: "text",
-                value: totpSecret.attributes.text.text,
-                "data-testid": `ory/form/node/input/totp_secret_key`,
-                className: defaultInputClassName
-              }
-            ) })
-          }
-        ),
-        /* @__PURE__ */ jsx95(
-          Node2.Label,
-          {
-            attributes: totpInput.attributes,
-            node: totpInput,
-            children: /* @__PURE__ */ jsx95(
-              Node2.CodeInput,
-              {
-                node: totpInput,
-                attributes: totpInput.attributes
-              }
-            )
-          }
-        )
-      ] })
-    ] });
-  }
+      )
+    ] })
+  ] });
+}
+function SettingsTotpLink({
+  totpImage,
+  totpSecret,
+  totpInput
+}) {
+  return /* @__PURE__ */ jsxs45("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsx104("div", { className: "col-span-full", children: /* @__PURE__ */ jsx104(DefaultHorizontalDivider, {}) }),
+    /* @__PURE__ */ jsx104("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx104("div", { className: "aspect-square h-44 bg-[white]", children: /* @__PURE__ */ jsx104("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx104(Node3, { node: totpImage }) }) }) }),
+    /* @__PURE__ */ jsxs45("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsx104(Node3, { node: totpSecret }),
+      /* @__PURE__ */ jsx104(Node3, { node: totpInput })
+    ] })
+  ] });
 }
 
 // src/theme/default/components/settings/settings-webauthn.tsx
-import { useComponents as useComponents9 } from "@ory/elements-react";
+import {
+  Node as Node4,
+  useComponents as useComponents9
+} from "@ory/elements-react";
 
 // src/theme/default/assets/icons/key.svg
 import * as React34 from "react";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var SvgKey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx96("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__ */ jsx96("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__ */ jsx105("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__ */ jsx105("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 useFormContext24 } from "react-hook-form";
-import { jsx as jsx97, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs46 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
-  removeButtons
+  removeButtons,
+  isSubmitting
 }) {
-  const {
-    formState: { isSubmitting }
-  } = useFormContext24();
-  const { Node: Node2, Card } = useComponents9();
+  const { Card } = useComponents9();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end md:max-w-96", children: [
-      /* @__PURE__ */ jsx97("div", { className: "flex-1", children: /* @__PURE__ */ jsx97(
-        Node2.Label,
-        {
-          node: nameInput,
-          attributes: nameInput.attributes,
-          children: /* @__PURE__ */ jsx97(
-            Node2.Input,
-            {
-              node: nameInput,
-              attributes: nameInput.attributes
-            }
-          )
-        }
-      ) }),
-      triggerButton ? /* @__PURE__ */ jsx97(
-        Node2.Button,
-        {
-          node: triggerButton,
-          attributes: triggerButton.attributes,
-          onClick: triggerButton.onClick
-        }
-      ) : null
+      /* @__PURE__ */ jsx106("div", { className: "flex-1", children: /* @__PURE__ */ jsx106(Node4.Input, { node: nameInput }) }),
+      triggerButton ? /* @__PURE__ */ jsx106(Node4.Button, { node: triggerButton }) : null
     ] }),
     hasRemoveButtons ? /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx97(Card.Divider, {}),
-      /* @__PURE__ */ jsx97("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
+      /* @__PURE__ */ jsx106(Card.Divider, {}),
+      /* @__PURE__ */ jsx106("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;
@@ -28252,7 +28603,7 @@ function DefaultSettingsWebauthn({
             className: "flex justify-between gap-6 md:items-center",
             children: [
               /* @__PURE__ */ jsxs46("div", { className: "flex flex-1 items-center gap-2 truncate", children: [
-                /* @__PURE__ */ jsx97(
+                /* @__PURE__ */ jsx106(
                   key_default,
                   {
                     size: 32,
@@ -28261,23 +28612,23 @@ function DefaultSettingsWebauthn({
                 ),
                 /* @__PURE__ */ jsxs46("div", { className: "flex flex-1 flex-col gap-4 truncate md:flex-row md:items-center md:justify-between", children: [
                   /* @__PURE__ */ jsxs46("div", { className: "flex-1 flex-col truncate", children: [
-                    /* @__PURE__ */ jsx97("p", { className: "truncate text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
-                    /* @__PURE__ */ jsx97("span", { className: "hidden truncate text-sm text-interface-foreground-default-tertiary sm:block", children: keyId })
+                    /* @__PURE__ */ jsx106("p", { className: "truncate text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ jsx106("span", { className: "hidden truncate text-sm text-interface-foreground-default-tertiary sm:block", children: keyId })
                   ] }),
-                  addedAt && /* @__PURE__ */ jsx97("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                  addedAt && /* @__PURE__ */ jsx106("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
                   }).format(new Date(addedAt)) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx97(
+              /* @__PURE__ */ jsx106(
                 "button",
                 {
-                  ...node.attributes,
+                  ...omitInputAttributes(node.attributes),
                   type: "submit",
-                  onClick: node.onClick,
+                  onClick: node.buttonProps.onClick,
                   disabled: isSubmitting,
-                  className: "relative",
-                  children: isSubmitting ? /* @__PURE__ */ jsx97(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx97(
+                  className: "relative cursor-pointer",
+                  children: isSubmitting ? /* @__PURE__ */ jsx106(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx106(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -28296,25 +28647,25 @@ function DefaultSettingsWebauthn({
 }
 
 // src/theme/default/components/card/auth-method-list-container.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 function DefaultAuthMethodListContainer({
   children
 }) {
-  return /* @__PURE__ */ jsx98("div", { className: "grid grid-cols-1 gap-2", children });
+  return /* @__PURE__ */ jsx107("div", { className: "grid grid-cols-1 gap-2", children });
 }
 
 // src/theme/default/components/form/captcha.tsx
-import { isUiNodeInputAttributes as isUiNodeInputAttributes9 } from "@ory/client-fetch";
 import { Turnstile } from "@marsidev/react-turnstile";
-import { useEffect as useEffect9, useRef as useRef4 } from "react";
-import { useFormContext as useFormContext25 } from "react-hook-form";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { isUiNodeInputAttributes as isUiNodeInputAttributes8 } from "@ory/client-fetch";
+import { useEffect as useEffect9, useRef as useRef3 } from "react";
+import { useFormContext as useFormContext15 } from "react-hook-form";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var DefaultCaptcha = ({ node }) => {
-  const { setValue, formState } = useFormContext25();
-  const ref = useRef4();
-  const prevSubmitCount = useRef4(formState.submitCount);
+  const { setValue, formState } = useFormContext15();
+  const ref = useRef3();
+  const prevSubmitCount = useRef3(formState.submitCount);
   useEffect9(() => {
-    if (formState.submitCount > prevSubmitCount.current && formState.isSubmitSuccessful) {
+    if (formState.submitCount > prevSubmitCount.current) {
       prevSubmitCount.current = formState.submitCount;
       setTimeout(() => {
         if (ref.current) {
@@ -28322,15 +28673,15 @@ var DefaultCaptcha = ({ node }) => {
         }
       }, 100);
     }
-  }, [formState.submitCount, formState.isSubmitSuccessful]);
-  if (!isUiNodeInputAttributes9(node.attributes)) {
+  }, [formState.submitCount]);
+  if (!isUiNodeInputAttributes8(node.attributes)) {
     return null;
   }
   if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-    return /* @__PURE__ */ jsx99(DefaultInput, { node, attributes: node.attributes }, 1);
+    return null;
   } else if (node.attributes.name === "captcha_turnstile_options") {
     const options = JSON.parse(node.attributes.value);
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx108(
       Turnstile,
       {
         ref,
@@ -28339,7 +28690,7 @@ var DefaultCaptcha = ({ node }) => {
           action: options.action,
           size: "flexible",
           theme: options.theme,
-          responseField: false,
+          responseField: true,
           responseFieldName: options.response_field_name
         },
         onExpire: () => {
@@ -28357,35 +28708,35 @@ var DefaultCaptcha = ({ node }) => {
 
 // src/theme/default/assets/icons/personal.svg
 import * as React35 from "react";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 var SvgPersonal = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx100("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__ */ jsx100("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 14v-1.333A2.667 2.667 0 0 1 6.667 10h1m5.8 3.467 1.2 1.2m-9.334-10a2.667 2.667 0 1 0 5.334 0 2.667 2.667 0 0 0-5.334 0M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }) });
+  return /* @__PURE__ */ jsx109("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__ */ jsx109("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 14v-1.333A2.667 2.667 0 0 1 6.667 10h1m5.8 3.467 1.2 1.2m-9.334-10a2.667 2.667 0 1 0 5.334 0 2.667 2.667 0 0 0-5.334 0M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }) });
 };
 var personal_default = SvgPersonal;
 
 // src/theme/default/assets/icons/message.svg
 import * as React36 from "react";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var SvgMessage = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx101("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx101("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7.325a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2m-18 0v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-10m-18 0 9 6 9-6" }) });
+  return /* @__PURE__ */ jsx110("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx110("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7.325a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2m-18 0v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-10m-18 0 9 6 9-6" }) });
 };
 var message_default = SvgMessage;
 
 // src/theme/default/assets/icons/phone.svg
 import * as React37 from "react";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var SvgPhone = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx102("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx102("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 4.325h4l2 5-2.5 1.5a11 11 0 0 0 5 5l1.5-2.5 5 2v4a2 2 0 0 1-2 2 16 16 0 0 1-15-15 2 2 0 0 1 2-2" }) });
+  return /* @__PURE__ */ jsx111("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx111("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 4.325h4l2 5-2.5 1.5a11 11 0 0 0 5 5l1.5-2.5 5 2v4a2 2 0 0 1-2 2 16 16 0 0 1-15-15 2 2 0 0 1 2-2" }) });
 };
 var phone_default = SvgPhone;
 
 // src/theme/default/components/form/consent-scope-checkbox.tsx
 import { useIntl as useIntl22 } from "react-intl";
 import * as Switch from "@radix-ui/react-switch";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var ScopeIcons = {
   openid: personal_default,
   offline_access: personal_default,
@@ -28395,16 +28746,17 @@ var ScopeIcons = {
 };
 function DefaultConsentScopeCheckbox({
   attributes,
-  onCheckedChange
+  onCheckedChange,
+  inputProps
 }) {
   var _a;
   const intl = useIntl22();
-  const Icon = (_a = ScopeIcons[attributes.value]) != null ? _a : personal_default;
-  return /* @__PURE__ */ jsx103(
+  const Icon2 = (_a = ScopeIcons[attributes.value]) != null ? _a : personal_default;
+  return /* @__PURE__ */ jsx112(
     ListItem,
     {
       as: "label",
-      icon: Icon,
+      icon: Icon2,
       title: intl.formatMessage({
         id: `consent.scope.${attributes.value}.title`,
         defaultMessage: attributes.value
@@ -28415,15 +28767,15 @@ function DefaultConsentScopeCheckbox({
       }),
       className: "col-span-2",
       "data-testid": "ory/screen/consent/scope-checkbox-label",
-      children: /* @__PURE__ */ jsx103(
+      children: /* @__PURE__ */ jsx112(
         Switch.Root,
         {
           className: "relative h-4 w-7 rounded-identifier border border-toggle-border-default bg-toggle-background-default p-[3px] transition-all data-[state=checked]:border-toggle-border-checked data-[state=checked]:bg-toggle-background-checked",
           "data-testid": `ory/screen/consent/scope-checkbox`,
-          value: attributes.value,
+          ...inputProps,
           onCheckedChange,
           defaultChecked: true,
-          children: /* @__PURE__ */ jsx103(Switch.Thumb, { className: "block size-2 rounded-identifier bg-toggle-foreground-default transition-all data-[state=checked]:translate-x-3 data-[state=checked]:bg-toggle-foreground-checked" })
+          children: /* @__PURE__ */ jsx112(Switch.Thumb, { className: "block size-2 rounded-identifier bg-toggle-foreground-default transition-all data-[state=checked]:translate-x-3 data-[state=checked]:bg-toggle-foreground-checked" })
         }
       )
     }
@@ -28433,22 +28785,22 @@ function DefaultConsentScopeCheckbox({
 // src/theme/default/components/generic/toast.tsx
 import {
   messageTestId as messageTestId5,
-  uiTextToFormattedMessage as uiTextToFormattedMessage9
+  uiTextToFormattedMessage as uiTextToFormattedMessage8
 } from "@ory/elements-react";
 import { toast as sonnerToast2 } from "sonner";
 import { useIntl as useIntl23 } from "react-intl";
 
 // src/theme/default/assets/icons/x.svg
 import * as React38 from "react";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var SvgX2 = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx104("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx104("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "m18 6.325-12 12m0-12 12 12" }) });
+  return /* @__PURE__ */ jsx113("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx113("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "m18 6.325-12 12m0-12 12 12" }) });
 };
 var x_default2 = SvgX2;
 
 // src/theme/default/components/generic/toast.tsx
-import { jsx as jsx105, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs47 } from "react/jsx-runtime";
 function DefaultToast({
   message,
   // Id can be used to close the toast later, but we don't use it here
@@ -28456,7 +28808,7 @@ function DefaultToast({
 }) {
   const intl = useIntl23();
   const title = message.type === "error" ? intl.formatMessage({ id: "settings.messages.toast-title.error" }) : intl.formatMessage({ id: "settings.messages.toast-title.success" });
-  const messageText = uiTextToFormattedMessage9(message, intl);
+  const messageText = uiTextToFormattedMessage8(message, intl);
   return /* @__PURE__ */ jsxs47(
     "div",
     {
@@ -28464,7 +28816,7 @@ function DefaultToast({
       ...messageTestId5(message),
       children: [
         /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx105(
+          /* @__PURE__ */ jsx114(
             "p",
             {
               className: cn("font-medium", {
@@ -28478,17 +28830,17 @@ function DefaultToast({
               children: title
             }
           ),
-          /* @__PURE__ */ jsx105(
+          /* @__PURE__ */ jsx114(
             "button",
             {
               "data-testid": `ory/message/${message.id}.close`,
               className: "cursor-pointer text-interface-foreground-default-inverted",
               onClick: () => sonnerToast2.dismiss(id),
-              children: /* @__PURE__ */ jsx105(x_default2, { size: 16 })
+              children: /* @__PURE__ */ jsx114(x_default2, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx105("p", { className: "text-interface-foreground-default-inverted", children: messageText })
+        /* @__PURE__ */ jsx114("p", { className: "text-interface-foreground-default-inverted", children: messageText })
       ]
     }
   );
@@ -28554,9 +28906,9 @@ import {
   OryConfigurationProvider as OryConfigurationProvider2,
   useOryConfiguration as useOryConfiguration8
 } from "@ory/elements-react";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { FormattedMessage } from "react-intl";
-import { jsx as jsx106, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs48 } from "react/jsx-runtime";
 function isOAuth2Error(error) {
   return !!error && typeof error === "object" && "error" in error && "error_description" in error;
 }
@@ -28565,7 +28917,7 @@ var errorDescriptions = {
   5: "The server encountered an error and could not complete your request"
 };
 function useStandardize(error) {
-  return useMemo3(() => {
+  return useMemo5(() => {
     var _a;
     if (isOAuth2Error(error)) {
       return {
@@ -28609,48 +28961,48 @@ function Error2({
   const Divider = (_d = (_c = Components == null ? void 0 : Components.Card) == null ? void 0 : _c.Divider) != null ? _d : DefaultHorizontalDivider;
   const parsed = useStandardize(error);
   const description = errorDescriptions[Math.floor(parsed.code / 100)];
-  return /* @__PURE__ */ jsx106(OryConfigurationProvider2, { sdk: config.sdk, project: config.project, children: /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx115(OryConfigurationProvider2, { sdk: config.sdk, project: config.project, children: /* @__PURE__ */ jsx115(
     IntlProvider,
     {
       locale: (_f = (_e = config.intl) == null ? void 0 : _e.locale) != null ? _f : "en",
       customTranslations: (_g = config.intl) == null ? void 0 : _g.customTranslations,
-      children: /* @__PURE__ */ jsx106(Card, { children: /* @__PURE__ */ jsxs48(
+      children: /* @__PURE__ */ jsx115(Card, { children: /* @__PURE__ */ jsxs48(
         "div",
         {
           className: "flex flex-col gap-6 antialiased",
           "data-testid": "ory/screen/error",
           children: [
             /* @__PURE__ */ jsxs48("header", { className: "flex flex-col gap-8 antialiased", children: [
-              /* @__PURE__ */ jsx106("div", { className: "max-h-9 self-start", children: /* @__PURE__ */ jsx106(ErrorLogo, {}) }),
+              /* @__PURE__ */ jsx115("div", { className: "max-h-9 self-start", children: /* @__PURE__ */ jsx115(ErrorLogo, {}) }),
               /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx106("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "error.title.what-happened" }) }),
-                /* @__PURE__ */ jsx106("p", { className: "leading-normal text-interface-foreground-default-secondary", children: (_h = parsed.message) != null ? _h : description }),
-                parsed.reason && /* @__PURE__ */ jsx106("p", { className: "leading-normal text-interface-foreground-default-secondary", children: parsed.reason })
+                /* @__PURE__ */ jsx115("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "error.title.what-happened" }) }),
+                /* @__PURE__ */ jsx115("p", { className: "leading-normal text-interface-foreground-default-secondary", children: (_h = parsed.message) != null ? _h : description }),
+                parsed.reason && /* @__PURE__ */ jsx115("p", { className: "leading-normal text-interface-foreground-default-secondary", children: parsed.reason })
               ] })
             ] }),
-            /* @__PURE__ */ jsx106(Divider, {}),
+            /* @__PURE__ */ jsx115(Divider, {}),
             /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx106("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "error.title.what-can-i-do" }) }),
-              /* @__PURE__ */ jsx106("p", { className: "leading-normal text-interface-foreground-default-secondary", children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "error.instructions" }) }),
-              /* @__PURE__ */ jsx106("div", { children: session ? /* @__PURE__ */ jsx106(LoggedInActions, {}) : /* @__PURE__ */ jsx106(GoBackButton, {}) })
+              /* @__PURE__ */ jsx115("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "error.title.what-can-i-do" }) }),
+              /* @__PURE__ */ jsx115("p", { className: "leading-normal text-interface-foreground-default-secondary", children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "error.instructions" }) }),
+              /* @__PURE__ */ jsx115("div", { children: session ? /* @__PURE__ */ jsx115(LoggedInActions, {}) : /* @__PURE__ */ jsx115(GoBackButton, {}) })
             ] }),
-            /* @__PURE__ */ jsx106(Divider, {}),
+            /* @__PURE__ */ jsx115(Divider, {}),
             /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-2 leading-normal font-normal antialiased", children: [
-              /* @__PURE__ */ jsx106("span", { className: "text-sm text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "error.footer.text" }) }),
+              /* @__PURE__ */ jsx115("span", { className: "text-sm text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "error.footer.text" }) }),
               parsed.id && /* @__PURE__ */ jsxs48("p", { className: "text-sm text-interface-foreground-default-secondary", children: [
                 "ID: ",
-                /* @__PURE__ */ jsx106("code", { children: parsed.id })
+                /* @__PURE__ */ jsx115("code", { children: parsed.id })
               ] }),
               /* @__PURE__ */ jsxs48("p", { className: "text-sm text-interface-foreground-default-secondary", children: [
                 "Time: ",
-                /* @__PURE__ */ jsx106("code", { children: (_i = parsed.timestamp) == null ? void 0 : _i.toUTCString() })
+                /* @__PURE__ */ jsx115("code", { children: (_i = parsed.timestamp) == null ? void 0 : _i.toUTCString() })
               ] }),
               /* @__PURE__ */ jsxs48("p", { className: "text-sm text-interface-foreground-default-secondary", children: [
                 "Message:",
                 " ",
-                /* @__PURE__ */ jsx106("code", { "data-testid": "ory/screen/error/message", children: parsed.reason })
+                /* @__PURE__ */ jsx115("code", { "data-testid": "ory/screen/error/message", children: parsed.reason })
               ] }),
-              /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
+              /* @__PURE__ */ jsx115("div", { children: /* @__PURE__ */ jsx115(
                 "button",
                 {
                   className: "text-interface-foreground-default-primary underline",
@@ -28662,7 +29014,7 @@ ${parsed.reason ? `Message: ${parsed.reason}` : ""}
 `;
                     void navigator.clipboard.writeText(text);
                   },
-                  children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "error.footer.copy" })
+                  children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "error.footer.copy" })
                 }
               ) })
             ] })
@@ -28675,24 +29027,24 @@ ${parsed.reason ? `Message: ${parsed.reason}` : ""}
 function LoggedInActions() {
   const config = useOryConfiguration8();
   const { logoutFlow } = useClientLogout(config);
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx115(
     "a",
     {
       href: logoutFlow == null ? void 0 : logoutFlow.logout_url,
       className: "text-interface-foreground-default-primary underline",
-      children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "login.logout-button" })
+      children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "login.logout-button" })
     }
   );
 }
 function GoBackButton() {
   const config = useOryConfiguration8();
   if ("default_redirect_url" in config.project) {
-    return /* @__PURE__ */ jsx106(
+    return /* @__PURE__ */ jsx115(
       "a",
       {
         className: "text-interface-foreground-default-primary underline",
         href: config.project.default_redirect_url,
-        children: /* @__PURE__ */ jsx106(FormattedMessage, { id: "error.action.go-back" })
+        children: /* @__PURE__ */ jsx115(FormattedMessage, { id: "error.action.go-back" })
       }
     );
   }
@@ -28701,18 +29053,18 @@ function GoBackButton() {
 function ErrorLogo() {
   const { project } = useOryConfiguration8();
   if (project.logo_light_url) {
-    return /* @__PURE__ */ jsx106("img", { src: project.logo_light_url, className: "h-full", alt: "Logo" });
+    return /* @__PURE__ */ jsx115("img", { src: project.logo_light_url, className: "h-full", alt: "Logo" });
   }
-  return /* @__PURE__ */ jsx106("h1", { className: "text-xl leading-normal font-semibold text-interface-foreground-default-primary", children: project.name });
+  return /* @__PURE__ */ jsx115("h1", { className: "text-xl leading-normal font-semibold text-interface-foreground-default-primary", children: project.name });
 }
 
 // src/theme/default/flows/login.tsx
-import { FlowType as FlowType19 } from "@ory/client-fetch";
+import { FlowType as FlowType20 } from "@ory/client-fetch";
 import {
   OryProvider,
   OrySelfServiceFlowCard as OrySelfServiceFlowCard2
 } from "@ory/elements-react";
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 function Login({
   flow,
   config,
@@ -28720,25 +29072,25 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx116(
     OryProvider,
     {
       config,
       flow,
-      flowType: FlowType19.Login,
+      flowType: FlowType20.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx107(OrySelfServiceFlowCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx116(OrySelfServiceFlowCard2, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
-import { FlowType as FlowType20 } from "@ory/client-fetch";
+import { FlowType as FlowType21 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider2,
   OrySelfServiceFlowCard as OrySelfServiceFlowCard3
 } from "@ory/elements-react";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 function Recovery({
   flow,
   config,
@@ -28746,25 +29098,25 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx117(
     OryProvider2,
     {
       config,
       flow,
-      flowType: FlowType20.Recovery,
+      flowType: FlowType21.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx108(OrySelfServiceFlowCard3, {})
+      children: children != null ? children : /* @__PURE__ */ jsx117(OrySelfServiceFlowCard3, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
-import { FlowType as FlowType21 } from "@ory/client-fetch";
+import { FlowType as FlowType22 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider3,
   OrySelfServiceFlowCard as OrySelfServiceFlowCard4
 } from "@ory/elements-react";
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx118 } from "react/jsx-runtime";
 function Registration({
   flow,
   children,
@@ -28772,26 +29124,26 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx118(
     OryProvider3,
     {
       config,
       flow,
-      flowType: FlowType21.Registration,
+      flowType: FlowType22.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx109(OrySelfServiceFlowCard4, {})
+      children: children != null ? children : /* @__PURE__ */ jsx118(OrySelfServiceFlowCard4, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
-import { FlowType as FlowType22 } from "@ory/client-fetch";
+import { FlowType as FlowType23 } from "@ory/client-fetch";
 import {
   OryPageHeader,
   OryProvider as OryProvider4,
   OrySettingsCard as OrySettingsCard2
 } from "@ory/elements-react";
-import { jsx as jsx110, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs49 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -28801,28 +29153,28 @@ function Settings({
   ...rest
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx119(
     OryProvider4,
     {
       config,
       flow,
-      flowType: FlowType22.Settings,
+      flowType: FlowType23.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx110("div", { className: cn("ory-elements", className), ...rest, children: /* @__PURE__ */ jsxs49("div", { className: "flex flex-col items-center justify-start gap-8 pb-12 font-sans-default", children: [
-        /* @__PURE__ */ jsx110(OryPageHeader, {}),
-        /* @__PURE__ */ jsx110(OrySettingsCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx119("div", { className: cn("ory-elements", className), ...rest, children: /* @__PURE__ */ jsxs49("div", { className: "flex flex-col items-center justify-start gap-8 pb-12 font-sans-default", children: [
+        /* @__PURE__ */ jsx119(OryPageHeader, {}),
+        /* @__PURE__ */ jsx119(OrySettingsCard2, {})
       ] }) })
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
-import { FlowType as FlowType23 } from "@ory/client-fetch";
+import { FlowType as FlowType24 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider5,
   OrySelfServiceFlowCard as OrySelfServiceFlowCard5
 } from "@ory/elements-react";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 function Verification({
   flow,
   config,
@@ -28830,20 +29182,20 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx120(
     OryProvider5,
     {
       config,
       flow,
-      flowType: FlowType23.Verification,
+      flowType: FlowType24.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx111(OrySelfServiceFlowCard5, {})
+      children: children != null ? children : /* @__PURE__ */ jsx120(OrySelfServiceFlowCard5, {})
     }
   );
 }
 
 // src/theme/default/flows/consent.tsx
-import { FlowType as FlowType24 } from "@ory/client-fetch";
+import { FlowType as FlowType25 } from "@ory/client-fetch";
 import {
   OryConsentCard as OryConsentCard2,
   OryProvider as OryProvider6
@@ -28990,7 +29342,7 @@ function challengeNode(challenge) {
 }
 
 // src/theme/default/flows/consent.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 function Consent({
   consentChallenge,
   session,
@@ -29007,14 +29359,14 @@ function Consent({
     formActionUrl,
     session
   );
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx121(
     OryProvider6,
     {
       config,
       flow,
-      flowType: FlowType24.OAuth2Consent,
+      flowType: FlowType25.OAuth2Consent,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx112(OryConsentCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx121(OryConsentCard2, {})
     }
   );
 }