@ory/elements-react 1.0.0-next.17 → 1.0.0-next.18

package/dist/client/useSession.js

@@ -19,61 +19,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useSession_exports = {};
 __export(useSession_exports, {
-  sessionStore: () => sessionStore,
   useSession: () => useSession
 });
 module.exports = __toCommonJS(useSession_exports);
 var import_react = require("react");
-var import_zustand = require("zustand");
-var import_middleware = require("zustand/middleware");
-var import_frontendClient = require("./frontendClient");
-const sessionStore = (0, import_zustand.create)()(
-  (0, import_middleware.subscribeWithSelector)((set) => ({
-    isLoading: false,
-    setIsLoading: (isLoading) => set({ isLoading }),
-    session: void 0,
-    setSession: (session) => set({ session }),
-    error: void 0,
-    setError: (error) => set({ error })
-  }))
-);
-const useSession = (config) => {
-  const store = (0, import_zustand.useStore)(sessionStore);
-  const fetchSession = (0, import_react.useCallback)(async () => {
-    var _a;
-    const { session, isLoading, setSession, setIsLoading, setError } = sessionStore.getState();
-    if (!!session || isLoading) {
-      return;
-    }
-    setIsLoading(true);
-    try {
-      const sessionData = await (0, import_frontendClient.frontendClient)(
-        (_a = config == null ? void 0 : config.sdk.url) != null ? _a : window.location.protocol + "//" + window.location.host
-      ).toSession();
-      setSession(sessionData);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Unknown error occurred");
-      if (!(config == null ? void 0 : config.sdk.url)) {
-        console.error(
-          "Could not fetch session. Make sure you have set the SDK URL in the config."
-        );
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [config == null ? void 0 : config.sdk.url]);
-  (0, import_react.useEffect)(() => {
-    void fetchSession();
-  }, [fetchSession]);
-  return {
-    session: store.session,
-    error: store.error,
-    isLoading: store.isLoading
-  };
-};
+var import_session_provider = require("./session-provider");
+function useSession() {
+  if (!import_session_provider.SessionContext) {
+    throw new Error("[Ory/Elements] useSession must be used on the client");
+  }
+  return (0, import_react.useContext)(import_session_provider.SessionContext);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  sessionStore,
   useSession
 });
 //# sourceMappingURL=useSession.js.map

package/dist/client/useSession.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/useSession.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\n\nimport { Session } from \"@ory/client-fetch\"\nimport { useCallback, useEffect } from \"react\"\nimport { create, useStore } from \"zustand\"\nimport { subscribeWithSelector } from \"zustand/middleware\"\nimport { frontendClient } from \"./frontendClient\"\n\ntype SessionStore = {\n  setIsLoading: (loading: boolean) => void\n  setSession: (session: Session) => void\n  isLoading: boolean\n  session: Session | undefined\n  error: string | undefined\n  setError: (error: string | undefined) => void\n}\n\nexport const sessionStore = create<SessionStore>()(\n  subscribeWithSelector((set) => ({\n    isLoading: false,\n    setIsLoading: (isLoading: boolean) => set({ isLoading }),\n    session: undefined,\n    setSession: (session: Session) => set({ session }),\n    error: undefined,\n    setError: (error: string | undefined) => set({ error }),\n  })),\n)\n\n/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const { session, error, isLoading } = useSession()\n * ```\n *\n * @returns The current session, error and loading state.\n */\nexport const useSession = (config?: { sdk: { url: string } }) => {\n  const store = useStore(sessionStore)\n\n  const fetchSession = useCallback(async () => {\n    const { session, isLoading, setSession, setIsLoading, setError } =\n      sessionStore.getState()\n\n    if (!!session || isLoading) {\n      return\n    }\n\n    setIsLoading(true)\n\n    try {\n      const sessionData = await frontendClient(\n        config?.sdk.url ??\n          window.location.protocol + \"//\" + window.location.host,\n      ).toSession()\n      setSession(sessionData)\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Unknown error occurred\")\n      if (!config?.sdk.url) {\n        console.error(\n          \"Could not fetch session. Make sure you have set the SDK URL in the config.\",\n        )\n      }\n    } finally {\n      setIsLoading(false)\n    }\n  }, [config?.sdk.url])\n\n  useEffect(() => {\n    void fetchSession()\n  }, [fetchSession])\n\n  return {\n    session: store.session,\n    error: store.error,\n    isLoading: store.isLoading,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,mBAAuC;AACvC,qBAAiC;AACjC,wBAAsC;AACtC,4BAA+B;AAWxB,MAAM,mBAAe,uBAAqB;AAAA,MAC/C,yCAAsB,CAAC,SAAS;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc,CAAC,cAAuB,IAAI,EAAE,UAAU,CAAC;AAAA,IACvD,SAAS;AAAA,IACT,YAAY,CAAC,YAAqB,IAAI,EAAE,QAAQ,CAAC;AAAA,IACjD,OAAO;AAAA,IACP,UAAU,CAAC,UAA8B,IAAI,EAAE,MAAM,CAAC;AAAA,EACxD,EAAE;AACJ;AAYO,MAAM,aAAa,CAAC,WAAsC;AAC/D,QAAM,YAAQ,yBAAS,YAAY;AAEnC,QAAM,mBAAe,0BAAY,YAAY;AA3C/C;AA4CI,UAAM,EAAE,SAAS,WAAW,YAAY,cAAc,SAAS,IAC7D,aAAa,SAAS;AAExB,QAAI,CAAC,CAAC,WAAW,WAAW;AAC1B;AAAA,IACF;AAEA,iBAAa,IAAI;AAEjB,QAAI;AACF,YAAM,cAAc,UAAM;AAAA,SACxB,sCAAQ,IAAI,QAAZ,YACE,OAAO,SAAS,WAAW,OAAO,OAAO,SAAS;AAAA,MACtD,EAAE,UAAU;AACZ,iBAAW,WAAW;AAAA,IACxB,SAAS,GAAG;AACV,eAAS,aAAa,QAAQ,EAAE,UAAU,wBAAwB;AAClE,UAAI,EAAC,iCAAQ,IAAI,MAAK;AACpB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,iCAAQ,IAAI,GAAG,CAAC;AAEpB,8BAAU,MAAM;AACd,SAAK,aAAa;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,OAAO,MAAM;AAAA,IACb,WAAW,MAAM;AAAA,EACnB;AACF;","names":[]}
+{"version":3,"sources":["../../src/client/useSession.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\n\nimport { useContext } from \"react\"\nimport { SessionContext } from \"./session-provider\"\n\n/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const session = useSession()\n *\n * if (session.state == \"loading\") {\n *  return <div>Loading...</div>\n * }\n *\n * if (session.state == \"authenticated\") {\n *  return <div>Session: {session.session.id}</div>\n * }\n * ```\n *\n * :::note\n * This is a client-side hook and must be used within a React component.\n * On the server, you can use the getServerSession function from `@ory/nextjs`\n * and hydrate SessionProvider with the session.\n * :::\n *\n * @returns The current session, and error or loading state.\n */\n\nexport function useSession() {\n  if (!SessionContext) {\n    throw new Error(\"[Ory/Elements] useSession must be used on the client\")\n  }\n  return useContext(SessionContext)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAA2B;AAC3B,8BAA+B;AA2BxB,SAAS,aAAa;AAC3B,MAAI,CAAC,wCAAgB;AACnB,UAAM,IAAI,MAAM,sDAAsD;AAAA,EACxE;AACA,aAAO,yBAAW,sCAAc;AAClC;","names":[]}

package/dist/client/useSession.mjs

@@ -1,54 +1,13 @@
 "use client";
-import { useCallback, useEffect } from "react";
-import { create, useStore } from "zustand";
-import { subscribeWithSelector } from "zustand/middleware";
-import { frontendClient } from "./frontendClient";
-const sessionStore = create()(
-  subscribeWithSelector((set) => ({
-    isLoading: false,
-    setIsLoading: (isLoading) => set({ isLoading }),
-    session: void 0,
-    setSession: (session) => set({ session }),
-    error: void 0,
-    setError: (error) => set({ error })
-  }))
-);
-const useSession = (config) => {
-  const store = useStore(sessionStore);
-  const fetchSession = useCallback(async () => {
-    var _a;
-    const { session, isLoading, setSession, setIsLoading, setError } = sessionStore.getState();
-    if (!!session || isLoading) {
-      return;
-    }
-    setIsLoading(true);
-    try {
-      const sessionData = await frontendClient(
-        (_a = config == null ? void 0 : config.sdk.url) != null ? _a : window.location.protocol + "//" + window.location.host
-      ).toSession();
-      setSession(sessionData);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Unknown error occurred");
-      if (!(config == null ? void 0 : config.sdk.url)) {
-        console.error(
-          "Could not fetch session. Make sure you have set the SDK URL in the config."
-        );
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [config == null ? void 0 : config.sdk.url]);
-  useEffect(() => {
-    void fetchSession();
-  }, [fetchSession]);
-  return {
-    session: store.session,
-    error: store.error,
-    isLoading: store.isLoading
-  };
-};
+import { useContext } from "react";
+import { SessionContext } from "./session-provider";
+function useSession() {
+  if (!SessionContext) {
+    throw new Error("[Ory/Elements] useSession must be used on the client");
+  }
+  return useContext(SessionContext);
+}
 export {
-  sessionStore,
   useSession
 };
 //# sourceMappingURL=useSession.mjs.map

package/dist/client/useSession.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/useSession.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\n\nimport { Session } from \"@ory/client-fetch\"\nimport { useCallback, useEffect } from \"react\"\nimport { create, useStore } from \"zustand\"\nimport { subscribeWithSelector } from \"zustand/middleware\"\nimport { frontendClient } from \"./frontendClient\"\n\ntype SessionStore = {\n  setIsLoading: (loading: boolean) => void\n  setSession: (session: Session) => void\n  isLoading: boolean\n  session: Session | undefined\n  error: string | undefined\n  setError: (error: string | undefined) => void\n}\n\nexport const sessionStore = create<SessionStore>()(\n  subscribeWithSelector((set) => ({\n    isLoading: false,\n    setIsLoading: (isLoading: boolean) => set({ isLoading }),\n    session: undefined,\n    setSession: (session: Session) => set({ session }),\n    error: undefined,\n    setError: (error: string | undefined) => set({ error }),\n  })),\n)\n\n/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const { session, error, isLoading } = useSession()\n * ```\n *\n * @returns The current session, error and loading state.\n */\nexport const useSession = (config?: { sdk: { url: string } }) => {\n  const store = useStore(sessionStore)\n\n  const fetchSession = useCallback(async () => {\n    const { session, isLoading, setSession, setIsLoading, setError } =\n      sessionStore.getState()\n\n    if (!!session || isLoading) {\n      return\n    }\n\n    setIsLoading(true)\n\n    try {\n      const sessionData = await frontendClient(\n        config?.sdk.url ??\n          window.location.protocol + \"//\" + window.location.host,\n      ).toSession()\n      setSession(sessionData)\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Unknown error occurred\")\n      if (!config?.sdk.url) {\n        console.error(\n          \"Could not fetch session. Make sure you have set the SDK URL in the config.\",\n        )\n      }\n    } finally {\n      setIsLoading(false)\n    }\n  }, [config?.sdk.url])\n\n  useEffect(() => {\n    void fetchSession()\n  }, [fetchSession])\n\n  return {\n    session: store.session,\n    error: store.error,\n    isLoading: store.isLoading,\n  }\n}\n"],"mappings":";AAKA,SAAS,aAAa,iBAAiB;AACvC,SAAS,QAAQ,gBAAgB;AACjC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAWxB,MAAM,eAAe,OAAqB;AAAA,EAC/C,sBAAsB,CAAC,SAAS;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc,CAAC,cAAuB,IAAI,EAAE,UAAU,CAAC;AAAA,IACvD,SAAS;AAAA,IACT,YAAY,CAAC,YAAqB,IAAI,EAAE,QAAQ,CAAC;AAAA,IACjD,OAAO;AAAA,IACP,UAAU,CAAC,UAA8B,IAAI,EAAE,MAAM,CAAC;AAAA,EACxD,EAAE;AACJ;AAYO,MAAM,aAAa,CAAC,WAAsC;AAC/D,QAAM,QAAQ,SAAS,YAAY;AAEnC,QAAM,eAAe,YAAY,YAAY;AA3C/C;AA4CI,UAAM,EAAE,SAAS,WAAW,YAAY,cAAc,SAAS,IAC7D,aAAa,SAAS;AAExB,QAAI,CAAC,CAAC,WAAW,WAAW;AAC1B;AAAA,IACF;AAEA,iBAAa,IAAI;AAEjB,QAAI;AACF,YAAM,cAAc,MAAM;AAAA,SACxB,sCAAQ,IAAI,QAAZ,YACE,OAAO,SAAS,WAAW,OAAO,OAAO,SAAS;AAAA,MACtD,EAAE,UAAU;AACZ,iBAAW,WAAW;AAAA,IACxB,SAAS,GAAG;AACV,eAAS,aAAa,QAAQ,EAAE,UAAU,wBAAwB;AAClE,UAAI,EAAC,iCAAQ,IAAI,MAAK;AACpB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,iCAAQ,IAAI,GAAG,CAAC;AAEpB,YAAU,MAAM;AACd,SAAK,aAAa;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,OAAO,MAAM;AAAA,IACb,WAAW,MAAM;AAAA,EACnB;AACF;","names":[]}
+{"version":3,"sources":["../../src/client/useSession.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\n\nimport { useContext } from \"react\"\nimport { SessionContext } from \"./session-provider\"\n\n/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const session = useSession()\n *\n * if (session.state == \"loading\") {\n *  return <div>Loading...</div>\n * }\n *\n * if (session.state == \"authenticated\") {\n *  return <div>Session: {session.session.id}</div>\n * }\n * ```\n *\n * :::note\n * This is a client-side hook and must be used within a React component.\n * On the server, you can use the getServerSession function from `@ory/nextjs`\n * and hydrate SessionProvider with the session.\n * :::\n *\n * @returns The current session, and error or loading state.\n */\n\nexport function useSession() {\n  if (!SessionContext) {\n    throw new Error(\"[Ory/Elements] useSession must be used on the client\")\n  }\n  return useContext(SessionContext)\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AA2BxB,SAAS,aAAa;AAC3B,MAAI,CAAC,gBAAgB;AACnB,UAAM,IAAI,MAAM,sDAAsD;AAAA,EACxE;AACA,SAAO,WAAW,cAAc;AAClC;","names":[]}

package/dist/index.d.mts

@@ -7,8 +7,7 @@ import { IntlShape } from 'react-intl';
 
 declare const buttonStyles: (props?: ({
     intent?: "primary" | "secondary" | null | undefined;
-    size?: "default" | "large" | null | undefined;
-    defaultVariants?: "intent" | "size" | null | undefined;
+    defaultVariants?: "intent" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps<typeof buttonStyles>;
 
@@ -57,7 +56,9 @@ type OryFormSectionContentProps = PropsWithChildren<{
     title?: string;
     description?: string;
 }>;
-type OryFormSectionFooterProps = PropsWithChildren;
+type OryFormSectionFooterProps = PropsWithChildren<{
+    text?: string;
+}>;
 
 type OryCardHeaderProps = Record<string, never>;
 declare function OryCardHeader(): react_jsx_runtime.JSX.Element;
@@ -266,7 +267,7 @@ type OryFlowComponents = {
         /**
          * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
          */
-        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
+        SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
     };
     Form: {
         /**

package/dist/index.d.ts

@@ -7,8 +7,7 @@ import { IntlShape } from 'react-intl';
 
 declare const buttonStyles: (props?: ({
     intent?: "primary" | "secondary" | null | undefined;
-    size?: "default" | "large" | null | undefined;
-    defaultVariants?: "intent" | "size" | null | undefined;
+    defaultVariants?: "intent" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps<typeof buttonStyles>;
 
@@ -57,7 +56,9 @@ type OryFormSectionContentProps = PropsWithChildren<{
     title?: string;
     description?: string;
 }>;
-type OryFormSectionFooterProps = PropsWithChildren;
+type OryFormSectionFooterProps = PropsWithChildren<{
+    text?: string;
+}>;
 
 type OryCardHeaderProps = Record<string, never>;
 declare function OryCardHeader(): react_jsx_runtime.JSX.Element;
@@ -266,7 +267,7 @@ type OryFlowComponents = {
         /**
          * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
          */
-        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
+        SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
     };
     Form: {
         /**

package/dist/index.js

@@ -2259,7 +2259,8 @@ async function onSubmitLogin({ config, flow }, {
     updateLoginFlowBody: body
   }).then(() => {
     var _a2;
-    window.location.href = (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
+    window.location.href = // eslint-disable-next-line promise/always-return
+    (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
   }).catch(
     clientFetch.handleFlowError({
       onRestartFlow: () => {
@@ -2467,6 +2468,9 @@ function computeDefaultValues(nodes) {
   return nodes.reduce((acc, node) => {
     const attrs = node.attributes;
     if (clientFetch.isUiNodeInputAttributes(attrs)) {
+      if (attrs.type === "checkbox" && typeof attrs.value === "undefined") {
+        attrs.value = false;
+      }
       if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined") {
         return acc;
       }
@@ -2519,19 +2523,19 @@ function triggerToWindowCall(trigger) {
 }
 function triggerToFunction(trigger) {
   if (typeof window === "undefined") {
-    console.error(
+    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.error(`The Ory SDK is missing a required function: ${trigger}.`);
+    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
     return void 0;
   }
   const triggerFn = typedWindow[trigger];
   if (typeof triggerFn !== "function") {
-    console.error(
+    console.debug(
       `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
     );
     return void 0;
@@ -3105,7 +3109,12 @@ function OrySettingsOidc({ nodes }) {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: intl.formatMessage({ id: "settings.oidc.info" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.oidc.info" })
+      }
+    )
   ] });
 }
 var getTriggerNode = (nodes) => nodes.find(
@@ -3162,7 +3171,12 @@ function OrySettingsPasskey({ nodes }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: intl.formatMessage({ id: "settings.passkey.info" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.passkey.info" })
+      }
+    )
   ] });
 }
 var getRegenerateNode = (nodes) => nodes.find(
@@ -3247,16 +3261,19 @@ function OrySettingsTotp({ nodes }) {
         children: content
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(Card.SettingsSectionFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: totpUnlink ? intl.formatMessage({ id: "settings.totp.info.linked" }) : intl.formatMessage({ id: "settings.totp.info.not-linked" }) }),
-      totpLinkButton && /* @__PURE__ */ jsxRuntime.jsx(
-        Node2.Button,
-        {
-          node: totpLinkButton,
-          attributes: totpLinkButton.attributes
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: totpUnlink ? intl.formatMessage({ id: "settings.totp.info.linked" }) : intl.formatMessage({ id: "settings.totp.info.not-linked" }),
+        children: totpLinkButton && /* @__PURE__ */ jsxRuntime.jsx(
+          Node2.Button,
+          {
+            node: totpLinkButton,
+            attributes: totpLinkButton.attributes
+          }
+        )
+      }
+    )
   ] });
 }
 var getInputNode = (nodes) => nodes.find(
@@ -3268,9 +3285,6 @@ var getTriggerNode2 = (nodes) => nodes.find(
 var getRemoveButtons = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_remove"
 );
-var getScriptNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
-);
 var getRegisterNode = (nodes) => nodes.find(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_register"
 );
@@ -3283,7 +3297,6 @@ function OrySettingsWebauthn({ nodes }) {
   const triggerButton = getTriggerNode2(nodes);
   const inputNode = getInputNode(nodes);
   const removeButtons = getRemoveButtons(nodes);
-  const scriptNode = getScriptNode(nodes);
   const registerNode = getRegisterNode(nodes);
   if (!inputNode || !triggerButton) {
     return null;
@@ -3306,8 +3319,6 @@ function OrySettingsWebauthn({ nodes }) {
         }),
         children: [
           (_a = groups.default) == null ? void 0 : _a.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, `webauthn-default-${i}`)),
-          scriptNode && /* @__PURE__ */ jsxRuntime.jsx(Node, { node: scriptNode }),
-          registerNode && /* @__PURE__ */ jsxRuntime.jsx(Node, { node: registerNode }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Form.WebauthnSettings,
             {
@@ -3319,11 +3330,17 @@ function OrySettingsWebauthn({ nodes }) {
               },
               removeButtons
             }
-          )
+          ),
+          registerNode && /* @__PURE__ */ jsxRuntime.jsx(Node, { node: registerNode })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: intl.formatMessage({ id: "settings.webauthn.info" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.webauthn.info" })
+      }
+    )
   ] });
 }
 function SettingsSectionContent({ group, nodes }) {
@@ -3375,11 +3392,16 @@ function SettingsSectionContent({ group, nodes }) {
     ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)) })
   ] });
 }
+var getScriptNode = (nodes) => nodes.find(
+  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
+);
 function OrySettingsCard() {
   const { flow } = useOryFlow();
   const uniqueGroups = useNodesGroups(flow.ui.nodes);
+  const scriptNode = getScriptNode(flow.ui.nodes);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
+    scriptNode && /* @__PURE__ */ jsxRuntime.jsx(Node, { node: scriptNode }),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === clientFetch.UiNodeGroupEnum.Default) {
         return null;