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

package/dist/theme/default/index.js

@@ -187,7 +187,10 @@ function RegistrationCardFooter() {
   function handleScreenSelection() {
     setValue("method", "profile");
     if (screenSelectionNode) {
-      setValue("screen", "credential-selection");
+      setValue(
+        screenSelectionNode.attributes.name,
+        screenSelectionNode.attributes.value
+      );
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: screenSelectionNode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -195,6 +198,8 @@ function RegistrationCardFooter() {
     {
       className: "font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover",
       type: "submit",
+      name: screenSelectionNode.attributes.name,
+      value: screenSelectionNode.attributes.value,
       onClick: handleScreenSelection,
       children: intl.formatMessage({
         id: "card.footer.select-another-method",
@@ -586,6 +591,10 @@ var import_client_fetch4 = require("@ory/client-fetch");
 
 // src/theme/default/components/form/social.tsx
 var import_elements_react5 = require("@ory/elements-react");
+var import_react = require("react");
+var import_react_hook_form2 = require("react-hook-form");
+var import_react_intl3 = require("react-intl");
+var import_usehooks_ts = require("usehooks-ts");
 
 // src/theme/default/provider-logos/apple.svg
 var React4 = __toESM(require("react"));
@@ -775,11 +784,6 @@ var logos = {
 };
 var provider_logos_default = logos;
 
-// src/theme/default/components/form/social.tsx
-var import_react_intl3 = require("react-intl");
-var import_react = require("react");
-var import_react_hook_form2 = require("react-hook-form");
-
 // src/theme/default/components/form/spinner.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function Spinner({ className }) {
@@ -845,7 +849,7 @@ function DefaultButtonSocial({
   const {
     flow: { ui }
   } = (0, import_elements_react5.useOryFlow)();
-  const [clicked, setClicked] = (0, import_react.useState)(false);
+  const [clicked, setClicked] = (0, import_usehooks_ts.useDebounceValue)(false, 100);
   const intl = (0, import_react_intl3.useIntl)();
   const {
     formState: { isSubmitting }
@@ -855,14 +859,14 @@ function DefaultButtonSocial({
   const showLabel = _showLabel != null ? _showLabel : oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0;
   const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
   const localOnClick = () => {
-    setClicked(true);
     onClick == null ? void 0 : onClick();
+    setClicked(true);
   };
   (0, import_react.useEffect)(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
-  }, [isSubmitting]);
+  }, [isSubmitting, setClicked]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "button",
     {
@@ -877,7 +881,10 @@ function DefaultButtonSocial({
       disabled: isSubmitting,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex aspect-square items-center justify-center rounded-[999px] border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Spinner, { className: "size-5" }) }),
-        showLabel && node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "grow text-left font-medium leading-none text-button-social-foreground-default", children: (0, import_elements_react5.uiTextToFormattedMessage)(node.meta.label, intl) }) : null
+        showLabel && node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "grow text-center font-medium leading-none text-button-social-foreground-default", children: (0, import_elements_react5.uiTextToFormattedMessage)(node.meta.label, intl) }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "size-5 block" })
+        ] }) : null
       ]
     }
   );
@@ -1086,6 +1093,7 @@ var DefaultButton = ({
     autocomplete: _ignoredAutocomplete,
     label: _ignoredLabel,
     node_type: _ignoredNodeType,
+    maxlength: _ignoredMaxLength,
     // End of skipped attributes
     ...rest
   } = attributes;
@@ -1623,17 +1631,31 @@ var import_jsx_runtime45 = require("react/jsx-runtime");
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = (0, import_react_intl12.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "pre",
-      {
-        "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" })
-      },
-      index
-    ))
-  ] });
+  const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
+  if (lookup) {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
+      lookup.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        "pre",
+        {
+          "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" })
+        },
+        index
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "p",
+    {
+      "data-testid": `ory/form/node/text/${attributes.id}/label`,
+      id: attributes.id,
+      children: [
+        node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { children: (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) }) : null,
+        attributes.text ? (0, import_elements_react13.uiTextToFormattedMessage)(attributes.text, intl) : ""
+      ]
+    }
+  ) });
 }
 
 // src/theme/default/components/generic/page-header.tsx
@@ -1863,6 +1885,7 @@ var DefaultPageHeader = (_props) => {
 // src/theme/default/components/settings/settings-oidc.tsx
 var import_react7 = require("react");
 var import_react_hook_form8 = require("react-hook-form");
+var import_usehooks_ts2 = require("usehooks-ts");
 
 // src/theme/default/assets/icons/trash.svg
 var React26 = __toESM(require("react"));
@@ -1906,27 +1929,25 @@ function DefaultSettingsOidc({
 }
 function UnlinkRow({ button }) {
   var _a, _b;
-  const [clicked, setClicked] = (0, import_react7.useState)(false);
+  const [clicked, setClicked] = (0, import_usehooks_ts2.useDebounceValue)(false, 100);
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form8.useFormContext)();
   const attrs = button.attributes;
   const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
-  const Logo = attrs.value in provider_logos_default ? provider_logos_default[attrs.value] : provider_logos_default.generic;
+  const Logo = provider_logos_default[attrs.value.split("-")[0]];
   const localOnClick = () => {
     button.onClick();
-    setTimeout(() => {
-      setClicked(true);
-    }, 100);
+    setClicked(true);
   };
   (0, import_react7.useEffect)(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
-  }, [isSubmitting]);
+  }, [isSubmitting, setClicked]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Logo, { size: 32 }),
+      Logo ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Logo, { size: 32 }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(provider_logos_default.generic, { size: 32 }),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -1961,11 +1982,11 @@ function DefaultSettingsPasskey({
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form9.useFormContext)();
-  const { Node } = (0, import_elements_react16.useComponents)();
+  const { Node: Node2 } = (0, import_elements_react16.useComponents)();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      Node.Button,
+      Node2.Button,
       {
         node: triggerButton,
         attributes: triggerButton.attributes,
@@ -2175,7 +2196,7 @@ function DefaultSettingsTotp({
   totpUnlink,
   onUnlink
 }) {
-  const { Node, Card } = (0, import_elements_react17.useComponents)();
+  const { Node: Node2, Card } = (0, import_elements_react17.useComponents)();
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form11.useFormContext)();
@@ -2215,7 +2236,7 @@ function DefaultSettingsTotp({
     return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DefaultHorizontalDivider, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-        Node.Image,
+        Node2.Image,
         {
           node: totpImage,
           attributes: {
@@ -2225,12 +2246,12 @@ function DefaultSettingsTotp({
       ) }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          Node.Label,
+          Node2.Label,
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
             children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-              Node.Input,
+              Node2.Input,
               {
                 node: totpSecret,
                 attributes: {
@@ -2245,12 +2266,12 @@ function DefaultSettingsTotp({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          Node.Label,
+          Node2.Label,
           {
             attributes: totpInput.attributes,
             node: totpInput,
             children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-              Node.CodeInput,
+              Node2.CodeInput,
               {
                 node: totpInput,
                 attributes: totpInput.attributes
@@ -2286,17 +2307,17 @@ function DefaultSettingsWebauthn({
   const {
     formState: { isSubmitting }
   } = (0, import_react_hook_form12.useFormContext)();
-  const { Node, Card } = (0, import_elements_react18.useComponents)();
+  const { Node: Node2, Card } = (0, import_elements_react18.useComponents)();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        Node.Label,
+        Node2.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
           children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            Node.Input,
+            Node2.Input,
             {
               node: nameInput,
               attributes: nameInput.attributes
@@ -2305,7 +2326,7 @@ function DefaultSettingsWebauthn({
         }
       ) }),
       triggerButton ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        Node.Button,
+        Node2.Button,
         {
           node: triggerButton,
           attributes: triggerButton.attributes,
@@ -2378,9 +2399,369 @@ function DefaultAuthMethodListContainer({
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "grid grid-cols-1 gap-2", children });
 }
 
+// src/theme/default/components/form/captcha.tsx
+var import_client_fetch30 = require("@ory/client-fetch");
+var import_react_turnstile = require("@marsidev/react-turnstile");
+var import_react13 = require("react");
+var import_react_hook_form25 = require("react-hook-form");
+
+// src/context/component.tsx
+var import_client_fetch12 = require("@ory/client-fetch");
+var import_react8 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var ComponentContext = (0, import_react8.createContext)({
+  components: null,
+  // fine because we throw an error if it's not provided
+  nodeSorter: () => 0,
+  groupSorter: () => 0
+});
+function useComponents7() {
+  const ctx = (0, import_react8.useContext)(ComponentContext);
+  if (!ctx) {
+    throw new Error("useComponents must be used within a ComponentProvider");
+  }
+  return ctx.components;
+}
+var defaultGroupOrder = [
+  import_client_fetch12.UiNodeGroupEnum.Default,
+  import_client_fetch12.UiNodeGroupEnum.Profile,
+  import_client_fetch12.UiNodeGroupEnum.Password,
+  import_client_fetch12.UiNodeGroupEnum.Oidc,
+  import_client_fetch12.UiNodeGroupEnum.Code,
+  import_client_fetch12.UiNodeGroupEnum.LookupSecret,
+  import_client_fetch12.UiNodeGroupEnum.Passkey,
+  import_client_fetch12.UiNodeGroupEnum.Webauthn,
+  import_client_fetch12.UiNodeGroupEnum.Totp
+];
+
+// src/context/flow-context.tsx
+var import_react11 = require("react");
+
+// src/context/form-state.ts
+var import_client_fetch15 = require("@ory/client-fetch");
+var import_react10 = require("react");
+
+// src/components/card/card-two-step.utils.ts
+var import_client_fetch13 = require("@ory/client-fetch");
+
+// src/util/ui/index.ts
+var import_client_fetch14 = require("@ory/client-fetch");
+var import_react9 = require("react");
+function triggerToWindowCall(trigger) {
+  if (!trigger) {
+    return;
+  }
+  const fn = triggerToFunction(trigger);
+  if (fn) {
+    fn();
+    return;
+  }
+  let i = 0;
+  const ms = 100;
+  const interval = setInterval(() => {
+    i++;
+    if (i > 100) {
+      clearInterval(interval);
+      throw new Error(
+        "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console."
+      );
+    }
+    const fn2 = triggerToFunction(trigger);
+    if (fn2) {
+      clearInterval(interval);
+      return fn2();
+    }
+  }, ms);
+  return;
+}
+function triggerToFunction(trigger) {
+  if (typeof window === "undefined") {
+    console.debug(
+      "The Ory SDK is missing a required function: window is undefined."
+    );
+    return void 0;
+  }
+  const typedWindow = window;
+  if (!(trigger in typedWindow) || !typedWindow[trigger]) {
+    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
+    return void 0;
+  }
+  const triggerFn = typedWindow[trigger];
+  if (typeof triggerFn !== "function") {
+    console.debug(
+      `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
+    );
+    return void 0;
+  }
+  return triggerFn;
+}
+
+// src/context/flow-context.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var OryFlowContext = (0, import_react11.createContext)(null);
+
+// src/context/intl-context.tsx
+var import_react_intl20 = require("react-intl");
+
+// src/components/card/header.tsx
+var import_jsx_runtime67 = require("react/jsx-runtime");
+
+// src/components/form/form-provider.tsx
+var import_client_fetch18 = require("@ory/client-fetch");
+var import_react_hook_form13 = require("react-hook-form");
+
+// src/components/form/form-helpers.ts
+var import_client_fetch16 = require("@ory/client-fetch");
+
+// src/components/form/form-resolver.ts
+var import_client_fetch17 = require("@ory/client-fetch");
+
+// src/components/form/form-provider.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+
+// src/components/card/card.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+
+// src/components/card/footer.tsx
+var import_jsx_runtime70 = require("react/jsx-runtime");
+
+// src/components/card/content.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+
+// src/components/card/card-two-step.tsx
+var import_client_fetch27 = require("@ory/client-fetch");
+var import_react_hook_form17 = require("react-hook-form");
+
+// src/components/form/form.tsx
+var import_client_fetch25 = require("@ory/client-fetch");
+var import_react_hook_form15 = require("react-hook-form");
+var import_react_intl13 = require("react-intl");
+
+// src/components/form/useOryFormSubmit.ts
+var import_client_fetch24 = require("@ory/client-fetch");
+var import_react_hook_form14 = require("react-hook-form");
+
+// src/util/onSubmitLogin.ts
+var import_client_fetch19 = require("@ory/client-fetch");
+
+// src/util/onSubmitRecovery.ts
+var import_client_fetch20 = require("@ory/client-fetch");
+
+// src/util/onSubmitRegistration.ts
+var import_client_fetch21 = require("@ory/client-fetch");
+
+// src/util/onSubmitSettings.ts
+var import_client_fetch22 = require("@ory/client-fetch");
+
+// src/util/onSubmitVerification.ts
+var import_client_fetch23 = require("@ory/client-fetch");
+
+// src/components/form/form.tsx
+var import_jsx_runtime72 = require("react/jsx-runtime");
+
+// src/components/form/messages.tsx
+var import_jsx_runtime73 = require("react/jsx-runtime");
+
+// src/components/form/nodes/node.tsx
+var import_client_fetch26 = require("@ory/client-fetch");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+
+// src/components/form/social.tsx
+var import_react_hook_form16 = require("react-hook-form");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+
+// src/components/card/card-two-step.tsx
+var import_jsx_runtime76 = require("react/jsx-runtime");
+
+// src/components/form/groups.tsx
+var import_jsx_runtime77 = require("react/jsx-runtime");
+
+// src/components/form/section.tsx
+var import_react_hook_form18 = require("react-hook-form");
+var import_jsx_runtime78 = require("react/jsx-runtime");
+
+// src/components/generic/divider.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
+
+// src/components/generic/page-header.tsx
+var import_jsx_runtime80 = require("react/jsx-runtime");
+
+// src/components/settings/settings-card.tsx
+var import_client_fetch28 = require("@ory/client-fetch");
+var import_react_intl19 = require("react-intl");
+
+// src/components/settings/oidc-settings.tsx
+var import_react_intl14 = require("react-intl");
+var import_react_hook_form19 = require("react-hook-form");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+
+// src/components/settings/passkey-settings.tsx
+var import_react_hook_form20 = require("react-hook-form");
+var import_react_intl15 = require("react-intl");
+var import_jsx_runtime82 = require("react/jsx-runtime");
+
+// src/components/settings/recovery-codes-settings.tsx
+var import_react_intl16 = require("react-intl");
+var import_react_hook_form21 = require("react-hook-form");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+
+// src/components/settings/totp-settings.tsx
+var import_react_hook_form22 = require("react-hook-form");
+var import_react_intl17 = require("react-intl");
+var import_jsx_runtime84 = require("react/jsx-runtime");
+
+// src/components/settings/webauthn-settings.tsx
+var import_react_hook_form23 = require("react-hook-form");
+var import_react_intl18 = require("react-intl");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+
+// src/components/settings/settings-card.tsx
+var import_jsx_runtime86 = require("react/jsx-runtime");
+
+// src/context/intl-context.tsx
+var import_jsx_runtime87 = require("react/jsx-runtime");
+
+// src/context/provider.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
+
+// src/components/form/nodes/input.tsx
+var import_client_fetch29 = require("@ory/client-fetch");
+var import_react12 = require("react");
+var import_react_hook_form24 = require("react-hook-form");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var NodeInput = ({
+  node,
+  attributes
+}) => {
+  var _a;
+  const { Node: Node2 } = useComponents7();
+  const { setValue } = (0, import_react_hook_form24.useFormContext)();
+  const {
+    onloadTrigger,
+    onclickTrigger,
+    // These properties do not exist on input fields so we remove them (as we already have handled them).
+    onclick: _ignoredOnclick,
+    onload: _ignoredOnload,
+    //
+    ...attrs
+  } = attributes;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
+  const setFormValue = () => {
+    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
+      setValue(attrs.name, attrs.value);
+    }
+  };
+  const hasRun = (0, import_react12.useRef)(false);
+  (0, import_react12.useEffect)(
+    () => {
+      setFormValue();
+      if (!hasRun.current && onloadTrigger) {
+        hasRun.current = true;
+        triggerToWindowCall(onloadTrigger);
+      }
+    },
+    // TODO(jonas): make sure onloadTrigger is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
+    []
+  );
+  const handleClick = () => {
+    setFormValue();
+    if (onclickTrigger) {
+      triggerToWindowCall(onclickTrigger);
+    }
+  };
+  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
+  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
+  switch (attributes.type) {
+    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Submit:
+    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Button:
+      if (isSocial) {
+        return null;
+      }
+      if (isResendNode || isScreenSelectionNode) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Node2.Button, { attributes: attrs, node, onClick: handleClick })
+        }
+      );
+    case import_client_fetch29.UiNodeInputAttributesTypeEnum.DatetimeLocal:
+      throw new Error("Not implemented");
+    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Checkbox:
+      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
+        }
+      );
+    case import_client_fetch29.UiNodeInputAttributesTypeEnum.Hidden:
+      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Node2.Input, { attributes: attrs, node, onClick: handleClick });
+    default:
+      if (isPinCodeInput) {
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          Node2.CodeInput,
+          {
+            attributes: attrs,
+            node,
+            onClick: handleClick
+          }
+        ) });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
+  }
+};
+
+// src/theme/default/components/form/captcha.tsx
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var DefaultCaptcha = ({ node }) => {
+  const { setValue } = (0, import_react_hook_form25.useFormContext)();
+  const ref = (0, import_react13.useRef)();
+  const nodes = [];
+  if ((0, import_client_fetch30.isUiNodeInputAttributes)(node.attributes)) {
+    if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
+      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NodeInput, { node, attributes: node.attributes }, 1));
+    }
+  }
+  if ((0, import_client_fetch30.isUiNodeInputAttributes)(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
+    const options = JSON.parse(node.attributes.value);
+    nodes.push(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        import_react_turnstile.Turnstile,
+        {
+          ref,
+          siteKey: options.sitekey,
+          options: {
+            action: options.action,
+            size: "flexible",
+            theme: options.theme,
+            responseField: false,
+            responseFieldName: options.response_field_name
+          },
+          onExpire: () => {
+            var _a;
+            return (_a = ref.current) == null ? void 0 : _a.reset();
+          },
+          onSuccess: (token) => {
+            setValue(options.response_field_name, token);
+          }
+        },
+        2
+      )
+    );
+  }
+  return nodes;
+};
+
 // src/theme/default/components/default-components.tsx
 function getOryComponents(overrides) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja;
   return {
     Card: {
       Root: (_b = (_a = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _a.Root) != null ? _b : DefaultCard,
@@ -2404,41 +2785,42 @@ function getOryComponents(overrides) {
       Label: (_H = (_G = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _G.Label) != null ? _H : DefaultLabel,
       Checkbox: (_J = (_I = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _I.Checkbox) != null ? _J : DefaultCheckbox,
       Text: (_L = (_K = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _K.Text) != null ? _L : DefaultText,
-      Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton
+      Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton,
+      Captcha: (_P = (_O = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _O.Captcha) != null ? _P : DefaultCaptcha
     },
     Form: {
-      Root: (_P = (_O = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _O.Root) != null ? _P : DefaultFormContainer,
-      Group: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Group) != null ? _R : DefaultGroupContainer,
-      OidcRoot: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.OidcRoot) != null ? _T : DefaultSocialButtonContainer,
-      RecoveryCodesSettings: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.RecoveryCodesSettings) != null ? _V : DefaultSettingsRecoveryCodes,
-      TotpSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.TotpSettings) != null ? _X : DefaultSettingsTotp,
-      OidcSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.OidcSettings) != null ? _Z : DefaultSettingsOidc,
-      WebauthnSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.WebauthnSettings) != null ? _$ : DefaultSettingsWebauthn,
-      PasskeySettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.PasskeySettings) != null ? _ba : DefaultSettingsPasskey
+      Root: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Root) != null ? _R : DefaultFormContainer,
+      Group: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.Group) != null ? _T : DefaultGroupContainer,
+      OidcRoot: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.OidcRoot) != null ? _V : DefaultSocialButtonContainer,
+      RecoveryCodesSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.RecoveryCodesSettings) != null ? _X : DefaultSettingsRecoveryCodes,
+      TotpSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.TotpSettings) != null ? _Z : DefaultSettingsTotp,
+      OidcSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.OidcSettings) != null ? _$ : DefaultSettingsOidc,
+      WebauthnSettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.WebauthnSettings) != null ? _ba : DefaultSettingsWebauthn,
+      PasskeySettings: (_da = (_ca = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _ca.PasskeySettings) != null ? _da : DefaultSettingsPasskey
     },
     Message: {
-      Root: (_da = (_ca = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ca.Root) != null ? _da : DefaultMessageContainer,
-      Content: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Content) != null ? _fa : DefaultMessage
+      Root: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Root) != null ? _fa : DefaultMessageContainer,
+      Content: (_ha = (_ga = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ga.Content) != null ? _ha : DefaultMessage
     },
     Page: {
-      Header: (_ha = (_ga = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ga.Header) != null ? _ha : DefaultPageHeader
+      Header: (_ja = (_ia = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ia.Header) != null ? _ja : DefaultPageHeader
     }
   };
 }
 
 // src/theme/default/flows/error.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 function Error2({
   error,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
-var import_client_fetch12 = require("@ory/client-fetch");
+var import_client_fetch31 = require("@ory/client-fetch");
 var import_elements_react19 = require("@ory/elements-react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 function Login({
   flow,
   config,
@@ -2446,22 +2828,22 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     import_elements_react19.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch12.FlowType.Login,
+      flowType: import_client_fetch31.FlowType.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_elements_react19.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_elements_react19.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
-var import_client_fetch13 = require("@ory/client-fetch");
+var import_client_fetch32 = require("@ory/client-fetch");
 var import_elements_react20 = require("@ory/elements-react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 function Recovery({
   flow,
   config,
@@ -2469,22 +2851,22 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     import_elements_react20.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch13.FlowType.Recovery,
+      flowType: import_client_fetch32.FlowType.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_elements_react20.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_elements_react20.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
-var import_client_fetch14 = require("@ory/client-fetch");
+var import_client_fetch33 = require("@ory/client-fetch");
 var import_elements_react21 = require("@ory/elements-react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 function Registration({
   flow,
   children,
@@ -2492,22 +2874,22 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     import_elements_react21.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch14.FlowType.Registration,
+      flowType: import_client_fetch33.FlowType.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_elements_react21.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_elements_react21.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
-var import_client_fetch15 = require("@ory/client-fetch");
+var import_client_fetch34 = require("@ory/client-fetch");
 var import_elements_react22 = require("@ory/elements-react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 function Settings({
   flow,
   config,
@@ -2515,25 +2897,25 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_elements_react22.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch15.FlowType.Settings,
+      flowType: import_client_fetch34.FlowType.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_elements_react22.HeadlessPageHeader, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_elements_react22.OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_elements_react22.HeadlessPageHeader, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_elements_react22.OrySettingsCard, {})
       ] })
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
-var import_client_fetch16 = require("@ory/client-fetch");
+var import_client_fetch35 = require("@ory/client-fetch");
 var import_elements_react23 = require("@ory/elements-react");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 function Verification({
   flow,
   config,
@@ -2541,14 +2923,14 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     import_elements_react23.OryProvider,
     {
       config,
       flow,
-      flowType: import_client_fetch16.FlowType.Verification,
+      flowType: import_client_fetch35.FlowType.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_elements_react23.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_elements_react23.OryTwoStepCard, {})
     }
   );
 }