@ory/elements-react 1.0.0-rc.6 → 1.1.0

package/dist/theme/default/index.mjs

@@ -27,7 +27,7 @@ var ory_badge_vertical_default = SvgOryBadgeVertical;
 // src/theme/default/components/card/badge.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Badge() {
-  return /* @__PURE__ */ jsxs3("div", { className: "absolute bg-ory-background-default text-ory-foreground-default p-2 font-bold max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding sm:right-0 sm:top-8 sm:translate-x-full sm:rounded-r-branding border-ory-border-default border max-sm:py-[7px] sm:pl-[7px]", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "absolute border border-ory-border-default bg-ory-background-default p-2 font-bold text-ory-foreground-default max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding max-sm:py-[7px] sm:top-8 sm:right-0 sm:translate-x-full sm:rounded-r-branding sm:pl-[7px]", children: [
     /* @__PURE__ */ jsx3(ory_badge_horizontal_default, { width: 22, height: 8, className: "sm:hidden" }),
     /* @__PURE__ */ jsx3(ory_badge_vertical_default, { width: 8, height: 22, className: "max-sm:hidden" })
   ] });
@@ -150,7 +150,7 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
   );
 }
 var findNode = (nodes, opt) => nodes.find((n) => {
-  return n.attributes.node_type === opt.node_type && (opt.group instanceof RegExp ? n.group.match(opt.group) : n.group === opt.group) && (opt.name && n.attributes.node_type === "input" ? opt.name instanceof RegExp ? n.attributes.name.match(opt.name) : n.attributes.name === opt.name : !opt.name);
+  return n.attributes.node_type === opt.node_type && (opt.group instanceof RegExp ? n.group.match(opt.group) : n.group === opt.group) && (opt.name && n.attributes.node_type === "input" ? opt.name instanceof RegExp ? n.attributes.name.match(opt.name) : n.attributes.name === opt.name : !opt.name) && (opt.type && n.attributes.node_type === "input" ? opt.type instanceof RegExp ? n.attributes.type.match(opt.type) : n.attributes.type === opt.type : !opt.type);
 });
 function isNodeVisible(node) {
   if (isUiNodeScriptAttributes(node.attributes)) {
@@ -194,14 +194,6 @@ var OryFlowContext = createContext2(null);
 // src/context/config.tsx
 import { createContext as createContext3, useContext as useContext3, useRef } from "react";
 
-// src/client/config.ts
-function isProduction() {
-  var _a, _b;
-  return ["production", "prod"].indexOf(
-    (_b = (_a = process.env.VERCEL_ENV) != null ? _a : process.env.NODE_ENV) != null ? _b : ""
-  ) > -1;
-}
-
 // src/util/client.ts
 import {
   Configuration,
@@ -238,47 +230,10 @@ var defaultProject = {
   locale_behavior: "force_default"
 };
 var OryConfigurationContext = createContext3({
-  sdk: computeSdkConfig({}),
+  sdk: null,
+  // This is fine, because we always supply a proper default value for the SDK configuration in the provider
   project: defaultProject
 });
-function computeSdkConfig(config) {
-  if ((config == null ? void 0 : config.url) && typeof config.url === "string") {
-    return {
-      url: config.url.replace(/\/$/, ""),
-      options: config.options || {}
-    };
-  }
-  return {
-    url: getSDKUrl(),
-    options: (config == null ? void 0 : config.options) || {}
-  };
-}
-function getSDKUrl() {
-  var _a;
-  if (typeof process !== "undefined" && process.versions && process.versions.node) {
-    if (isProduction()) {
-      const sdkUrl = (_a = process.env["NEXT_PUBLIC_ORY_SDK_URL"]) != null ? _a : process.env["ORY_SDK_URL"];
-      if (!sdkUrl) {
-        throw new Error(
-          "Unable to determine SDK URL. Please set NEXT_PUBLIC_ORY_SDK_URL and/or ORY_SDK_URL in production environments."
-        );
-      }
-      return sdkUrl.replace(/\/$/, "");
-    } else {
-      if (process.env["__NEXT_PRIVATE_ORIGIN"]) {
-        return process.env["__NEXT_PRIVATE_ORIGIN"].replace(/\/$/, "");
-      } else if (process.env["VERCEL_URL"]) {
-        return `https://${process.env["VERCEL_URL"]}`.replace(/\/$/, "");
-      }
-    }
-  }
-  if (typeof window !== "undefined") {
-    return window.location.origin;
-  }
-  throw new Error(
-    "Unable to determine SDK URL. Please set NEXT_PUBLIC_ORY_SDK_URL and/or ORY_SDK_URL or supply the sdk.url parameter in the Ory configuration."
-  );
-}
 
 // src/context/intl-context.tsx
 import { useContext as useContext4 } from "react";
@@ -534,7 +489,7 @@ var en_default = {
   "identities.messages.1010011": "Sign in with hardware key",
   "identities.messages.1010012": "Prepare your WebAuthn device (e.g. security key, biometrics scanner, ...) and press continue.",
   "identities.messages.1010013": "Continue",
-  "identities.messages.1010014": "A code has been sent to the address you provided. If you have not received an message, check the spelling of the address and retry the login.",
+  "identities.messages.1010014": "A code was sent to the address you provided. If you didn't receive it, please check the spelling of the address and try again.",
   "identities.messages.1010015": "Send sign in code",
   "identities.messages.1010016": 'You tried to sign in with "{duplicateIdentifier}", but that email is already used by another account. Sign in to your account with one of the options below to add your account "{duplicateIdentifier}" at "{provider}" as another way to sign in.',
   "identities.messages.1010017": "Sign in and link",
@@ -742,7 +697,7 @@ var en_default = {
   "card.header.parts.oidc": "a social provider",
   "card.header.parts.password.registration": "your {identifierLabel} and a password",
   "card.header.parts.password.login": "your {identifierLabel} and password",
-  "card.header.parts.code": "a code sent to you",
+  "card.header.parts.code": "a one-time code",
   "card.header.parts.passkey": "a Passkey",
   "card.header.parts.webauthn": "a security key",
   "card.header.parts.totp": "your authenticator app",
@@ -996,7 +951,7 @@ var de_default = {
   "identities.messages.4010009": "Die Authentifizierungsmethode stimmt nicht mit der vorherigen Authentifizierungsmethode \xFCberein. Bitte versuchen Sie es erneut.",
   "identities.messages.4010010": "Die eingegebene Adresse stimmt nicht mit der Adresse \xFCberein, die Sie bei der Registrierung angegeben haben. Bitte versuchen Sie es erneut.",
   "input.placeholder": "{placeholder} eingeben",
-  "card.header.parts.code": "einem an Sie gesendeten Code",
+  "card.header.parts.code": "ein einmaliger Code",
   "card.header.parts.identifier-first": "Ihrer {identifierLabel}",
   "card.header.parts.oidc": "einem Social-Login",
   "card.header.parts.passkey": "einem Passkey",
@@ -1346,7 +1301,7 @@ var es_default = {
   "card.header.parts.oidc": "un proveedor social",
   "card.header.parts.password.registration": "tu {identifierLabel} y una contrase\xF1a",
   "card.header.parts.password.login": "tu {identifierLabel} y contrase\xF1a",
-  "card.header.parts.code": "un c\xF3digo enviado a tu correo electr\xF3nico",
+  "card.header.parts.code": "un c\xF3digo de un solo uso",
   "card.header.parts.passkey": "una clave de acceso",
   "card.header.parts.webauthn": "una clave de seguridad",
   "card.header.parts.totp": "su aplicaci\xF3n de autenticaci\xF3n",
@@ -1635,7 +1590,7 @@ var fr_default = {
   "card.header.parts.passkey": "une cl\xE9 d'acc\xE8s",
   "card.header.parts.webauthn": "une cl\xE9 de s\xE9curit\xE9",
   "card.header.parts.identifier-first": "votre {identifierLabel}",
-  "card.header.parts.code": "un code qui vous a \xE9t\xE9 envoy\xE9",
+  "card.header.parts.code": "un code \xE0 usage unique",
   "card.header.parts.totp": "votre application d'authentification",
   "card.header.parts.lookup_secret": "un code de r\xE9cup\xE9ration de secours",
   "card.header.description.login": "Se connecter avec {identifierLabel}",
@@ -1882,7 +1837,7 @@ var nl_default = {
   "input.placeholder": "",
   "card.header.description.login": "",
   "card.header.description.registration": "",
-  "card.header.parts.code": "een code die naar je is verzonden",
+  "card.header.parts.code": "een eenmalige code",
   "card.header.parts.totp": "je authenticator-app",
   "card.header.parts.lookup_secret": "een backup herstelcode",
   "card.header.parts.identifier-first": "",
@@ -2179,7 +2134,7 @@ var pl_default = {
   "card.header.parts.password.login": "",
   "card.header.parts.password.registration": "",
   "card.header.parts.webauthn": "",
-  "card.header.parts.code": "kod wys\u0142any do Ciebie",
+  "card.header.parts.code": "jednorazowy kod",
   "card.header.parts.totp": "Twoja aplikacja uwierzytelniaj\u0105ca",
   "card.header.parts.lookup_secret": "kod odzyskiwania kopii zapasowej",
   "forms.label.forgot-password": "",
@@ -2464,7 +2419,7 @@ var pt_default = {
   "input.placeholder": "",
   "card.header.description.login": "",
   "card.header.description.registration": "",
-  "card.header.parts.code": "um c\xF3digo enviado para voc\xEA",
+  "card.header.parts.code": "um c\xF3digo de uso \xFAnico",
   "card.header.parts.totp": "seu aplicativo autenticador",
   "card.header.parts.lookup_secret": "um c\xF3digo de recupera\xE7\xE3o de backup",
   "card.header.parts.identifier-first": "",
@@ -2755,7 +2710,7 @@ var sv_default = {
   "input.placeholder": "Ange din {placeholder}",
   "card.header.description.login": "Logga in med {identifierLabel}",
   "card.header.description.registration": "Registrera dig med {identifierLabel}",
-  "card.header.parts.code": "en kod skickad till dig",
+  "card.header.parts.code": "en eng\xE5ngskod",
   "card.header.parts.totp": "din autentiseringsapp",
   "card.header.parts.lookup_secret": "en s\xE4kerhetskopieringskod",
   "card.header.parts.identifier-first": "din {identifierLabel}",
@@ -3067,7 +3022,7 @@ var no_default = {
   "card.header.parts.oidc": "en sosial leverand\xF8r",
   "card.header.parts.password.registration": "din {identifierLabel} og et passord",
   "card.header.parts.password.login": "din {identifierLabel} og passord",
-  "card.header.parts.code": "en kode sendt til deg",
+  "card.header.parts.code": "en engangskode",
   "card.header.parts.passkey": "en passkey",
   "card.header.parts.webauthn": "en sikkerhetsn\xF8kkel",
   "card.header.parts.totp": "din autentiseringsapp",
@@ -3269,7 +3224,11 @@ function useClientLogout(config) {
 
 // src/theme/default/utils/url.ts
 function restartFlowUrl(flow, fallback) {
-  return flow.request_url || appendReturnTo(fallback, flow.return_to);
+  return flow.request_url || appendReturnToAndIdentitySchema(
+    fallback,
+    flow.return_to,
+    flow.identity_schema
+  );
 }
 function initFlowUrl(sdkUrl, flowType, flow) {
   const result = `${sdkUrl}/self-service/${flowType}/browser`;
@@ -3277,6 +3236,9 @@ function initFlowUrl(sdkUrl, flowType, flow) {
   if (flow.oauth2_login_challenge) {
     qs.set("login_challenge", flow.oauth2_login_challenge);
   }
+  if (flow.identity_schema) {
+    qs.set("identity_schema", flow.identity_schema);
+  }
   if (flow.return_to) {
     qs.set("return_to", flow.return_to);
   } else if (typeof window !== "undefined") {
@@ -3290,12 +3252,14 @@ function initFlowUrl(sdkUrl, flowType, flow) {
   }
   return result + "?" + qs.toString();
 }
-function appendReturnTo(url, returnTo) {
-  if (!returnTo) {
-    return url;
-  }
+function appendReturnToAndIdentitySchema(url, returnTo, identitySchema) {
   const urlObj = new URL(url);
-  urlObj.searchParams.set("return_to", returnTo);
+  if (returnTo) {
+    urlObj.searchParams.set("return_to", returnTo);
+  }
+  if (identitySchema) {
+    urlObj.searchParams.set("identity_schema", identitySchema);
+  }
   return urlObj.toString();
 }
 
@@ -3354,7 +3318,7 @@ function LoginCardFooter({ flow }) {
     return /* @__PURE__ */ jsx35(LogoutButton, { returnTo });
   }
   return /* @__PURE__ */ jsxs15(Fragment8, { children: [
-    formState.current === "provide_identifier" && config.project.registration_enabled && /* @__PURE__ */ jsxs15("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
+    formState.current === "provide_identifier" && config.project.registration_enabled && /* @__PURE__ */ jsxs15("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: [
       intl.formatMessage({
         id: "login.registration-label",
         defaultMessage: "No account?"
@@ -3363,7 +3327,7 @@ function LoginCardFooter({ flow }) {
       /* @__PURE__ */ jsx35(
         "a",
         {
-          className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
           href: initFlowUrl(config.sdk.url, "registration", flow),
           "data-testid": "ory/screen/login/action/register",
           children: intl.formatMessage({
@@ -3373,10 +3337,10 @@ function LoginCardFooter({ flow }) {
         }
       )
     ] }),
-    authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ jsx35("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx35(
+    authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ jsx35("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx35(
       "button",
       {
-        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+        className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
         onClick: () => {
           dispatchFormState({
             type: "action_clear_active_method"
@@ -3388,10 +3352,10 @@ function LoginCardFooter({ flow }) {
         })
       }
     ) }),
-    authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ jsx35("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx35(
+    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(
       "a",
       {
-        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+        className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
         href: returnTo,
         "data-testid": "ory/screen/login/action/cancel",
         children: intl.formatMessage({
@@ -3405,7 +3369,7 @@ function LogoutButton({ returnTo }) {
   const config = useOryConfiguration2();
   const intl = useIntl9();
   const { logoutFlow: logout, didLoad: didLoadLogout } = useClientLogout(config);
-  return /* @__PURE__ */ jsxs15("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
+  return /* @__PURE__ */ jsxs15("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: [
     intl.formatMessage({
       id: "login.2fa.go-back"
     }),
@@ -3413,7 +3377,7 @@ function LogoutButton({ returnTo }) {
     /* @__PURE__ */ jsx35(
       "a",
       {
-        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+        className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
         href: logout ? logout == null ? void 0 : logout.logout_url : returnTo,
         "data-testid": (
           // Only add the test-id when the logout link has loaded.
@@ -3438,10 +3402,10 @@ function RegistrationCardFooter() {
       if (!screenSelectionNode || Object.entries(authMethodBlocks).length < 2) {
         return null;
       }
-      return /* @__PURE__ */ jsx35("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx35("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: /* @__PURE__ */ jsx35(
         "button",
         {
-          className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
           onClick: () => {
             dispatchFormState({
               type: "action_clear_active_method"
@@ -3457,7 +3421,7 @@ function RegistrationCardFooter() {
       ) });
     case "select_method":
     default:
-      return /* @__PURE__ */ jsxs15("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
+      return /* @__PURE__ */ jsxs15("span", { className: "leading-normal font-normal text-interface-foreground-default-primary antialiased", children: [
         intl.formatMessage({
           id: "registration.login-label",
           defaultMessage: "Already have an account?"
@@ -3466,7 +3430,7 @@ function RegistrationCardFooter() {
         /* @__PURE__ */ jsx35(
           "a",
           {
-            className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+            className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
             href: initFlowUrl(config.sdk.url, "login", flow),
             "data-testid": "ory/screen/registration/action/login",
             children: intl.formatMessage({
@@ -3492,13 +3456,13 @@ function ConsentCardFooter({ flow }) {
     node_type: "input",
     name: "remember"
   });
-  return /* @__PURE__ */ jsxs15("div", { className: "flex gap-8 flex-col", children: [
+  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsxs15("p", { className: "text-interface-foreground-default-secondary leading-normal font-medium", children: [
+      /* @__PURE__ */ jsxs15("p", { className: "leading-normal font-medium text-interface-foreground-default-secondary", children: [
         "Make sure you trust ",
         (_a = flow.consent_request.client) == null ? void 0 : _a.client_name
       ] }),
-      /* @__PURE__ */ jsx35("p", { className: "text-interface-foreground-default-secondary leading-normal", children: "You may be sharing sensitive information with this site or application." })
+      /* @__PURE__ */ jsx35("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,
@@ -3507,7 +3471,7 @@ function ConsentCardFooter({ flow }) {
         node: rememberNode
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: flow.ui.nodes.filter(
+    /* @__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"
     ).map((n) => {
       const attributes = n.attributes;
@@ -3548,7 +3512,7 @@ function joinWithCommaOr(list, orText = "or") {
   }
 }
 function useCardHeaderText(container, opts) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const nodes = container.nodes;
   const intl = useIntl10();
   switch (opts.flowType) {
@@ -3704,7 +3668,14 @@ function useCardHeaderText(container, opts) {
     }
   }
   switch (opts.flowType) {
-    case FlowType12.Login:
+    case FlowType12.Login: {
+      const codeMethodNode = findNode(container.nodes, {
+        node_type: "input",
+        group: "code",
+        name: "code",
+        type: "text"
+      });
+      const codeSent = codeMethodNode && ((_d = opts.formState) == null ? void 0 : _d.current) === "method_active" && ((_e = opts.formState) == null ? void 0 : _e.method) === "code";
       if (opts.flow.refresh) {
         return {
           title: intl.formatMessage({
@@ -3712,7 +3683,7 @@ function useCardHeaderText(container, opts) {
           }),
           description: intl.formatMessage(
             {
-              id: "login.subtitle-refresh"
+              id: codeSent ? "identities.messages.1010014" : "login.subtitle-refresh"
             },
             {
               parts: joinWithCommaOr(parts)
@@ -3725,7 +3696,7 @@ function useCardHeaderText(container, opts) {
             id: "login.title-aal2"
           }),
           description: intl.formatMessage({
-            id: ((_d = opts.formState) == null ? void 0 : _d.current) === "method_active" ? `login.${opts.formState.method}.subtitle` : "login.subtitle-aal2"
+            id: codeSent ? "identities.messages.1010014" : ((_f = opts.formState) == null ? void 0 : _f.current) === "method_active" ? `login.${opts.formState.method}.subtitle` : "login.subtitle-aal2"
           })
         };
       }
@@ -3735,7 +3706,7 @@ function useCardHeaderText(container, opts) {
         }),
         description: parts.length > 0 ? intl.formatMessage(
           {
-            id: "login.subtitle"
+            id: codeSent ? "identities.messages.1010014" : "login.subtitle"
           },
           {
             parts: joinWithCommaOr(
@@ -3745,12 +3716,20 @@ function useCardHeaderText(container, opts) {
           }
         ) : ""
       };
-    case FlowType12.Registration:
+    }
+    case FlowType12.Registration: {
+      const codeMethodNode = findNode(container.nodes, {
+        node_type: "input",
+        group: "code",
+        name: "code",
+        type: "text"
+      });
+      const codeSent = codeMethodNode && ((_g = opts.formState) == null ? void 0 : _g.current) === "method_active" && ((_h = opts.formState) == null ? void 0 : _h.method) === "code";
       return {
         title: intl.formatMessage({
           id: "registration.title"
         }),
-        description: parts.length > 0 ? intl.formatMessage(
+        description: codeSent ? intl.formatMessage({ id: "identities.messages.1040005" }) : parts.length > 0 ? intl.formatMessage(
           {
             id: "registration.subtitle"
           },
@@ -3762,6 +3741,7 @@ function useCardHeaderText(container, opts) {
           }
         ) : ""
       };
+    }
     case FlowType12.OAuth2Consent:
       return {
         title: intl.formatMessage(
@@ -3769,7 +3749,7 @@ function useCardHeaderText(container, opts) {
             id: "consent.title"
           },
           {
-            party: (_e = opts.flow.consent_request.client) == null ? void 0 : _e.client_name
+            party: (_i = opts.flow.consent_request.client) == null ? void 0 : _i.client_name
           }
         ),
         description: intl.formatMessage(
@@ -3777,7 +3757,7 @@ function useCardHeaderText(container, opts) {
             id: "consent.subtitle"
           },
           {
-            identifier: (_g = (_f = opts.flow.session.identity) == null ? void 0 : _f.traits.email) != null ? _g : ""
+            identifier: (_k = (_j = opts.flow.session.identity) == null ? void 0 : _j.traits.email) != null ? _k : ""
           }
         )
       };
@@ -3887,7 +3867,7 @@ function DefaultCurrentIdentifierButton() {
       /* @__PURE__ */ jsx37(
         "button",
         {
-          className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
+          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",
           ...omitInputAttributes(nodeBackButton),
           type: "submit",
           onClick: () => {
@@ -3910,7 +3890,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-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.value })
+            /* @__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 })
           ] })
         }
       )
@@ -3919,7 +3899,7 @@ function DefaultCurrentIdentifierButton() {
   return /* @__PURE__ */ jsx37(
     "a",
     {
-      className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
+      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",
       ...omitInputAttributes(nodeBackButton),
       href: initFlowUrl2,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.value}`,
@@ -3933,7 +3913,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-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.value })
+        /* @__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 })
       ] })
     }
   );
@@ -3985,7 +3965,7 @@ function InnerCardHeader({
   return /* @__PURE__ */ jsxs17("header", { className: "flex flex-col gap-8 antialiased", children: [
     /* @__PURE__ */ jsx38(Card.Logo, {}),
     /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx38("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx38("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: title }),
       /* @__PURE__ */ jsx38(
         "p",
         {
@@ -4022,16 +4002,7 @@ function DefaultCardLogo() {
       }
     );
   }
-  return /* @__PURE__ */ jsx39("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: config.project.name });
-}
-
-// src/theme/default/components/card/index.tsx
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
-function DefaultCard({ children }) {
-  return /* @__PURE__ */ jsx40("div", { className: "flex flex-1 sm:items-center justify-center font-sans items-start w-full sm:w-[480px] sm:max-w-[480px]", children: /* @__PURE__ */ jsxs18("div", { className: "relative grid grid-cols-1 gap-8 sm:rounded-cards sm:border border-form-border-default bg-form-background-default px-8 py-12 sm:px-12 sm:py-14 border-b w-full", children: [
-    children,
-    /* @__PURE__ */ jsx40(Badge, {})
-  ] }) });
+  return /* @__PURE__ */ jsx39("h1", { className: "text-xl leading-normal font-semibold text-interface-foreground-default-primary", children: config.project.name });
 }
 
 // src/theme/default/utils/cn.ts
@@ -4041,6 +4012,19 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/theme/default/components/card/index.tsx
+import { jsx as jsx40, 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("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", children: [
+    children,
+    /* @__PURE__ */ jsx40(Badge, {})
+  ] }) }) });
+}
+
 // src/theme/default/components/form/index.tsx
 import { useIntl as useIntl12 } from "react-intl";
 import {
@@ -4243,7 +4227,7 @@ function Spinner({ className }) {
       "aria-hidden": "true",
       role: "status",
       className: cn(
-        "absolute pointer-events-none inset-0 m-auto size-8 animate-spin",
+        "pointer-events-none absolute inset-0 m-auto size-8 animate-spin",
         className
       ),
       viewBox: "0 0 34 34",
@@ -4319,7 +4303,7 @@ function DefaultButtonSocial({
   return /* @__PURE__ */ jsxs29(
     "button",
     {
-      className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded-buttons flex items-center justify-center px-4 py-[13px] loading:bg-button-social-background-disabled loading:border-button-social-border-disabled loading:text-button-social-foreground-disabled hover:text-button-social-foreground-hover",
+      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",
@@ -4330,10 +4314,10 @@ function DefaultButtonSocial({
       "aria-label": label,
       ...omitInputAttributes(rest),
       children: [
-        /* @__PURE__ */ jsx55("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx55(Logo, { size: 20 }) : /* @__PURE__ */ jsx55(GenericLogo, { label: provider.slice(0, 1) }) : /* @__PURE__ */ jsx55(Spinner, { className: "size-5" }) }),
+        /* @__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" }) }),
         showLabel && node.meta.label ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
-          /* @__PURE__ */ jsx55("span", { className: "grow text-center font-medium leading-none text-button-social-foreground-default", children: label }),
-          /* @__PURE__ */ jsx55("span", { className: "size-5 block" })
+          /* @__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" })
         ] }) : null
       ]
     }
@@ -4358,7 +4342,7 @@ function DefaultSocialButtonContainer({
   );
 }
 function GenericLogo({ label }) {
-  return /* @__PURE__ */ jsx55("span", { className: "flex rounded-buttons bg-button-social-background-generic-provider text-button-social-foreground-generic-provider border-button-social-border-generic-provider text-xs size-full items-center justify-center", children: 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 });
 }
 
 // src/theme/default/components/form/index.tsx
@@ -4499,14 +4483,14 @@ function ListItem({
     {
       ...props,
       className: cn(
-        "flex cursor-pointer gap-3 text-left items-start w-full rounded-buttons p-2 hover:bg-interface-background-default-primary-hover",
-        "disabled:hover:bg-ui-transparent disabled:cursor-default disabled:opacity-50",
+        "flex w-full cursor-pointer items-start gap-3 rounded-buttons p-2 text-left hover:bg-interface-background-default-primary-hover",
+        "disabled:cursor-default disabled:opacity-50 disabled:hover:bg-ui-transparent",
         className
       ),
       children: [
         /* @__PURE__ */ jsx64("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx64(Icon, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
-        /* @__PURE__ */ jsxs30("span", { className: "flex-1 leading-normal inline-flex flex-col max-w-full min-w-1", children: [
-          /* @__PURE__ */ jsx64("span", { className: "text-interface-foreground-default-primary break-words", children: title }),
+        /* @__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 })
         ] }),
         children
@@ -4664,10 +4648,10 @@ import { useEffect as useEffect7, useState as useState6 } from "react";
 import { jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
-    "relative flex justify-center gap-3 overflow-hidden rounded-buttons leading-none ring-1 ring-inset font-medium",
+    "relative flex 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",
-    "p-4 max-w-[488px]"
+    "max-w-[488px] p-4"
   ],
   {
     variants: {
@@ -4687,9 +4671,6 @@ 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-['']"
         ]
-      },
-      defaultVariants: {
-        intent: "primary"
       }
     }
   }
@@ -4775,7 +4756,7 @@ function computeLabelElements(labelText) {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "text-button-link-brand-brand hover:text-button-link-brand-brand-hover underline",
+          className: "text-button-link-brand-brand underline hover:text-button-link-brand-brand-hover",
           children: linkText
         },
         matchStart
@@ -4803,7 +4784,7 @@ function CheckboxSVG() {
   return /* @__PURE__ */ jsx68(
     "svg",
     {
-      className: "absolute hidden size-4 peer-checked:block fill-checkbox-foreground-checked",
+      className: "absolute hidden size-4 fill-checkbox-foreground-checked peer-checked:block",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
@@ -4838,7 +4819,7 @@ var DefaultCheckbox = ({
           defaultChecked: Boolean(value),
           type: "checkbox",
           className: cn(
-            "peer size-4 border appearance-none rounded-forms bg-checkbox-background-default border-checkbox-border-checkbox-border-default checked:bg-checkbox-background-checked checked:border-checkbox-border-checkbox-border-checked",
+            "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}`,
@@ -4848,7 +4829,7 @@ var DefaultCheckbox = ({
       /* @__PURE__ */ jsx68(CheckboxSVG, {})
     ] }),
     /* @__PURE__ */ jsxs32("span", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx68("span", { className: "font-normal leading-tight text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx68(CheckboxLabel, { label }) }),
+      /* @__PURE__ */ jsx68("span", { className: "leading-tight font-normal text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx68(CheckboxLabel, { label }) }),
       node.messages.map((message) => /* @__PURE__ */ jsx68(
         "span",
         {
@@ -4953,11 +4934,11 @@ var eye_default = SvgEye;
 // src/theme/default/components/form/input.tsx
 import { jsx as jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
 var defaultInputClassName = cn(
-  "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0 w-full",
-  "bg-input-background-default border-input-border-default text-input-foreground-primary",
-  "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
+  "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",
+  "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:bg-input-background-hover hover:border-input-border-hover",
+  "hover:border-input-border-hover hover:bg-input-background-hover",
   "px-4 py-[13px]"
 );
 var DefaultInput = ({
@@ -5036,7 +5017,7 @@ function PasswordToggle({
     "button",
     {
       onClick: handleClick,
-      className: "absolute right-0 h-full w-12 flex items-center justify-center text-input-foreground-primary",
+      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, {})
@@ -5105,7 +5086,7 @@ function DefaultLabel({
           name: resendNode.attributes.name,
           value: resendNode.attributes.value,
           onClick: handleResend,
-          className: "cursor-pointer text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          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" })
         }
       )
@@ -5154,7 +5135,7 @@ function LabelAction({ attributes }) {
     "a",
     {
       href: action.href,
-      className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+      className: "text-button-link-brand-brand underline transition-colors hover:text-button-link-brand-brand-hover",
       children: action.message
     }
   ) : null;
@@ -5179,7 +5160,7 @@ var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
       title: label ? uiTextToFormattedMessage8(label, intl) : "",
       "data-testid": `ory/form/node/link/${attributes.id}`,
       className: cn(
-        "antialiased rounded cursor-pointer text-center border gap-3 leading-none bg-button-primary-background-default hover:bg-button-primary-background-hover transition-colors text-button-primary-foreground-default hover:text-button-primary-foreground-hover p-4 font-medium"
+        "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 ? uiTextToFormattedMessage8(label, intl) : ""
     }
@@ -5199,7 +5180,7 @@ var InputOTP = React26.forwardRef(({ className, containerClassName, ...props },
   {
     ref,
     containerClassName: cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      "flex items-center gap-2 has-disabled:opacity-50",
       containerClassName
     ),
     className: cn("disabled:cursor-not-allowed", className),
@@ -5217,8 +5198,8 @@ var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "rounded-forms border border-solid bg-input-background-default text-input-foreground-primary py-[15px] text-center focus-visible:outline-none w-full",
-        "relative flex items-center justify-center transition-all leading-none",
+        "w-full rounded-forms border border-solid bg-input-background-default py-[15px] text-center text-input-foreground-primary focus-visible:outline-hidden",
+        "relative flex items-center justify-center leading-none transition-all",
         isActive ? "border-input-border-focus" : "border-input-border-default",
         className
       ),
@@ -5256,7 +5237,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
         InputOTPGroup,
         {
           className: cn(
-            "w-full flex gap-2 justify-stretch",
+            "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]"
           ),
@@ -5277,7 +5258,7 @@ var DefaultFormSection = ({
   return /* @__PURE__ */ jsx79(
     "form",
     {
-      className: "flex w-full max-w-screen-sm flex-col md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] px-4",
+      className: "flex w-full max-w-(--breakpoint-sm) flex-col px-4 md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px]",
       ...rest,
       children
     }
@@ -5432,8 +5413,8 @@ var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props },
     sideOffset,
     align: "end",
     className: cn(
-      "z-50 min-w-[19rem] overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "border border-interface-border-default-primary bg-interface-background-default-primary rounded-cards",
+      "z-50 min-w-76 origin-top-right animate-drop-down-in overflow-hidden will-change-[opacity,transform] data-[state=closed]:animate-drop-down-out",
+      "rounded-cards border border-interface-border-default-primary bg-interface-background-default-primary",
       className
     ),
     ...props
@@ -5445,12 +5426,12 @@ var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer select-none items-center outline-none transition-colors data-[disabled]:pointer-events-none",
-      "px-8 py-3 lg:py-4.5 text-sm gap-6",
-      "first:border-0 border-t border-button-secondary-border-default hover:border-button-social-border-hover",
-      "text-button-secondary-foreground-default bg-button-secondary-background-default",
-      "hover:text-button-secondary-foreground-hover hover:bg-button-secondary-background-hover",
-      "data-[disabled]:text-button-secondary-foreground-disabled data-[disabled]:bg-button-secondary-background-disabled",
+      "relative flex cursor-pointer items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none",
+      "gap-6 px-8 py-3 text-sm lg:py-4.5",
+      "border-t border-button-secondary-border-default first:border-0 hover:border-button-social-border-hover",
+      "bg-button-secondary-background-default text-button-secondary-foreground-default",
+      "hover:bg-button-secondary-background-hover hover:text-button-secondary-foreground-hover",
+      "data-[disabled]:bg-button-secondary-background-disabled data-[disabled]:text-button-secondary-foreground-disabled",
       inset && "pl-8",
       className
     ),
@@ -5526,11 +5507,11 @@ var UserMenu = ({ session }) => {
       /* @__PURE__ */ jsxs40(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
         /* @__PURE__ */ jsx86(UserAvatar, { disabled: true, initials }),
         /* @__PURE__ */ jsxs40("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
-          /* @__PURE__ */ jsx86("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
-          initials.secondary && /* @__PURE__ */ jsx86("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
+          /* @__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__ */ jsx86(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs40("a", { href: "/settings", children: [
+      /* @__PURE__ */ jsx86(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs40("a", { href: config.project.settings_ui_url, children: [
         /* @__PURE__ */ jsx86(settings_default, { size: 16 }),
         " User settings"
       ] }) }),
@@ -5554,8 +5535,8 @@ var DefaultPageHeader = (_props) => {
   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 max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-12", children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex max-h-10 flex-1 justify-between gap-2 items-center", children: [
+  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: [
+    /* @__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 })
     ] }),
@@ -5564,7 +5545,7 @@ var DefaultPageHeader = (_props) => {
       {
         "data-testid": "ory/screen/settings/back-button",
         href: returnUrl,
-        className: "inline-flex gap-2 items-center text-button-link-default-primary hover:text-button-link-default-primary-hover",
+        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, {}),
           " ",
@@ -5601,7 +5582,7 @@ function DefaultSettingsOidc({
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
   return /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ jsx89("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
+    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,
@@ -5702,7 +5683,7 @@ function DefaultSettingsPasskey({
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsxs43("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+              /* @__PURE__ */ jsxs43("div", { className: "flex flex-1 items-center gap-2 truncate", children: [
                 /* @__PURE__ */ jsx90(
                   passkey_default,
                   {
@@ -5710,10 +5691,10 @@ function DefaultSettingsPasskey({
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ jsxs43("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                /* @__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: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
-                    /* @__PURE__ */ jsx90("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
+                    /* @__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 })
                   ] }),
                   addedAt && /* @__PURE__ */ jsx90("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
@@ -5790,7 +5771,7 @@ function DefaultSettingsRecoveryCodes({
   const hasCodes = codes.length >= 1;
   return /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-8", children: [
     codes.length > 0 && /* @__PURE__ */ jsx93(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ jsxs44("div", { className: "flex gap-4 justify-between", children: [
+    /* @__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__ */ jsxs44("div", { className: "flex gap-2", children: [
         regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx93(
@@ -5847,10 +5828,10 @@ function DefaultSettingsRecoveryCodes({
         )
       ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ jsx93("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx93(
+    hasCodes ? /* @__PURE__ */ jsx93("div", { className: "rounded-general border-interface-border-default-primary bg-interface-background-default-secondary p-6", children: /* @__PURE__ */ jsx93(
       "div",
       {
-        className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary",
+        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))
       }
@@ -5895,7 +5876,7 @@ function DefaultSettingsTotp({
     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: "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",
@@ -5919,7 +5900,7 @@ function DefaultSettingsTotp({
   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 rounded bg-[white]", children: /* @__PURE__ */ jsx95("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx95(
+      /* @__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,
         {
           node: totpImage,
@@ -5934,7 +5915,7 @@ function DefaultSettingsTotp({
           {
             node: totpSecret,
             attributes: totpSecret.attributes,
-            children: /* @__PURE__ */ jsx95("div", { className: "relative flex justify-stretch max-w-[488px]", children: /* @__PURE__ */ jsx95(
+            children: /* @__PURE__ */ jsx95("div", { className: "relative flex max-w-[488px] justify-stretch", children: /* @__PURE__ */ jsx95(
               "input",
               {
                 disabled: true,
@@ -5992,7 +5973,7 @@ function DefaultSettingsWebauthn({
   const { Node: Node2, Card } = useComponents9();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs46("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", 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,
         {
@@ -6029,7 +6010,7 @@ function DefaultSettingsWebauthn({
           {
             className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsxs46("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
+              /* @__PURE__ */ jsxs46("div", { className: "flex flex-1 items-center gap-2 truncate", children: [
                 /* @__PURE__ */ jsx97(
                   key_default,
                   {
@@ -6037,10 +6018,10 @@ function DefaultSettingsWebauthn({
                     className: "text-interface-foreground-default-primary"
                   }
                 ),
-                /* @__PURE__ */ jsxs46("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
+                /* @__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: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
-                    /* @__PURE__ */ jsx97("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
+                    /* @__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 })
                   ] }),
                   addedAt && /* @__PURE__ */ jsx97("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
                     dateStyle: "long"
@@ -6196,12 +6177,12 @@ function DefaultConsentScopeCheckbox({
       children: /* @__PURE__ */ jsx103(
         Switch.Root,
         {
-          className: "relative w-7 h-4 bg-toggle-background-default rounded-identifier border-toggle-border-default border p-[3px] data-[state=checked]:bg-toggle-background-checked transition-all data-[state=checked]:border-toggle-border-checked",
+          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,
           onCheckedChange,
           defaultChecked: true,
-          children: /* @__PURE__ */ jsx103(Switch.Thumb, { className: "size-2 block bg-toggle-foreground-default rounded-identifier data-[state=checked]:bg-toggle-foreground-checked transition-all data-[state=checked]:translate-x-3" })
+          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" })
         }
       )
     }
@@ -6226,7 +6207,7 @@ function DefaultToast({
   return /* @__PURE__ */ jsxs47(
     "div",
     {
-      className: "rounded-cards bg-interface-background-default-inverted border border-interface-border-default-primary p-5 flex-col",
+      className: "flex-col rounded-cards border border-interface-border-default-primary bg-interface-background-default-inverted p-5",
       ...messageTestId5(message),
       children: [
         /* @__PURE__ */ jsx104(
@@ -6378,29 +6359,29 @@ function Error2({
             /* @__PURE__ */ jsxs48("header", { className: "flex flex-col gap-8 antialiased", children: [
               /* @__PURE__ */ jsx105("div", { className: "max-h-9 self-start", children: /* @__PURE__ */ jsx105(ErrorLogo, {}) }),
               /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx105("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.title.what-happened" }) }),
+                /* @__PURE__ */ jsx105("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.title.what-happened" }) }),
                 /* @__PURE__ */ jsx105("p", { className: "leading-normal text-interface-foreground-default-secondary", children: (_h = parsed.message) != null ? _h : description }),
                 parsed.reason && /* @__PURE__ */ jsx105("p", { className: "leading-normal text-interface-foreground-default-secondary", children: parsed.reason })
               ] })
             ] }),
             /* @__PURE__ */ jsx105(Divider, {}),
             /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx105("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.title.what-can-i-do" }) }),
+              /* @__PURE__ */ jsx105("h2", { className: "text-lg leading-normal font-semibold text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.title.what-can-i-do" }) }),
               /* @__PURE__ */ jsx105("p", { className: "leading-normal text-interface-foreground-default-secondary", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.instructions" }) }),
               /* @__PURE__ */ jsx105("div", { children: session ? /* @__PURE__ */ jsx105(LoggedInActions, {}) : /* @__PURE__ */ jsx105(GoBackButton, {}) })
             ] }),
             /* @__PURE__ */ jsx105(Divider, {}),
-            /* @__PURE__ */ jsxs48("div", { className: "font-normal leading-normal antialiased gap-2 flex flex-col", children: [
-              /* @__PURE__ */ jsx105("span", { className: "text-interface-foreground-default-primary text-sm", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.footer.text" }) }),
-              parsed.id && /* @__PURE__ */ jsxs48("p", { className: "text-interface-foreground-default-secondary text-sm", children: [
+            /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-2 leading-normal font-normal antialiased", children: [
+              /* @__PURE__ */ jsx105("span", { className: "text-sm text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx105(FormattedMessage, { id: "error.footer.text" }) }),
+              parsed.id && /* @__PURE__ */ jsxs48("p", { className: "text-sm text-interface-foreground-default-secondary", children: [
                 "ID: ",
                 /* @__PURE__ */ jsx105("code", { children: parsed.id })
               ] }),
-              /* @__PURE__ */ jsxs48("p", { className: "text-interface-foreground-default-secondary text-sm", children: [
+              /* @__PURE__ */ jsxs48("p", { className: "text-sm text-interface-foreground-default-secondary", children: [
                 "Time: ",
                 /* @__PURE__ */ jsx105("code", { children: (_i = parsed.timestamp) == null ? void 0 : _i.toUTCString() })
               ] }),
-              /* @__PURE__ */ jsxs48("p", { className: "text-interface-foreground-default-secondary text-sm", children: [
+              /* @__PURE__ */ jsxs48("p", { className: "text-sm text-interface-foreground-default-secondary", children: [
                 "Message: ",
                 /* @__PURE__ */ jsx105("code", { children: parsed.reason })
               ] }),
@@ -6457,7 +6438,7 @@ function ErrorLogo() {
   if (project.logo_light_url) {
     return /* @__PURE__ */ jsx105("img", { src: project.logo_light_url, className: "h-full", alt: "Logo" });
   }
-  return /* @__PURE__ */ jsx105("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: project.name });
+  return /* @__PURE__ */ jsx105("h1", { className: "text-xl leading-normal font-semibold text-interface-foreground-default-primary", children: project.name });
 }
 
 // src/theme/default/flows/login.tsx
@@ -6545,12 +6526,14 @@ import {
   OryProvider as OryProvider4,
   OrySettingsCard as OrySettingsCard2
 } from "@ory/elements-react";
-import { Fragment as Fragment13, jsx as jsx109, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs49 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
   children,
-  components: flowOverrideComponents
+  components: flowOverrideComponents,
+  className,
+  ...rest
 }) {
   const components = getOryComponents(flowOverrideComponents);
   return /* @__PURE__ */ jsx109(
@@ -6560,10 +6543,10 @@ function Settings({
       flow,
       flowType: FlowType22.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs49(Fragment13, { children: [
+      children: children != null ? children : /* @__PURE__ */ jsx109("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__ */ jsx109(OryPageHeader, {}),
         /* @__PURE__ */ jsx109(OrySettingsCard2, {})
-      ] })
+      ] }) })
     }
   );
 }