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

package/dist/theme/default/index.mjs

@@ -6,8 +6,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var SvgOryBadgeHorizontal = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [
-    /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M18.007 8h-1.71l2.007-3.996L16.296 0h1.711l1.145 2.301L20.327 0H22z" }),
-    /* @__PURE__ */ jsx("path", { fill: "#fff", fillRule: "evenodd", d: "M12.902 4.86a2.47 2.47 0 0 0 1.796-2.365v-.038C14.687 1.097 13.592 0 12.245 0H9.037v1.44l1.208 1.985H9.04V8h1.51V4.949h.633L13.04 8h1.775zm-.876-1.431h.223c.52 0 .943-.427.943-.953a.95.95 0 0 0-.943-.952h-1.39zM4 0a4 4 0 1 0-.001 7.999A4 4 0 0 0 4 0M1.524 4a2.476 2.476 0 1 0 4.952 0 2.476 2.476 0 0 0-4.952 0", clipRule: "evenodd" })
+    /* @__PURE__ */ jsx("path", { fill: "#0F172A", d: "M18.007 8h-1.71l2.007-3.996L16.296 0h1.711l1.145 2.301L20.327 0H22z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#0F172A", fillRule: "evenodd", d: "M12.902 4.86a2.47 2.47 0 0 0 1.796-2.365v-.038C14.687 1.097 13.592 0 12.245 0H9.037v1.44l1.208 1.985H9.04V8h1.51V4.949h.633L13.04 8h1.775zm-.876-1.431h.223c.52 0 .943-.427.943-.953a.95.95 0 0 0-.943-.952h-1.39zM4 0a4 4 0 1 0-.001 7.999A4 4 0 0 0 4 0M1.524 4a2.476 2.476 0 1 0 4.952 0 2.476 2.476 0 0 0-4.952 0", clipRule: "evenodd" })
   ] });
 };
 var ory_badge_horizontal_default = SvgOryBadgeHorizontal;
@@ -18,8 +18,8 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SvgOryBadgeVertical = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [
-    /* @__PURE__ */ jsx2("path", { fill: "#fff", d: "M8 3.993v1.71L4.004 3.697 0 5.704V3.993l2.301-1.145L0 1.673V0z" }),
-    /* @__PURE__ */ jsx2("path", { fill: "#fff", fillRule: "evenodd", d: "M4.86 9.099a2.47 2.47 0 0 0-2.365-1.797h-.038C1.097 7.313 0 8.408 0 9.755v3.208h1.44l1.985-1.208v1.204H8v-1.51H4.949v-.633L8 8.96V7.185zm-1.431.875v-.223a.95.95 0 0 0-.953-.943.95.95 0 0 0-.952.943v1.39zM0 18a4 4 0 1 0 8 0 4 4 0 0 0-8 0m4 2.476a2.476 2.476 0 1 0 0-4.952 2.476 2.476 0 0 0 0 4.952", clipRule: "evenodd" })
+    /* @__PURE__ */ jsx2("path", { fill: "#0F172A", d: "M8 3.993v1.71L4.004 3.697 0 5.704V3.993l2.301-1.145L0 1.673V0z" }),
+    /* @__PURE__ */ jsx2("path", { fill: "#0F172A", fillRule: "evenodd", d: "M4.86 9.099a2.47 2.47 0 0 0-2.365-1.797h-.038C1.097 7.313 0 8.408 0 9.755v3.208h1.44l1.985-1.208v1.204H8v-1.51H4.949v-.633L8 8.96V7.185zm-1.431.875v-.223a.95.95 0 0 0-.953-.943.95.95 0 0 0-.952.943v1.39zM0 18a4 4 0 1 0 8 0 4 4 0 0 0-8 0m4 2.476a2.476 2.476 0 1 0 0-4.952 2.476 2.476 0 0 0 0 4.952", clipRule: "evenodd" })
   ] });
 };
 var ory_badge_vertical_default = SvgOryBadgeVertical;
@@ -27,9 +27,9 @@ 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: "font-bold bg-branding-bg-default absolute max-md:rounded-b-md p-2 max-md:bottom-0 max-md:translate-y-full max-md:left-8  md:right-0 md:translate-x-full md:top-8 md:rounded-r-md", children: [
-    /* @__PURE__ */ jsx3(ory_badge_horizontal_default, { width: 22, height: 8, className: "md:hidden" }),
-    /* @__PURE__ */ jsx3(ory_badge_vertical_default, { width: 8, height: 22, className: "max-md:hidden" })
+  return /* @__PURE__ */ jsxs3("div", { className: "absolute bg-ory-background-default p-2 font-bold max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-md sm:right-0 sm:top-8 sm:translate-x-full sm:rounded-r-lg border-ory-border-default border max-sm:py-[7px] 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" })
   ] });
 }
 
@@ -76,7 +76,7 @@ function LoginCardFooter() {
   if (returnTo) {
     registrationLink += `?return_to=${returnTo}`;
   }
-  return /* @__PURE__ */ jsxs4("span", { className: "text-sm font-normal antialiased leading-normal", children: [
+  return /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
     intl.formatMessage({
       id: "login.registration-label",
       defaultMessage: "No account?"
@@ -85,7 +85,7 @@ function LoginCardFooter() {
     /* @__PURE__ */ jsx4(
       "a",
       {
-        className: "text-links-link-default hover:underline hover:text-link-hover transition-colors",
+        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
         href: registrationLink,
         children: intl.formatMessage({
           id: "login.registration-button",
@@ -119,10 +119,10 @@ function RegistrationCardFooter() {
   if (returnTo) {
     loginLink += `?return_to=${returnTo}`;
   }
-  return /* @__PURE__ */ jsx4("span", { className: "text-sm font-normal antialiased leading-normal", children: formState.current === "method_active" ? /* @__PURE__ */ jsx4(Fragment, { children: screenSelectionNode && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx4("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ jsx4(Fragment, { children: screenSelectionNode && /* @__PURE__ */ jsx4(
     "button",
     {
-      className: "font-medium text-links-link-default",
+      className: "font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover",
       type: "submit",
       onClick: handleScreenSelection,
       children: intl.formatMessage({
@@ -139,7 +139,7 @@ function RegistrationCardFooter() {
     /* @__PURE__ */ jsx4(
       "a",
       {
-        className: "text-links-link-default hover:underline hover:text-link-hover transition-colors",
+        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
         href: loginLink,
         children: intl.formatMessage({
           id: "registration.login-button",
@@ -160,7 +160,10 @@ function VerificationCardFooter() {
 import { useComponents, useOryFlow as useOryFlow3 } from "@ory/elements-react";
 
 // src/theme/default/utils/constructCardHeader.ts
-import { FlowType as FlowType2, isUiNodeInputAttributes } from "@ory/client-fetch";
+import {
+  FlowType as FlowType2,
+  isUiNodeInputAttributes
+} from "@ory/client-fetch";
 import { useIntl as useIntl2 } from "react-intl";
 function joinWithCommaOr(list, orText = "or") {
   if (list.length === 0) {
@@ -172,8 +175,9 @@ function joinWithCommaOr(list, orText = "or") {
     return `${list.join(", ")} ${orText} ${last}`;
   }
 }
-function useCardHeaderText(nodes, opts) {
-  var _a;
+function useCardHeaderText(container, opts) {
+  var _a, _b;
+  const nodes = container.nodes;
   const intl = useIntl2();
   switch (opts.flowType) {
     case FlowType2.Recovery:
@@ -227,6 +231,24 @@ function useCardHeaderText(nodes, opts) {
           id: "verification.subtitle"
         })
       };
+    case FlowType2.Login: {
+      const accountLinkingMessage = (_a = container.messages) == null ? void 0 : _a.find(
+        (m) => m.id === 1010016
+      );
+      if (accountLinkingMessage) {
+        return {
+          title: intl.formatMessage({
+            id: "account-linking.title"
+          }),
+          description: intl.formatMessage(
+            {
+              id: "identities.messages.1010016"
+            },
+            accountLinkingMessage.context
+          )
+        };
+      }
+    }
   }
   const parts = [];
   if (nodes.find((node) => node.group === "password")) {
@@ -277,7 +299,7 @@ function useCardHeaderText(nodes, opts) {
             id: "card.header.parts.identifier-first"
           },
           {
-            identifierLabel: (_a = identifier.meta.label) == null ? void 0 : _a.text
+            identifierLabel: (_b = identifier.meta.label) == null ? void 0 : _b.text
           }
         )
       );
@@ -383,23 +405,24 @@ function DefaultCurrentIdentifierButton() {
     "autocomplete",
     "node_type"
   ]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx6(
     "a",
     {
-      className: "cursor-pointer py-[5px] px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center self-start max-w-full",
+      className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-full 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",
       ...attributes,
       href: initFlowUrl,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
-      children: [
+      children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
         /* @__PURE__ */ jsx6(
           arrow_left_default,
           {
             size: 16,
-            className: "text-button-identifier-fg-subtle shrink-0"
+            stroke: "1",
+            className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-button-identifier-fg-default text-ellipsis overflow-hidden text-nowrap", children: nodeBackButton == null ? void 0 : nodeBackButton.attributes.value })
-      ]
+        /* @__PURE__ */ jsx6("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.attributes.value })
+      ] })
     }
   );
 }
@@ -441,18 +464,15 @@ function InnerCardHeader({ title, text }) {
   return /* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-8 antialiased", children: [
     /* @__PURE__ */ jsx7(Card.Logo, {}),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx7("h2", { className: "font-semibold text-lg text-dialog-fg-default leading-normal", children: title }),
-      /* @__PURE__ */ jsx7("p", { className: "text-sm leading-normal text-dialog-fg-subtle", children: text }),
+      /* @__PURE__ */ jsx7("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx7("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
       /* @__PURE__ */ jsx7(DefaultCurrentIdentifierButton, {})
     ] })
   ] });
 }
 function DefaultCardHeader() {
   const context = useOryFlow3();
-  const { title, description } = useCardHeaderText(
-    context.flow.ui.nodes,
-    context
-  );
+  const { title, description } = useCardHeaderText(context.flow.ui, context);
   return /* @__PURE__ */ jsx7(InnerCardHeader, { title, text: description });
 }
 
@@ -464,15 +484,21 @@ function DefaultCardLogo() {
   if (flow.config.logoUrl) {
     return /* @__PURE__ */ jsx8("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
   }
-  return /* @__PURE__ */ jsx8("h1", { className: "text-xl font-semibold leading-normal text-dialog-fg-default", children: flow.config.name });
+  return /* @__PURE__ */ jsx8("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
+}
+
+// src/theme/default/components/card/layout.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function DefaultCardLayout({ children }) {
+  return /* @__PURE__ */ jsx9("main", { className: "p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen", children });
 }
 
 // src/theme/default/components/card/index.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function DefaultCard({ children }) {
-  return /* @__PURE__ */ jsx9("div", { className: "flex-1 flex-col flex justify-center items-center font-sans", children: /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 max-w-sm md:max-w-[480px] md:w-[480px] gap-8 bg-dialog-bg-default px-8 md:px-12 py-12 md:py-14 relative rounded-border-radius-cards border border-dialog-border-default", children: [
+  return /* @__PURE__ */ jsx10("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__ */ jsxs7("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__ */ jsx9(Badge, {})
+    /* @__PURE__ */ jsx10(Badge, {})
   ] }) });
 }
 
@@ -484,21 +510,319 @@ function cn(...inputs) {
 }
 
 // src/theme/default/components/form/index.tsx
-import { useIntl as useIntl3 } from "react-intl";
+import { useIntl as useIntl4 } from "react-intl";
 import {
   messageTestId,
+  uiTextToFormattedMessage as uiTextToFormattedMessage2,
+  useOryFlow as useOryFlow6
+} from "@ory/elements-react";
+import { FlowType as FlowType4 } from "@ory/client-fetch";
+
+// src/theme/default/components/form/social.tsx
+import {
   uiTextToFormattedMessage,
   useOryFlow as useOryFlow5
 } from "@ory/elements-react";
-import { FlowType as FlowType4 } from "@ory/client-fetch";
-import { jsx as jsx10 } from "react/jsx-runtime";
+
+// src/theme/default/provider-logos/apple.svg
+import * as React4 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SvgApple = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx11("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
+};
+var apple_default = SvgApple;
+
+// src/theme/default/provider-logos/auth0.svg
+import * as React5 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SvgAuth0 = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx12("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
+};
+var auth0_default = SvgAuth0;
+
+// src/theme/default/provider-logos/discord.svg
+import * as React6 from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var SvgDiscord = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx13("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
+    /* @__PURE__ */ jsx13("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
+  ] });
+};
+var discord_default = SvgDiscord;
+
+// src/theme/default/provider-logos/facebook.svg
+import * as React7 from "react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var SvgFacebook = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsxs9("g", { clipPath: "url(#facebook_svg__a)", children: [
+      /* @__PURE__ */ jsx14("path", { fill: "#1877F2", d: "M24 12c0-6.627-5.373-12-12-12C5.372 0 0 5.374 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.357c0-3.008 1.791-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.385c5.736-.9 10.124-5.864 10.124-11.854" }),
+      /* @__PURE__ */ jsx14("path", { fill: "#fff", d: "M16.67 15.469 17.204 12h-3.328V9.75c0-.95.465-1.875 1.955-1.875h1.513V4.922s-1.373-.234-2.686-.234c-2.74 0-4.532 1.661-4.532 4.669V12H7.078v3.469h3.047v8.385a12.1 12.1 0 0 0 3.75 0V15.47z" })
+    ] }),
+    /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "facebook_svg__a", children: /* @__PURE__ */ jsx14("rect", { fill: "#fff" }) }) })
+  ] });
+};
+var facebook_default = SvgFacebook;
+
+// src/theme/default/provider-logos/generic.svg
+import * as React8 from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var SvgGeneric = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, className: "generic_svg__icon generic_svg__icon-tabler generic_svg__icon-tabler-brand-oauth", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx15("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx15("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
+    /* @__PURE__ */ jsx15("path", { d: "M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108 1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z" })
+  ] });
+};
+var generic_default = SvgGeneric;
+
+// src/theme/default/provider-logos/github.svg
+import * as React9 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var SvgGithub = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx16("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
+};
+var github_default = SvgGithub;
+
+// src/theme/default/provider-logos/gitlab.svg
+import * as React10 from "react";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var SvgGitlab = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx17("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
+    /* @__PURE__ */ jsx17("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
+    /* @__PURE__ */ jsx17("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
+    /* @__PURE__ */ jsx17("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
+  ] });
+};
+var gitlab_default = SvgGitlab;
+
+// src/theme/default/provider-logos/google.svg
+import * as React11 from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var SvgGoogle = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx18("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
+  ] });
+};
+var google_default = SvgGoogle;
+
+// src/theme/default/provider-logos/linkedin.svg
+import * as React12 from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var SvgLinkedin = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx19("rect", { x: 2, y: 2, fill: "#1275B1", rx: 14 }),
+    /* @__PURE__ */ jsx19("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
+  ] });
+};
+var linkedin_default = SvgLinkedin;
+
+// src/theme/default/provider-logos/microsoft.svg
+import * as React13 from "react";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var SvgMicrosoft = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs14("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 23 23", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx20("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
+    /* @__PURE__ */ jsx20("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
+    /* @__PURE__ */ jsx20("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
+    /* @__PURE__ */ jsx20("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
+  ] });
+};
+var microsoft_default = SvgMicrosoft;
+
+// src/theme/default/provider-logos/slack.svg
+import * as React14 from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var SvgSlack = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx21("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
+  ] });
+};
+var slack_default = SvgSlack;
+
+// src/theme/default/provider-logos/spotify.svg
+import * as React15 from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var SvgSpotify = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx22("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
+    /* @__PURE__ */ jsx22("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
+  ] });
+};
+var spotify_default = SvgSpotify;
+
+// src/theme/default/provider-logos/yandex.svg
+import * as React16 from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var SvgYandex = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx23("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
+    /* @__PURE__ */ jsx23("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
+  ] });
+};
+var yandex_default = SvgYandex;
+
+// src/theme/default/provider-logos/index.ts
+var logos = {
+  apple: apple_default,
+  auth0: auth0_default,
+  discord: discord_default,
+  facebook: facebook_default,
+  generic: generic_default,
+  github: github_default,
+  gitlab: gitlab_default,
+  google: google_default,
+  linkedin: linkedin_default,
+  microsoft: microsoft_default,
+  slack: slack_default,
+  spotify: spotify_default,
+  yandex: yandex_default
+};
+var provider_logos_default = logos;
+
+// src/theme/default/components/form/social.tsx
+import { useIntl as useIntl3 } from "react-intl";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+
+// src/theme/default/components/form/spinner.tsx
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsxs18(
+    "svg",
+    {
+      "aria-hidden": "true",
+      role: "status",
+      className: cn(
+        "absolute pointer-events-none inset-0 m-auto size-8 animate-spin",
+        className
+      ),
+      viewBox: "0 0 34 34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx24("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx24(
+          "path",
+          {
+            d: "M23.364 10.6362C22.1053 9.37751 20.5016 8.52034 18.7558 8.17307C17.01 7.82581 15.2004 8.00404 13.5559 8.68523C11.9113 9.36641 10.5057 10.52 9.51678 12C8.52784 13.4801 8 15.2201 8 17.0001C8 18.7802 8.52784 20.5202 9.51678 22.0003C10.5057 23.4803 11.9113 24.6339 13.5559 25.3151C15.2004 25.9962 17.01 26.1745 18.7558 25.8272C20.5016 25.4799 22.1053 24.6228 23.364 23.3641",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx24("defs", { children: /* @__PURE__ */ jsx24("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx24(
+          "rect",
+          {
+            width: "24",
+            height: "24",
+            fill: "currentColor",
+            transform: "translate(17 0.029541) rotate(45)"
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/theme/default/components/form/social.tsx
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function extractProvider(context) {
+  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
+    return context.provider;
+  }
+  return void 0;
+}
+function DefaultButtonSocial({
+  attributes,
+  node,
+  onClick,
+  showLabel: _showLabel,
+  logos: providedLogos
+}) {
+  var _a, _b, _c;
+  const logos2 = { ...provider_logos_default, ...providedLogos };
+  const {
+    node_type: _ignoredNodeType,
+    type: _ignoredType,
+    name: _ignoredName,
+    ...props
+  } = attributes;
+  const {
+    flow: { ui }
+  } = useOryFlow5();
+  const intl = useIntl3();
+  const {
+    formState: { isSubmitting }
+  } = useFormContext2();
+  const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
+  const Logo = logos2[attributes.value];
+  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 : "";
+  return /* @__PURE__ */ jsxs19(
+    "button",
+    {
+      className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded flex items-center justify-center px-4 py-[13px] disabled:bg-button-social-background-disabled disabled:border-button-social-border-disabled disabled:text-button-social-foreground-disabled hover:text-button-social-foreground-disabled",
+      value: attributes.value,
+      type: "submit",
+      name: "provider",
+      ...props,
+      onClick,
+      disabled: isSubmitting,
+      children: [
+        /* @__PURE__ */ jsx25("span", { className: "size-5 relative", children: !isSubmitting ? Logo ? /* @__PURE__ */ jsx25(Logo, { size: 20 }) : /* @__PURE__ */ jsx25("span", { className: "flex aspect-square items-center justify-center rounded-full border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx25(Spinner, { className: "size-5" }) }),
+        showLabel && node.meta.label ? /* @__PURE__ */ jsx25("span", { className: "grow text-left font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }) : null
+      ]
+    }
+  );
+}
+DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx25(DefaultButtonSocial, { ...props, logos: logos2 });
+function DefaultSocialButtonContainer({
+  children,
+  nodes
+}) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: cn("grid gap-3", {
+        // needed because tailwind is not compiling dynamic classes
+        "grid-cols-1": nodes.length % 4 <= 2,
+        "grid-cols-3": nodes.length % 3 === 0,
+        "grid-cols-4": nodes.length > 1 && nodes.length % 4 === 0
+      }),
+      children
+    }
+  );
+}
+
+// src/theme/default/components/form/index.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
 function DefaultFormContainer({
   children,
   onSubmit,
   action,
   method
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx26(
     "form",
     {
       onSubmit,
@@ -511,11 +835,11 @@ function DefaultFormContainer({
   );
 }
 function DefaultMessageContainer({ children }) {
-  const { flowType } = useOryFlow5();
+  const { flowType } = useOryFlow6();
   if (!children || Array.isArray(children) && children.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx26(
     "section",
     {
       className: cn(
@@ -526,57 +850,58 @@ function DefaultMessageContainer({ children }) {
   );
 }
 function DefaultMessage({ message }) {
-  const intl = useIntl3();
-  return /* @__PURE__ */ jsx10(
+  const intl = useIntl4();
+  return /* @__PURE__ */ jsx26(
     "span",
     {
-      className: cn("text-sm leading-normal", {
-        "text-forms-fg-error": message.type === "error",
-        "text-forms-fg-default": message.type === "info",
-        "text-forms-fg-success": message.type === "success"
-      }),
+      className: cn(
+        "leading-normal",
+        message.type === "error" && "text-interface-foreground-validation-danger",
+        message.type === "info" && "text-interface-foreground-default-secondary",
+        message.type === "success" && "text-interface-foreground-validation-success"
+      ),
       ...messageTestId(message),
-      children: uiTextToFormattedMessage(message, intl)
+      children: uiTextToFormattedMessage2(message, intl)
     }
   );
 }
 
 // src/theme/default/components/card/auth-methods.tsx
-import { useIntl as useIntl4 } from "react-intl";
+import { useIntl as useIntl5 } from "react-intl";
 
 // src/theme/default/assets/icons/code.svg
-import * as React4 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import * as React17 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var SvgCode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx11("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
+  return /* @__PURE__ */ jsx27("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx27("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
 };
 var code_default = SvgCode;
 
 // src/theme/default/assets/icons/passkey.svg
-import * as React5 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import * as React18 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var SvgPasskey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx12("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
+  return /* @__PURE__ */ jsx28("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx28("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
 };
 var passkey_default = SvgPasskey;
 
 // src/theme/default/assets/icons/password.svg
-import * as React6 from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var SvgPassword = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx13("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx13("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
+  return /* @__PURE__ */ jsx29("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx29("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
 };
 var password_default = SvgPassword;
 
 // src/theme/default/assets/icons/webauthn.svg
-import * as React7 from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import * as React20 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SvgWebauthn = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx14("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx14("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
+  return /* @__PURE__ */ jsx30("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx30("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
 };
 var webauthn_default = SvgWebauthn;
 
@@ -586,7 +911,7 @@ function isGroupImmediateSubmit(group) {
 }
 
 // src/theme/default/components/card/auth-methods.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var iconsMap = {
   code: code_default,
   passkey: passkey_default,
@@ -597,22 +922,28 @@ function DefaultAuthMethodListItem({
   onClick,
   group
 }) {
-  const intl = useIntl4();
+  const intl = useIntl5();
   const Icon = iconsMap[group] || null;
-  return /* @__PURE__ */ jsx15("div", { className: "w-full hover:bg-forms-bg-hover px-2 py-1 rounded", children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx31("div", { className: "w-full rounded px-2 py-1 hover:bg-interface-background-default-primary-hover", children: /* @__PURE__ */ jsxs20(
     "button",
     {
-      className: "flex text-left py-2 gap-3 cursor-pointer",
+      className: "flex cursor-pointer gap-3 py-2 text-left items-start",
       onClick,
       type: isGroupImmediateSubmit(group) ? "submit" : "button",
       id: `auth-method-list-item-${group}`,
       "data-testid": "auth-method-list-item",
       "aria-label": `Authenticate with ${group}`,
       children: [
-        /* @__PURE__ */ jsx15("div", { className: "flex-none w-4 h-4 mt-[2px]", children: Icon && /* @__PURE__ */ jsx15(Icon, { size: 20, className: "text-forms-fg-default" }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex-1 text-sm leading-normal", children: [
-          /* @__PURE__ */ jsx15("div", { className: "text-forms-fg-default text-sm", children: intl.formatMessage({ id: `two-step.${group}.title` }) }),
-          /* @__PURE__ */ jsx15("div", { className: "text-forms-fg-mute text-sm", children: intl.formatMessage({ id: `two-step.${group}.description` }) })
+        /* @__PURE__ */ jsx31("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx31(
+          Icon,
+          {
+            size: 16,
+            className: "text-interface-foreground-brand-primary"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs20("span", { className: "flex-1 leading-normal inline-flex flex-col", children: [
+          /* @__PURE__ */ jsx31("span", { className: "text-interface-foreground-default-primary", children: intl.formatMessage({ id: `two-step.${group}.title` }) }),
+          /* @__PURE__ */ jsx31("span", { className: "text-interface-foreground-default-secondary", children: intl.formatMessage({ id: `two-step.${group}.description` }) })
         ] })
       ]
     }
@@ -620,87 +951,42 @@ function DefaultAuthMethodListItem({
 }
 
 // src/theme/default/components/form/button.tsx
-import { FlowType as FlowType5, getNodeLabel } from "@ory/client-fetch";
+import { getNodeLabel } from "@ory/client-fetch";
 import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage2
+  uiTextToFormattedMessage as uiTextToFormattedMessage3
 } from "@ory/elements-react";
-import { useFormContext as useFormContext2 } from "react-hook-form";
-import { useIntl as useIntl5 } from "react-intl";
-
-// src/theme/default/components/form/spinner.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-function Spinner({ className }) {
-  return /* @__PURE__ */ jsxs9(
-    "svg",
-    {
-      "aria-hidden": "true",
-      role: "status",
-      className: cn(
-        "absolute pointer-events-none inset-0 mx-auto my-auto w-8 h-8 animate-spin",
-        className
-      ),
-      viewBox: "0 0 34 34",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx16("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx16(
-          "path",
-          {
-            d: "M23.364 10.6362C22.1053 9.37751 20.5016 8.52034 18.7558 8.17307C17.01 7.82581 15.2004 8.00404 13.5559 8.68523C11.9113 9.36641 10.5057 10.52 9.51678 12C8.52784 13.4801 8 15.2201 8 17.0001C8 18.7802 8.52784 20.5202 9.51678 22.0003C10.5057 23.4803 11.9113 24.6339 13.5559 25.3151C15.2004 25.9962 17.01 26.1745 18.7558 25.8272C20.5016 25.4799 22.1053 24.6228 23.364 23.3641",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx16("defs", { children: /* @__PURE__ */ jsx16("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx16(
-          "rect",
-          {
-            width: "24",
-            height: "24",
-            fill: "currentColor",
-            transform: "translate(17 0.029541) rotate(45)"
-          }
-        ) }) })
-      ]
-    }
-  );
-}
-
-// src/theme/default/components/form/button.tsx
-import { useOryFlow as useOryFlow6 } from "@ory/elements-react";
 import { cva } from "class-variance-authority";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useFormContext as useFormContext3 } from "react-hook-form";
+import { useIntl as useIntl6 } from "react-intl";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
-    "ring-1 relative overflow-hidden ring-inset rounded text-sm leading-none flex gap-3 justify-center",
-    "disabled:cursor-not-allowed loading:before:pointer-events-none loading:cursor-wait",
-    "transition-colors ease-linear duration-100"
+    "relative flex justify-center gap-3 overflow-hidden rounded leading-none ring-1 ring-inset font-medium",
+    "disabled:cursor-not-allowed loading:cursor-wait loading:before:pointer-events-none",
+    "transition-colors duration-100 ease-linear",
+    "p-4 max-w-[488px]"
   ],
   {
     variants: {
       intent: {
         primary: [
-          "bg-button-primary-bg-default text-button-primary-fg-default ring-button-primary-border-default",
-          "hover:bg-button-primary-bg-hover hover:text-button-primary-fg-hover hover:ring-button-primary-border-hover",
-          "disabled:bg-button-primary-bg-disabled disabled:text-button-primary-fg-disabled disabled:ring-button-primary-border-disabled",
-          "loading:bg-button-primary-bg-default loading:text-button-primary-fg-default loading:ring-button-primary-border-default",
-          "loading:before:absolute loading:before:content-[''] loading:before:inset-0 loading:before:bg-button-primary-bg-default loading:before:opacity-80"
+          "bg-button-primary-background-default text-button-primary-foreground-default ring-button-primary-border-default",
+          "hover:bg-button-primary-background-hover hover:text-button-primary-foreground-hover hover:ring-button-primary-border-hover",
+          "disabled:bg-button-primary-background-disabled disabled:text-button-primary-foreground-disabled disabled:ring-button-primary-border-disabled",
+          "loading:bg-button-primary-background-default loading:text-button-primary-foreground-default loading:ring-button-primary-border-default",
+          "loading:before:absolute loading:before:inset-0 loading:before:bg-button-primary-background-default loading:before:opacity-80 loading:before:content-['']",
+          "disabled:bg-button-primary-background-disabled disabled:text-button-primary-foreground-disabled disabled:ring-button-primary-border-disabled"
         ],
         secondary: [
-          "bg-button-secondary-bg-default text-button-secondary-fg-default ring-button-secondary-border-default",
-          "hover:bg-button-secondary-bg-hover hover:text-button-secondary-fg-hover hover:ring-button-secondary-border-hover",
-          "disabled:bg-button-secondary-bg-disabled disabled:text-button-secondary-fg-disabled disabled:ring-button-secondary-border-disabled",
-          "loading:bg-button-secondary-bg-default loading:text-button-secondary-fg-default loading:ring-button-secondary-border-default",
-          "loading:before:absolute loading:before:content-[''] loading:before:inset-0 loading:before:bg-button-secondary-bg-default loading:before:opacity-80"
+          "bg-button-secondary-background-default text-button-secondary-foreground-default ring-button-secondary-border-default",
+          "hover:bg-button-secondary-background-hover hover:text-button-secondary-foreground-hover hover:ring-button-secondary-border-hover",
+          "disabled:bg-button-secondary-background-disabled disabled:text-button-secondary-foreground-disabled disabled:ring-button-secondary-border-disabled",
+          "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-['']"
         ]
       },
-      size: {
-        default: ["px-4 py-3"],
-        large: ["px-4 py-4.5 max-md:py-3"]
-      },
       defaultVariants: {
-        intent: "primary",
-        size: "default"
+        intent: "primary"
       }
     }
   }
@@ -722,16 +1008,14 @@ var DefaultButton = ({
     // End of skipped attributes
     ...rest
   } = attributes;
-  const intl = useIntl5();
+  const intl = useIntl6();
   const label = getNodeLabel(node);
-  const { flowType } = useOryFlow6();
   const {
     formState: { isSubmitting },
     setValue
-  } = useFormContext2();
+  } = useFormContext3();
   const isPrimary = attributes.name === "method" || attributes.name.includes("passkey") || attributes.name.includes("webauthn") || attributes.name.includes("lookup_secret");
-  const isSmall = flowType === FlowType5.Settings && attributes.name !== "webauthn_register_trigger";
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs21(
     "button",
     {
       ...rest,
@@ -748,14 +1032,13 @@ var DefaultButton = ({
         }
       },
       className: buttonStyles({
-        intent: isPrimary ? "primary" : "secondary",
-        size: isSmall ? "default" : "large"
+        intent: isPrimary ? "primary" : "secondary"
       }),
       disabled: (_a = rest.disabled) != null ? _a : true,
       "data-loading": isSubmitting,
       children: [
-        isSubmitting ? /* @__PURE__ */ jsx17(Spinner, {}) : null,
-        label ? uiTextToFormattedMessage2(label, intl) : ""
+        isSubmitting ? /* @__PURE__ */ jsx32(Spinner, {}) : null,
+        label ? /* @__PURE__ */ jsx32("span", { children: uiTextToFormattedMessage3(label, intl) }) : ""
       ]
     }
   );
@@ -766,17 +1049,16 @@ DefaultButton.displayName = "DefaultButton";
 import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
 import {
   messageTestId as messageTestId2,
-  uiTextToFormattedMessage as uiTextToFormattedMessage4
+  uiTextToFormattedMessage as uiTextToFormattedMessage5
 } from "@ory/elements-react";
-import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { useIntl as useIntl7 } from "react-intl";
+import { useIntl as useIntl8 } from "react-intl";
 
 // src/theme/default/components/ui/checkbox-label.tsx
-import { useIntl as useIntl6 } from "react-intl";
+import { useIntl as useIntl7 } from "react-intl";
 
 // src/util/i18n/index.ts
-var uiTextToFormattedMessage3 = ({ id, context = {}, text }, intl) => {
+var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
   const contextInjectedMessage = Object.entries(context).reduce(
     (accumulator, [key, value]) => {
       if (Array.isArray(value)) {
@@ -824,7 +1106,7 @@ var uiTextToFormattedMessage3 = ({ id, context = {}, text }, intl) => {
 };
 
 // src/theme/default/components/ui/checkbox-label.tsx
-import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx33 } from "react/jsx-runtime";
 var linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
 function computeLabelElements(labelText) {
   const elements = [];
@@ -840,13 +1122,13 @@ function computeLabelElements(labelText) {
       elements.push(labelText.slice(lastIndex, matchStart));
     }
     elements.push(
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx33(
         "a",
         {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "text-links-link-default hover:text-links-link-hover hover:underline",
+          className: "text-button-link-brand-brand hover:text-button-link-brand-brand-hover underline",
           children: linkText
         },
         matchStart
@@ -860,44 +1142,34 @@ function computeLabelElements(labelText) {
   return elements;
 }
 function CheckboxLabel({ label }) {
-  const intl = useIntl6();
+  const intl = useIntl7();
   if (!label) {
     return null;
   }
-  const labelText = uiTextToFormattedMessage3(label, intl);
-  return /* @__PURE__ */ jsx18(Fragment2, { children: computeLabelElements(labelText) });
+  const labelText = uiTextToFormattedMessage4(label, intl);
+  return /* @__PURE__ */ jsx33(Fragment2, { children: computeLabelElements(labelText) });
 }
 
 // src/theme/default/components/form/checkbox.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function CheckboxSVG() {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx34(
     "svg",
     {
-      className: "absolute w-4 h-4 hidden peer-checked:block",
+      className: "absolute hidden size-4 peer-checked:block fill-checkbox-foreground-checked",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: [
-        /* @__PURE__ */ jsx19(
-          "path",
-          {
-            d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
-            fill: "#0F172A"
-          }
-        ),
-        /* @__PURE__ */ jsx19(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M11.6464 5.14645C11.8417 4.95118 12.1583 4.95118 12.3536 5.14645C12.5338 5.32669 12.5477 5.6103 12.3951 5.80645L12.3536 5.85355L7.35355 10.8536C7.17331 11.0338 6.8897 11.0477 6.69355 10.8951L6.64645 10.8536L4.14645 8.35355C3.95118 8.15829 3.95118 7.84171 4.14645 7.64645C4.32669 7.4662 4.6103 7.45234 4.80645 7.60485L4.85355 7.64645L7 9.7925L11.6464 5.14645Z",
-            fill: "white"
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx34(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.6464 5.14645C11.8417 4.95118 12.1583 4.95118 12.3536 5.14645C12.5338 5.32669 12.5477 5.6103 12.3951 5.80645L12.3536 5.85355L7.35355 10.8536C7.17331 11.0338 6.8897 11.0477 6.69355 10.8951L6.64645 10.8536L4.14645 8.35355C3.95118 8.15829 3.95118 7.84171 4.14645 7.64645C4.32669 7.4662 4.6103 7.45234 4.80645 7.60485L4.85355 7.64645L7 9.7925L11.6464 5.14645Z"
+        }
+      )
     }
   );
 }
@@ -915,87 +1187,80 @@ var DefaultCheckbox = ({
     // End of skipped attributes
     ...attributes
   } = initialAttributes;
-  const intl = useIntl7();
+  const intl = useIntl8();
   const label = getNodeLabel2(node);
-  const [checked, setChecked] = useState(Boolean(value));
   const { register } = useForm();
-  return /* @__PURE__ */ jsxs11(
-    "div",
-    {
-      className: "flex antialiased gap-3 self-stretch item-start",
-      onClick: () => {
-        setChecked(!checked);
-      },
-      children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex h-5 items-center", children: [
-          /* @__PURE__ */ jsx19(
-            "input",
-            {
-              ...attributes,
-              checked,
-              value: 1,
-              type: "checkbox",
-              className: cn(
-                "peer w-4 h-4 border appearance-none rounded-border-radius-buttons",
-                !checked && "bg-forms-checkbox-bg-default border-forms-checkbox-border-default",
-                checked && "bg-forms-checkbox-bg-checked border-forms-checkbox-border-checked"
-              ),
-              ...register(name, { value })
-            }
+  const hasError = node.messages.some((m) => m.type === "error");
+  return /* @__PURE__ */ jsxs22("label", { className: "flex items-start gap-3 self-stretch antialiased", children: [
+    /* @__PURE__ */ jsxs22("span", { className: "flex h-5 items-center", children: [
+      /* @__PURE__ */ jsx34(
+        "input",
+        {
+          ...attributes,
+          value: 1,
+          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",
+            hasError && "border-interface-border-validation-danger"
           ),
-          /* @__PURE__ */ jsx19(CheckboxSVG, {})
-        ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "text-sm items-center", children: [
-          /* @__PURE__ */ jsx19("label", { className: "text-sm font-normal leading-normal text-forms-fg-default", children: /* @__PURE__ */ jsx19(CheckboxLabel, { label }) }),
-          node.messages.map((message) => /* @__PURE__ */ jsx19(
-            "span",
-            {
-              className: "text-sm text-red-900 mt-1",
-              ...messageTestId2(message),
-              children: uiTextToFormattedMessage4(message, intl)
-            },
-            message.id
-          ))
-        ] })
-      ]
-    }
-  );
+          ...register(name, { value })
+        }
+      ),
+      /* @__PURE__ */ jsx34(CheckboxSVG, {})
+    ] }),
+    /* @__PURE__ */ jsxs22("span", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx34("span", { className: "font-normal leading-tight text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx34(CheckboxLabel, { label }) }),
+      node.messages.map((message) => /* @__PURE__ */ jsx34(
+        "span",
+        {
+          className: cn(
+            "mt-1",
+            message.type === "error" ? "text-interface-foreground-validation-danger" : "text-interface-foreground-default-secondary"
+          ),
+          ...messageTestId2(message),
+          children: uiTextToFormattedMessage5(message, intl)
+        },
+        message.id
+      ))
+    ] })
+  ] });
 };
 
 // src/theme/default/components/form/group-container.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function DefaultGroupContainer({ children }) {
-  return /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-1 gap-6", children });
+  return /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-1 gap-8", children });
 }
 
 // src/theme/default/components/form/horizontal-divider.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function DefaultHorizontalDivider() {
-  return /* @__PURE__ */ jsx21("hr", { className: "border-dialog-border-default" });
+  return /* @__PURE__ */ jsx36("hr", { className: "border-interface-border-default-primary" });
 }
 
 // src/theme/default/components/form/image.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function DefaultImage({ attributes }) {
-  return /* @__PURE__ */ jsx22("figure", { children: /* @__PURE__ */ jsx22("img", { ...attributes }) });
+  return /* @__PURE__ */ jsx37("figure", { children: /* @__PURE__ */ jsx37("img", { ...attributes }) });
 }
 
 // src/theme/default/components/form/input.tsx
-import { FlowType as FlowType6, getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
+import { FlowType as FlowType5, getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
 import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage5,
+  uiTextToFormattedMessage as uiTextToFormattedMessage6,
   useOryFlow as useOryFlow7
 } from "@ory/elements-react";
-import { useFormContext as useFormContext3 } from "react-hook-form";
-import { useIntl as useIntl8 } from "react-intl";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { useFormContext as useFormContext4 } from "react-hook-form";
+import { useIntl as useIntl9 } from "react-intl";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var DefaultInput = ({
   node,
   attributes,
   onClick
 }) => {
   const label = getNodeLabel3(node);
-  const { register } = useFormContext3();
+  const { register } = useFormContext4();
   const {
     value,
     autocomplete,
@@ -1004,7 +1269,7 @@ var DefaultInput = ({
     node_type: _,
     ...rest
   } = attributes;
-  const intl = useIntl8();
+  const intl = useIntl9();
   const { flowType } = useOryFlow7();
   const formattedLabel = label ? intl.formatMessage(
     {
@@ -1012,10 +1277,10 @@ var DefaultInput = ({
       defaultMessage: "Enter your {placeholder}"
     },
     {
-      placeholder: uiTextToFormattedMessage5(label, intl)
+      placeholder: uiTextToFormattedMessage6(label, intl)
     }
   ) : "";
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx38(
     "input",
     {
       ...rest,
@@ -1024,10 +1289,14 @@ var DefaultInput = ({
       autoComplete: autocomplete,
       placeholder: formattedLabel,
       className: cn(
-        "antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm",
-        "px-3 py-2.5",
+        "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0",
+        "bg-input-background-default border-input-border-default text-input-foreground-primary",
+        "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
+        "focus:border-input-border-focus focus-visible:border-input-border-focus",
+        "hover:bg-input-background-hover hover:border-input-border-hover",
+        "px-4 py-[13px]",
         // 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 === FlowType6.Settings ? "max-w-[488px]" : "md:px-4 md:py-4"
+        flowType === FlowType5.Settings && "max-w-[488px]"
       ),
       ...register(name, { value })
     }
@@ -1035,16 +1304,20 @@ var DefaultInput = ({
 };
 
 // src/theme/default/components/form/label.tsx
-import { FlowType as FlowType7, getNodeLabel as getNodeLabel4 } from "@ory/client-fetch";
+import {
+  FlowType as FlowType6,
+  getNodeLabel as getNodeLabel4,
+  instanceOfUiText
+} from "@ory/client-fetch";
 import {
   messageTestId as messageTestId3,
-  uiTextToFormattedMessage as uiTextToFormattedMessage6,
+  uiTextToFormattedMessage as uiTextToFormattedMessage7,
   useComponents as useComponents2,
   useOryFlow as useOryFlow8
 } from "@ory/elements-react";
-import { useFormContext as useFormContext4 } from "react-hook-form";
-import { useIntl as useIntl9 } from "react-intl";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useFormContext as useFormContext5 } from "react-hook-form";
+import { useIntl as useIntl10 } from "react-intl";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 function findResendNode(nodes) {
   return nodes.find(
     (n) => "name" in n.attributes && (n.attributes.name === "email" && n.attributes.type === "submit" || n.attributes.name === "resend")
@@ -1056,11 +1329,11 @@ function DefaultLabel({
   attributes,
   ...rest
 }) {
-  const intl = useIntl9();
+  const intl = useIntl10();
   const label = getNodeLabel4(node);
   const { Message } = useComponents2();
   const { config, flowType, flow } = useOryFlow8();
-  const { setValue } = useFormContext4();
+  const { setValue, formState } = useFormContext5();
   const isPassword = attributes.type === "password";
   const resendNode = findResendNode(flow.ui.nodes);
   const handleResend = () => {
@@ -1068,81 +1341,83 @@ function DefaultLabel({
       setValue(resendNode.attributes.name, resendNode.attributes.value);
     }
   };
-  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col antialiased gap-1", children: [
-    label && /* @__PURE__ */ jsxs12("span", { className: "inline-flex justify-between", children: [
-      /* @__PURE__ */ jsx24(
+  const fieldError = formState.errors[attributes.name];
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1 antialiased", children: [
+    label && /* @__PURE__ */ jsxs23("span", { className: "inline-flex justify-between", children: [
+      /* @__PURE__ */ jsx39(
         "label",
         {
           ...messageTestId3(label),
-          className: "text-sm font-medium leading-normal",
+          className: "leading-normal text-input-foreground-primary",
           htmlFor: attributes.name,
           ...rest,
-          children: uiTextToFormattedMessage6(label, intl)
+          children: uiTextToFormattedMessage7(label, intl)
         }
       ),
-      isPassword && config.project.recovery_enabled && flowType === FlowType7.Login && // TODO: make it possible to override with a custom component
-      /* @__PURE__ */ jsx24(
+      isPassword && config.project.recovery_enabled && flowType === FlowType6.Login && // TODO: make it possible to override with a custom component
+      /* @__PURE__ */ jsx39(
         "a",
         {
           href: config.project.recovery_ui_url,
-          className: "text-links-link-default hover:underline hover:text-link-hover transition-colors text-sm font-medium",
+          className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
           children: intl.formatMessage({
             id: "forms.label.forgot-password",
             defaultMessage: "Forgot password?"
           })
         }
       ),
-      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx24(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx39(
         "button",
         {
           type: "submit",
           name: resendNode.attributes.name,
           value: resendNode.attributes.value,
           onClick: handleResend,
-          className: "text-links-link-default hover:underline hover:text-link-hover transition-colors text-sm font-medium cursor-pointer",
+          className: "cursor-pointer text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
           children: intl.formatMessage({ id: "identities.messages.1070008" })
         }
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ jsx24(Message.Content, { message }, message.id))
+    node.messages.map((message) => /* @__PURE__ */ jsx39(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx39(Message.Content, { message: fieldError })
   ] });
 }
 
 // src/theme/default/components/form/link-button.tsx
 import { getNodeLabel as getNodeLabel5 } from "@ory/client-fetch";
 import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage7
+  uiTextToFormattedMessage as uiTextToFormattedMessage8
 } from "@ory/elements-react";
 import { forwardRef } from "react";
-import { useIntl as useIntl10 } from "react-intl";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { useIntl as useIntl11 } from "react-intl";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
-  const intl = useIntl10();
+  const intl = useIntl11();
   const label = getNodeLabel5(node);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx40(
     "a",
     {
       ...attributes,
       ref,
-      title: label ? uiTextToFormattedMessage7(label, intl) : "",
+      title: label ? uiTextToFormattedMessage8(label, intl) : "",
       className: cn(
-        "antialiased rounded cursor-pointer text-center border border-transparent gap-3 leading-none bg-button-primary-bg-default hover:bg-button-primary-bg-hover transition-colors text-button-primary-fg-default hover:text-button-primary-fg-hover px-4 py-4.5 text-sm font-medium"
+        "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"
       ),
-      children: label ? uiTextToFormattedMessage7(label, intl) : ""
+      children: label ? uiTextToFormattedMessage8(label, intl) : ""
     }
   );
 });
 DefaultLinkButton.displayName = "DefaultLinkButton";
 
 // src/theme/default/components/form/pin-code-input.tsx
-import { useFormContext as useFormContext5 } from "react-hook-form";
+import { useFormContext as useFormContext6 } from "react-hook-form";
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
-import * as React8 from "react";
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
-var InputOTP = React8.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx26(
+import * as React21 from "react";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+var InputOTP = React21.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx41(
   OTPInput,
   {
     ref,
@@ -1155,24 +1430,25 @@ var InputOTP = React8.forwardRef(({ className, containerClassName, ...props }, r
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React8.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React8.useContext(OTPInputContext);
+var InputOTPSlot = React21.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React21.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ref,
       className: cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        "rounded-forms border border-solid bg-input-background-default py-[15px] text-center focus-visible:outline-none w-full",
+        "relative flex items-center justify-center transition-all leading-none",
+        isActive ? "border-input-border-focus" : "border-input-border-default",
         className
       ),
       ...props,
       children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ jsx26("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx26("div", { className: "h-4 w-px animate-caret-blink bg-branding-bg-default duration-750" }) })
+        /* @__PURE__ */ jsx41("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ jsx41("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx41("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
       ]
     }
   );
@@ -1180,325 +1456,97 @@ var InputOTPSlot = React8.forwardRef(({ index, className, ...props }, ref) => {
 InputOTPSlot.displayName = "InputOTPSlot";
 
 // src/theme/default/components/form/pin-code-input.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
+import { FlowType as FlowType7 } from "@ory/client-fetch";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var DefaultPinCodeInput = ({ attributes }) => {
-  const { setValue, watch } = useFormContext5();
+  const { setValue, watch } = useFormContext6();
   const { maxlength, name } = attributes;
   const elements = maxlength != null ? maxlength : 6;
+  const { flowType } = useOryFlow9();
   const handleInputChange = (v) => {
     setValue(name, v);
   };
   const value = watch(name);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx42(
     InputOTP,
     {
       maxLength: maxlength != null ? maxlength : 6,
       onChange: handleInputChange,
       name,
       value,
-      children: /* @__PURE__ */ jsx27(InputOTPGroup, { className: "w-full space-x-2 justify-between", children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx27(
-        InputOTPSlot,
+      children: /* @__PURE__ */ jsx42(
+        InputOTPGroup,
         {
-          index,
-          className: "text-center px-1.5 py-2.5 h-10 w-11 md:w-14 md:h-12 border border-radius border-solid rounded-border-radius-forms border-forms-border-default bg-forms-bg-default"
-        },
-        index
-      )) })
+          className: cn(
+            "w-full flex gap-2 justify-stretch",
+            // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
+            flowType === FlowType7.Settings && "max-w-[488px]"
+          ),
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx42(InputOTPSlot, { index }, index))
+        }
+      )
     }
   );
 };
 
 // src/theme/default/components/form/section.tsx
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
-var DefaultFormSection = ({ children }) => {
-  return /* @__PURE__ */ jsx28("div", { className: "flex flex-col w-80 md:w-[712px] lg:w-[802px] xl:w-[896px]", children });
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+var DefaultFormSection = ({
+  children,
+  nodes: _nodes,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx43(
+    "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",
+      ...rest,
+      children
+    }
+  );
 };
 var DefaultFormSectionContent = ({
   title,
   description,
   children
 }) => {
-  return /* @__PURE__ */ jsxs14("div", { className: "border rounded-t-xl border-b-0 border-dialog-border-default bg-forms-bg-default px-6 py-8 flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx28("h3", { className: "font-medium text-dialog-fg-default", children: title }),
-      /* @__PURE__ */ jsx28("span", { className: "text-sm text-dialog-fg-subtle", children: description })
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-8 rounded-t-xl border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx43("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx43("span", { className: "text-interface-foreground-default-secondary", children: description })
     ] }),
     children
   ] });
 };
-var DefaultFormSectionFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx28("div", { className: "rounded-b-xl gap-2 flex justify-end px-6 py-4 bg-dialog-bg-subtle border border-dialog-border-default text-sm text-dialog-fg-mute items-center [&>span]:mr-auto min-h-[72px]", children });
-};
-
-// src/theme/default/components/form/social.tsx
-import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage8,
-  useOryFlow as useOryFlow9
-} from "@ory/elements-react";
-
-// src/theme/default/provider-logos/apple.svg
-import * as React9 from "react";
-import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
-var SvgApple = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx29("path", { fill: "#283544", d: "M30 16c0 7.728-6.265 14-14 14S2 23.728 2 16C2 8.265 8.265 2 16 2s14 6.265 14 14" }),
-    /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M22.562 12.457c-.076.045-1.895.986-1.895 3.07.086 2.38 2.295 3.213 2.333 3.213-.038.045-.334 1.136-1.21 2.28-.694.986-1.466 1.98-2.637 1.98-1.114 0-1.514-.657-2.8-.657-1.381 0-1.772.657-2.829.657-1.171 0-2-1.047-2.733-2.023-.952-1.278-1.761-3.284-1.79-5.21-.02-1.02.19-2.023.724-2.875.752-1.19 2.095-1.997 3.561-2.023 1.124-.036 2.124.719 2.81.719.657 0 1.885-.72 3.275-.72.6.001 2.2.17 3.191 1.59m-6.561-1.792c-.2-.932.352-1.864.866-2.458.657-.72 1.695-1.207 2.59-1.207a3.33 3.33 0 0 1-.952 2.511c-.58.72-1.58 1.26-2.504 1.154" })
-  ] });
-};
-var apple_default = SvgApple;
-
-// src/theme/default/provider-logos/auth0.svg
-import * as React10 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var SvgAuth0 = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsx30("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx30("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
-};
-var auth0_default = SvgAuth0;
-
-// src/theme/default/provider-logos/discord.svg
-import * as React11 from "react";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
-var SvgDiscord = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx31("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
-    /* @__PURE__ */ jsx31("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
-  ] });
-};
-var discord_default = SvgDiscord;
-
-// src/theme/default/provider-logos/facebook.svg
-import * as React12 from "react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
-var SvgFacebook = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsxs17("g", { clipPath: "url(#facebook_svg__a)", children: [
-      /* @__PURE__ */ jsx32("path", { fill: "#1877F2", d: "M24 12c0-6.627-5.373-12-12-12C5.372 0 0 5.374 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.357c0-3.008 1.791-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.385c5.736-.9 10.124-5.864 10.124-11.854" }),
-      /* @__PURE__ */ jsx32("path", { fill: "#fff", d: "M16.67 15.469 17.204 12h-3.328V9.75c0-.95.465-1.875 1.955-1.875h1.513V4.922s-1.373-.234-2.686-.234c-2.74 0-4.532 1.661-4.532 4.669V12H7.078v3.469h3.047v8.385a12.1 12.1 0 0 0 3.75 0V15.47z" })
-    ] }),
-    /* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: "facebook_svg__a", children: /* @__PURE__ */ jsx32("rect", { fill: "#fff" }) }) })
-  ] });
-};
-var facebook_default = SvgFacebook;
-
-// src/theme/default/provider-logos/generic.svg
-import * as React13 from "react";
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
-var SvgGeneric = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs18("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, className: "generic_svg__icon generic_svg__icon-tabler generic_svg__icon-tabler-brand-oauth", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx33("path", { stroke: "none", d: "M0 0h24v24H0z" }),
-    /* @__PURE__ */ jsx33("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
-    /* @__PURE__ */ jsx33("path", { d: "M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108 1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z" })
-  ] });
-};
-var generic_default = SvgGeneric;
-
-// src/theme/default/provider-logos/github.svg
-import * as React14 from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var SvgGithub = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx34("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
-};
-var github_default = SvgGithub;
-
-// src/theme/default/provider-logos/gitlab.svg
-import * as React15 from "react";
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
-var SvgGitlab = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs19("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx35("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
-    /* @__PURE__ */ jsx35("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
-    /* @__PURE__ */ jsx35("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
-    /* @__PURE__ */ jsx35("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
-  ] });
-};
-var gitlab_default = SvgGitlab;
-
-// src/theme/default/provider-logos/google.svg
-import * as React16 from "react";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
-var SvgGoogle = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs20("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx36("path", { fill: "#4285F4", d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82" }),
-    /* @__PURE__ */ jsx36("path", { fill: "#34A853", d: "M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24" }),
-    /* @__PURE__ */ jsx36("path", { fill: "#FBBC05", d: "M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 0 0 0 10.76z" }),
-    /* @__PURE__ */ jsx36("path", { fill: "#EA4335", d: "M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96" })
-  ] });
-};
-var google_default = SvgGoogle;
-
-// src/theme/default/provider-logos/linkedin.svg
-import * as React17 from "react";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
-var SvgLinkedin = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs21("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx37("rect", { x: 2, y: 2, fill: "#1275B1", rx: 14 }),
-    /* @__PURE__ */ jsx37("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
-  ] });
-};
-var linkedin_default = SvgLinkedin;
-
-// src/theme/default/provider-logos/microsoft.svg
-import * as React18 from "react";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
-var SvgMicrosoft = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs22("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 23 23", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx38("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
-    /* @__PURE__ */ jsx38("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
-    /* @__PURE__ */ jsx38("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
-    /* @__PURE__ */ jsx38("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
-  ] });
-};
-var microsoft_default = SvgMicrosoft;
-
-// src/theme/default/provider-logos/slack.svg
-import * as React19 from "react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
-var SvgSlack = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs23("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx39("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
-    /* @__PURE__ */ jsx39("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
-    /* @__PURE__ */ jsx39("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
-    /* @__PURE__ */ jsx39("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
-  ] });
-};
-var slack_default = SvgSlack;
-
-// src/theme/default/provider-logos/spotify.svg
-import * as React20 from "react";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
-var SvgSpotify = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs24("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx40("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
-    /* @__PURE__ */ jsx40("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
-  ] });
-};
-var spotify_default = SvgSpotify;
-
-// src/theme/default/provider-logos/yandex.svg
-import * as React21 from "react";
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
-var SvgYandex = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs25("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
-    /* @__PURE__ */ jsx41("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
-    /* @__PURE__ */ jsx41("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
-  ] });
-};
-var yandex_default = SvgYandex;
-
-// src/theme/default/provider-logos/index.ts
-var logos = {
-  apple: apple_default,
-  auth0: auth0_default,
-  discord: discord_default,
-  facebook: facebook_default,
-  generic: generic_default,
-  github: github_default,
-  gitlab: gitlab_default,
-  google: google_default,
-  linkedin: linkedin_default,
-  microsoft: microsoft_default,
-  slack: slack_default,
-  spotify: spotify_default,
-  yandex: yandex_default
-};
-var provider_logos_default = logos;
-
-// src/theme/default/components/form/social.tsx
-import { useIntl as useIntl11 } from "react-intl";
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
-function extractProvider(context) {
-  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
-    return context.provider;
-  }
-  return void 0;
-}
-function DefaultButtonSocial({
-  attributes,
-  node,
-  onClick,
-  showLabel: _showLabel
-}) {
-  var _a, _b, _c;
-  const {
-    node_type: _ignoredNodeType,
-    type: _ignoredType,
-    name: _ignoredName,
-    ...props
-  } = attributes;
-  const {
-    flow: { ui }
-  } = useOryFlow9();
-  const intl = useIntl11();
-  const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
-  const Logo = provider_logos_default[attributes.value];
-  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 : "";
-  return /* @__PURE__ */ jsxs26(
-    "button",
+var DefaultFormSectionFooter = ({
+  children,
+  text
+}) => {
+  return /* @__PURE__ */ jsxs25(
+    "div",
     {
       className: cn(
-        "gap-3 ring-1 ring-forms-border-default bg-button-secondary-bg-default hover:bg-button-secondary-bg-hover transition-colors rounded flex items-center justify-center py-2.5 px-4 md:py-4",
-        { "py-2.5": showLabel }
+        "flex min-h-[72px] items-center justify-between gap-2 rounded-b-xl border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
       ),
-      value: attributes.value,
-      type: "submit",
-      name: "provider",
-      ...props,
-      onClick,
       children: [
-        /* @__PURE__ */ jsx42("span", { className: "w-5 h-5", children: Logo ? /* @__PURE__ */ jsx42(
-          Logo,
-          {
-            size: 20,
-            className: "object-fill w-full h-full"
-          }
-        ) : /* @__PURE__ */ jsx42("span", { className: "rounded-full aspect-square border flex items-center justify-center text-xs", children: provider.slice(0, 2) }) }),
-        showLabel && node.meta.label ? /* @__PURE__ */ jsx42("span", { className: "text-sm text-left leading-none font-medium text-forms-fg-default flex-grow", children: uiTextToFormattedMessage8(node.meta.label, intl) }) : null
+        /* @__PURE__ */ jsx43("span", { children: text }),
+        children
       ]
     }
   );
-}
-function DefaultSocialButtonContainer({
-  children,
-  nodes
-}) {
-  return /* @__PURE__ */ jsx42(
-    "div",
-    {
-      className: cn("grid gap-3", {
-        // needed because tailwind is not compiling dynamic classes
-        "grid-cols-1": nodes.length % 4 <= 2,
-        "grid-cols-3": nodes.length % 3 === 0,
-        "grid-cols-4": nodes.length > 1 && nodes.length % 4 === 0
-      }),
-      children
-    }
-  );
-}
+};
 
 // src/theme/default/components/form/text.tsx
 import { uiTextToFormattedMessage as uiTextToFormattedMessage9 } from "@ory/elements-react";
 import { useIntl as useIntl12 } from "react-intl";
-import { Fragment as Fragment3, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl12();
-  return /* @__PURE__ */ jsxs27(Fragment3, { children: [
-    /* @__PURE__ */ jsx43("p", { "data-testid": `node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx43("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ jsx43("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" }) }, index))
+  return /* @__PURE__ */ jsxs26(Fragment3, { children: [
+    /* @__PURE__ */ jsx44("p", { "data-testid": `node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
+    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx44("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ jsx44("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" }) }, index))
   ] });
 }
 
@@ -1507,7 +1555,7 @@ import { useComponents as useComponents3 } from "@ory/elements-react";
 
 // src/theme/default/components/ui/user-menu.tsx
 import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
-import { useCallback, useEffect, useState as useState2 } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
 
 // src/util/client.ts
@@ -1529,32 +1577,35 @@ function frontendClient(sdkUrl, opts = {}) {
 
 // src/theme/default/assets/icons/logout.svg
 import * as React22 from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var SvgLogout = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx44("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx44("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
+  return /* @__PURE__ */ jsx45("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx45("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
 };
 var logout_default = SvgLogout;
 
 // src/theme/default/assets/icons/settings.svg
 import * as React23 from "react";
-import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 var SvgSettings = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx45("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs28("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx45("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
-    /* @__PURE__ */ jsx45("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
+  return /* @__PURE__ */ jsx46("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsxs27("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx46("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
+    /* @__PURE__ */ jsx46("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
   ] }) });
 };
 var settings_default = SvgSettings;
 
 // src/theme/default/utils/user.ts
+function isTraitsIndexable(traits) {
+  return typeof traits === "object" && traits !== null;
+}
 var getUserInitials = (session) => {
   var _a, _b;
   const avatar = "";
   let primary = "";
   let secondary = "";
-  if (!((_a = session == null ? void 0 : session.identity) == null ? void 0 : _a.traits)) {
+  if (!((_a = session == null ? void 0 : session.identity) == null ? void 0 : _a.traits) || !isTraitsIndexable(session.identity.traits)) {
     return {
       primary,
       secondary,
@@ -1562,14 +1613,14 @@ var getUserInitials = (session) => {
     };
   }
   const traits = (_b = session.identity) == null ? void 0 : _b.traits;
-  if (traits.email) {
+  if (traits.email && typeof traits.email === "string") {
     secondary = traits.email;
   }
   if (traits.name) {
     if (typeof traits.name === "string") {
       primary = traits.name;
     }
-    if (traits.name.first && traits.name.last) {
+    if (typeof traits.name === "object" && traits.name && traits.name.first && traits.name.last) {
       primary = traits.name.first + " " + traits.name.last;
     }
   }
@@ -1587,10 +1638,10 @@ var getUserInitials = (session) => {
 // src/theme/default/components/ui/dropdown-menu.tsx
 import { forwardRef as forwardRef3 } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx46(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx46(
+var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx47(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1598,24 +1649,24 @@ var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props },
     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-dialog-border-default bg-dialog-bg-default rounded-border-radius-cards",
+      "border border-interface-border-default-primary bg-interface-background-default-primary rounded-cards",
       className
     ),
     ...props
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx47(
   DropdownMenuPrimitive.Item,
   {
     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 data-[disabled]:border-button-secondary-border-disabled",
-      "text-button-secondary-fg-default bg-button-secondary-bg-default",
-      "hover:text-button-secondary-fg-hover hover:bg-button-secondary-bg-hover",
-      "data-[disabled]:text-button-secondary-fg-disabled data-[disabled]:bg-button-secondary-bg-disabled",
+      "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",
       inset && "pl-8",
       className
     ),
@@ -1623,7 +1674,7 @@ var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx47(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1642,31 +1693,37 @@ import { forwardRef as forwardRef4 } from "react";
 
 // src/theme/default/assets/icons/user.svg
 import * as React24 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var SvgUser = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx47("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx47("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
+  return /* @__PURE__ */ jsx48("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx48("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
 };
 var user_default = SvgUser;
 
 // src/theme/default/components/ui/user-avater.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var UserAvatar = forwardRef4(
   ({ initials, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       "button",
       {
         ref,
-        className: "size-10 relative flex overflow-hidden items-center justify-center rounded-full bg-button-primary-bg-default disabled:hover:bg-button-primary-bg-default hover:bg-button-primary-bg-hover",
+        className: "relative flex size-10 items-center justify-center overflow-hidden rounded-full bg-button-primary-background-default hover:bg-button-primary-background-hover",
         ...rest,
-        children: /* @__PURE__ */ jsx48("div", { className: "relative size-full flex items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx48(
+        children: /* @__PURE__ */ jsx49("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx49(
           "img",
           {
             src: initials.avatar,
             alt: initials.primary,
             className: "w-full object-contain"
           }
-        ) : /* @__PURE__ */ jsx48(user_default, { size: 24, className: "text-button-primary-fg-default" }) })
+        ) : /* @__PURE__ */ jsx49(
+          user_default,
+          {
+            size: 24,
+            className: "text-button-primary-foreground-default"
+          }
+        ) })
       }
     );
   }
@@ -1674,11 +1731,11 @@ var UserAvatar = forwardRef4(
 UserAvatar.displayName = "UserAvatar";
 
 // src/theme/default/components/ui/user-menu.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const { config } = useOryFlow10();
   const initials = getUserInitials(session);
-  const [logoutFlow, setLogoutFlow] = useState2();
+  const [logoutFlow, setLogoutFlow] = useState();
   const fetchLogoutFlow = useCallback(async () => {
     const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
     setLogoutFlow(flow);
@@ -1686,22 +1743,22 @@ var UserMenu = ({ session }) => {
   useEffect(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
-  return /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx49(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(UserAvatar, { initials }) }),
-    /* @__PURE__ */ jsxs29(DropdownMenuContent, { children: [
-      /* @__PURE__ */ jsxs29(DropdownMenuLabel2, { className: "px-5 py-4.5 flex gap-3", children: [
-        /* @__PURE__ */ jsx49(UserAvatar, { disabled: true, initials }),
-        /* @__PURE__ */ jsxs29("div", { className: "flex flex-col text-sm leading-tight justify-center", children: [
-          /* @__PURE__ */ jsx49("div", { className: "text-dialog-fg-default", children: initials.primary }),
-          initials.secondary && /* @__PURE__ */ jsx49("div", { className: "text-dialog-fg-mute", children: initials.secondary })
+  return /* @__PURE__ */ jsxs28(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx50(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(UserAvatar, { initials }) }),
+    /* @__PURE__ */ jsxs28(DropdownMenuContent, { children: [
+      /* @__PURE__ */ jsxs28(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
+        /* @__PURE__ */ jsx50(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ jsxs28("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx50("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ jsx50("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
         ] })
       ] }),
-      /* @__PURE__ */ jsx49(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs29("a", { href: "/settings", children: [
-        /* @__PURE__ */ jsx49(settings_default, { size: 16 }),
+      /* @__PURE__ */ jsx50(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs28("a", { href: "/settings", children: [
+        /* @__PURE__ */ jsx50(settings_default, { size: 16 }),
         " User settings"
       ] }) }),
-      /* @__PURE__ */ jsx49(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs29("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
-        /* @__PURE__ */ jsx49(logout_default, { size: 16 }),
+      /* @__PURE__ */ jsx50(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ jsxs28("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
+        /* @__PURE__ */ jsx50(logout_default, { size: 16 }),
         " Logout"
       ] }) })
     ] })
@@ -1710,39 +1767,39 @@ var UserMenu = ({ session }) => {
 
 // src/theme/default/components/generic/page-header.tsx
 import { useSession } from "@ory/elements-react/client";
-import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
   const { Card } = useComponents3();
   const { session } = useSession();
-  return /* @__PURE__ */ jsx50("div", { className: "flex max-w-[896px] flex-col w-full gap-3 mt-16", children: /* @__PURE__ */ jsx50("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 max-h-10 justify-between flex-1", children: [
-    /* @__PURE__ */ jsx50("div", { className: "h-10 flex-1 relative", children: /* @__PURE__ */ jsx50(Card.Logo, {}) }),
-    /* @__PURE__ */ jsx50(UserMenu, { session })
+  return /* @__PURE__ */ jsx51("div", { className: "mt-16 flex w-full max-w-[896px] flex-col gap-3", children: /* @__PURE__ */ jsx51("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+    /* @__PURE__ */ jsx51("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx51(Card.Logo, {}) }),
+    /* @__PURE__ */ jsx51(UserMenu, { session })
   ] }) }) });
 };
 
 // src/theme/default/assets/icons/trash.svg
 import * as React25 from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var SvgTrash = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx51("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
+  return /* @__PURE__ */ jsx52("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx52("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
 };
 var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { useFormContext as useFormContext6 } from "react-hook-form";
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useFormContext as useFormContext7 } from "react-hook-form";
+import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
   unlinkButtons
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const { setValue } = useFormContext6();
-  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ jsx52("div", { className: "flex gap-3 items-start [&>button]:w-[79px]", children: linkButtons.map((button) => {
+  const { setValue } = useFormContext7();
+  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-8", children: [
+    hasLinkButtons && /* @__PURE__ */ jsx53("div", { className: "flex items-start gap-3 [&>button]:w-[79px]", children: linkButtons.map((button) => {
       const attrs = button.attributes;
-      return /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx53(
         DefaultButtonSocial,
         {
           showLabel: false,
@@ -1756,18 +1813,18 @@ function DefaultSettingsOidc({
         attrs.value
       );
     }) }),
-    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx52(DefaultHorizontalDivider, {}) : null,
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx53(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
       var _a, _b;
       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;
-      return /* @__PURE__ */ jsxs31("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "flex gap-6 items-center", children: [
-          /* @__PURE__ */ jsx52(Logo, { size: 32 }),
-          /* @__PURE__ */ jsx52("p", { className: "text-dialog-fg-subtle text-sm font-medium", children: provider })
+      return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
+          /* @__PURE__ */ jsx53(Logo, { size: 32 }),
+          /* @__PURE__ */ jsx53("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
         ] }),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           "button",
           {
             ...attrs,
@@ -1776,7 +1833,13 @@ function DefaultSettingsOidc({
               setValue("unlink", attrs.value);
               setValue("method", "oidc");
             },
-            children: /* @__PURE__ */ jsx52(trash_default, { className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover" })
+            children: /* @__PURE__ */ jsx53(
+              trash_default,
+              {
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                size: 24
+              }
+            )
           }
         )
       ] }, attrs.value);
@@ -1785,47 +1848,62 @@ function DefaultSettingsOidc({
 }
 
 // src/theme/default/components/settings/settings-passkey.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useComponents as useComponents4 } from "@ory/elements-react";
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
 }) {
+  const { Node } = useComponents4();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsx53("div", { className: "flex gap-3 items-end max-w-[60%]", children: triggerButton ? /* @__PURE__ */ jsx53(
-      DefaultButton,
+  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsx54("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx54(
+      Node.Button,
       {
         node: triggerButton,
         attributes: triggerButton.attributes,
         onClick: triggerButton.onClick
       }
-    ) : null }),
-    hasRemoveButtons ? /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx53(DefaultHorizontalDivider, {}),
-      /* @__PURE__ */ jsx53("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+    ) }),
+    hasRemoveButtons ? /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx54(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ jsx54("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
-        const diaplyName = "display_name" in context ? context.display_name : null;
+        const displayName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
-        return /* @__PURE__ */ jsxs32(
+        return /* @__PURE__ */ jsxs31(
           "div",
           {
             className: "flex justify-between gap-6",
             children: [
-              /* @__PURE__ */ jsx53(passkey_default, { size: 32, className: "text-dialog-fg-default" }),
-              /* @__PURE__ */ jsxs32("div", { className: "flex-1 flex-col", children: [
-                /* @__PURE__ */ jsx53("p", { className: "text-sm font-medium text-dialog-fg-subtle", children: diaplyName }),
-                /* @__PURE__ */ jsx53("span", { className: "text-sm text-dialog-fg-mute", children: keyId })
+              /* @__PURE__ */ jsx54(
+                passkey_default,
+                {
+                  size: 32,
+                  className: "text-interface-foreground-default-primary"
+                }
+              ),
+              /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                /* @__PURE__ */ jsx54("span", { className: "text-sm text-interface-foreground-default-tertiary", children: keyId })
               ] }),
-              addedAt && /* @__PURE__ */ jsx53("p", { className: "text-sm self-center text-dialog-fg-mute", children: new Date(addedAt).toLocaleDateString() }),
-              /* @__PURE__ */ jsx53(
+              addedAt && /* @__PURE__ */ jsx54("p", { className: "self-center text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                dateStyle: "long"
+              }).format(new Date(addedAt)) }),
+              /* @__PURE__ */ jsx54(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover",
-                  children: /* @__PURE__ */ jsx53(trash_default, { size: 20 })
+                  children: /* @__PURE__ */ jsx54(
+                    trash_default,
+                    {
+                      className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                      size: 24
+                    }
+                  )
                 }
               )
             ]
@@ -1839,36 +1917,36 @@ function DefaultSettingsPasskey({
 
 // src/theme/default/assets/icons/download.svg
 import * as React26 from "react";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var SvgDownload = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx54("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx54("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
+  return /* @__PURE__ */ jsx55("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx55("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
 };
 var download_default = SvgDownload;
 
 // src/theme/default/assets/icons/eye.svg
 import * as React27 from "react";
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
 var SvgEye = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx55("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsxs33("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx55("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
-    /* @__PURE__ */ jsx55("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
+  return /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsxs32("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx56("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ jsx56("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
   ] }) });
 };
 var eye_default = SvgEye;
 
 // src/theme/default/assets/icons/refresh.svg
 import * as React28 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var SvgRefresh = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx56("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
+  return /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx57("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
 };
 var refresh_default = SvgRefresh;
 
 // src/theme/default/components/settings/settings-recovery-codes.tsx
-import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
@@ -1885,63 +1963,66 @@ function DefaultSettingsRecoveryCodes({
     element.click();
   };
   const hasCodes = codes.length >= 1;
-  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsx57(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ jsxs34("div", { className: "flex justify-end gap-4", children: [
-      regnerateButton && /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsx58(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ jsxs33("div", { className: "flex justify-end gap-4", children: [
+      regnerateButton && /* @__PURE__ */ jsx58(
         "button",
         {
           ...regnerateButton.attributes,
           type: "submit",
-          children: /* @__PURE__ */ jsx57(
+          children: /* @__PURE__ */ jsx58(
             refresh_default,
             {
               size: 24,
-              className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover"
+              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
             }
           )
         }
       ),
-      revealButton && /* @__PURE__ */ jsx57(
+      revealButton && /* @__PURE__ */ jsx58(
         "button",
         {
           ...revealButton.attributes,
           type: "submit",
-          children: /* @__PURE__ */ jsx57(
+          children: /* @__PURE__ */ jsx58(
             eye_default,
             {
               size: 24,
-              className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover"
+              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
             }
           )
         }
       ),
-      hasCodes ? /* @__PURE__ */ jsx57(
+      hasCodes && /* @__PURE__ */ jsx58("button", { onClick: onDownload, type: "button", children: /* @__PURE__ */ jsx58(
         download_default,
         {
           size: 24,
-          onClick: onDownload,
-          className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover"
+          className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
         }
-      ) : null
+      ) })
     ] }),
-    hasCodes ? /* @__PURE__ */ jsx57("div", { className: "rounded-border-radius-cards bg-bg-default ring-1 ring-dialog-border-default p-6", children: /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-6 gap-4 flex-wrap text-dialog-fg-default text-sm", children: codes.map((code) => /* @__PURE__ */ jsx57("p", { children: code }, code)) }) }) : null
+    hasCodes ? /* @__PURE__ */ jsx58("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx58("div", { className: "grid grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary", children: codes.map((code) => /* @__PURE__ */ jsx58("p", { children: code }, code)) }) }) : null
   ] });
 }
 
+// src/theme/default/components/settings/settings-top.tsx
+import { useComponents as useComponents5 } from "@ory/elements-react";
+
 // src/theme/default/assets/icons/qrcode.svg
 import * as React29 from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var SvgQrcode = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx58("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
+  return /* @__PURE__ */ jsx59("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx59("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
 };
 var qrcode_default = SvgQrcode;
 
 // src/theme/default/components/settings/settings-top.tsx
-import { jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
 function DefaultSettingsTotp(props) {
   var _a;
+  const { Node, Card } = useComponents5();
   if ("totpUnlink" in props && props.totpUnlink) {
     const {
       type,
@@ -1950,21 +2031,21 @@ function DefaultSettingsTotp(props) {
       node_type: _ignoredNodeType,
       ...buttonAttrs
     } = (_a = props.totpUnlink) == null ? void 0 : _a.attributes;
-    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsx59("div", { className: "col-span-full", children: /* @__PURE__ */ jsx59(DefaultHorizontalDivider, {}) }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex gap-6 items-center col-span-full", children: [
-        /* @__PURE__ */ jsx59("div", { className: "size-8 aspect-square ", children: /* @__PURE__ */ jsx59(qrcode_default, { size: 32 }) }),
-        /* @__PURE__ */ jsx59("div", { className: "flex flex-col mr-auto", children: /* @__PURE__ */ jsx59("p", { className: "text-dialog-fg-subtle text-sm font-medium", children: "Authenticator app" }) }),
-        /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx60("div", { className: "col-span-full", children: /* @__PURE__ */ jsx60(Card.Divider, {}) }),
+      /* @__PURE__ */ jsxs34("div", { className: "col-span-full flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx60("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx60(qrcode_default, { size: 32 }) }),
+        /* @__PURE__ */ jsx60("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx60("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+        /* @__PURE__ */ jsx60(
           "button",
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx60(
               trash_default,
               {
-                size: 24,
-                className: "text-links-link-mute-default hover:text-links-link-mute-hover"
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                size: 24
               }
             )
           }
@@ -1973,10 +2054,10 @@ function DefaultSettingsTotp(props) {
     ] });
   }
   if ("totpSecret" in props) {
-    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsx59("div", { className: "col-span-full", children: /* @__PURE__ */ jsx59(DefaultHorizontalDivider, {}) }),
-      /* @__PURE__ */ jsx59("div", { className: "bg-dialog-bg-subtle p-8 rounded-xl flex justify-center", children: /* @__PURE__ */ jsx59("div", { className: "h-44 aspect-square bg-[white] rounded", children: /* @__PURE__ */ jsx59("div", { className: "mix-blend-multiply -m-3 antialiased", children: /* @__PURE__ */ jsx59(
-        DefaultImage,
+    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx60("div", { className: "col-span-full", children: /* @__PURE__ */ jsx60(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ jsx60("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx60("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx60("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx60(
+        Node.Image,
         {
           node: props.totpImage,
           attributes: {
@@ -1984,14 +2065,14 @@ function DefaultSettingsTotp(props) {
           }
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx59(
-          DefaultLabel,
+      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx60(
+          Node.Label,
           {
             node: props.totpSecret,
             attributes: props.totpSecret.attributes,
-            children: /* @__PURE__ */ jsx59(
-              DefaultInput,
+            children: /* @__PURE__ */ jsx60(
+              Node.Input,
               {
                 node: props.totpSecret,
                 attributes: {
@@ -2005,13 +2086,13 @@ function DefaultSettingsTotp(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsx59(
-          DefaultLabel,
+        /* @__PURE__ */ jsx60(
+          Node.Label,
           {
             attributes: props.totpInput.attributes,
             node: props.totpInput,
-            children: /* @__PURE__ */ jsx59(
-              DefaultInput,
+            children: /* @__PURE__ */ jsx60(
+              Node.Input,
               {
                 node: props.totpInput,
                 attributes: props.totpInput.attributes
@@ -2024,32 +2105,36 @@ function DefaultSettingsTotp(props) {
   }
 }
 
+// src/theme/default/components/settings/settings-webauthn.tsx
+import { useComponents as useComponents6 } from "@ory/elements-react";
+
 // src/theme/default/assets/icons/key.svg
 import * as React30 from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var SvgKey = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx60("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx60("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
+  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx61("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
 };
 var key_default = SvgKey;
 
 // src/theme/default/components/settings/settings-webauthn.tsx
-import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
   removeButtons
 }) {
+  const { Node, Card } = useComponents6();
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs36("div", { className: "flex gap-3 items-end max-w-[60%]", children: [
-      /* @__PURE__ */ jsx61("div", { className: "flex-1", children: /* @__PURE__ */ jsx61(
-        DefaultLabel,
+  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex max-w-[60%] items-end gap-3", children: [
+      /* @__PURE__ */ jsx62("div", { className: "flex-1", children: /* @__PURE__ */ jsx62(
+        Node.Label,
         {
           node: nameInput,
           attributes: nameInput.attributes,
-          children: /* @__PURE__ */ jsx61(
-            DefaultInput,
+          children: /* @__PURE__ */ jsx62(
+            Node.Input,
             {
               node: nameInput,
               attributes: nameInput.attributes
@@ -2057,8 +2142,8 @@ function DefaultSettingsWebauthn({
           )
         }
       ) }),
-      triggerButton ? /* @__PURE__ */ jsx61(
-        DefaultButton,
+      triggerButton ? /* @__PURE__ */ jsx62(
+        Node.Button,
         {
           node: triggerButton,
           attributes: triggerButton.attributes,
@@ -2066,32 +2151,45 @@ function DefaultSettingsWebauthn({
         }
       ) : null
     ] }),
-    hasRemoveButtons ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx61(DefaultHorizontalDivider, {}),
-      /* @__PURE__ */ jsx61("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+    hasRemoveButtons ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx62(Card.Divider, {}),
+      /* @__PURE__ */ jsx62("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
         const diaplyName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
-        return /* @__PURE__ */ jsxs36(
+        return /* @__PURE__ */ jsxs35(
           "div",
           {
             className: "flex justify-between gap-6",
             children: [
-              /* @__PURE__ */ jsx61(key_default, { size: 32, className: "text-dialog-fg-default" }),
-              /* @__PURE__ */ jsxs36("div", { className: "flex-1 flex-col", children: [
-                /* @__PURE__ */ jsx61("p", { className: "text-sm font-medium text-dialog-fg-subtle", children: diaplyName }),
-                /* @__PURE__ */ jsx61("span", { className: "text-sm text-dialog-fg-mute", children: keyId })
+              /* @__PURE__ */ jsx62(
+                key_default,
+                {
+                  size: 32,
+                  className: "text-interface-foreground-default-primary"
+                }
+              ),
+              /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx62("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: diaplyName }),
+                /* @__PURE__ */ jsx62("span", { className: "text-sm text-interface-foreground-default-tertiary", children: keyId })
               ] }),
-              addedAt && /* @__PURE__ */ jsx61("p", { className: "text-sm self-center text-dialog-fg-mute", children: new Date(addedAt).toLocaleDateString() }),
-              /* @__PURE__ */ jsx61(
+              addedAt && /* @__PURE__ */ jsx62("p", { className: "self-center text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                dateStyle: "long"
+              }).format(new Date(addedAt)) }),
+              /* @__PURE__ */ jsx62(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover",
-                  children: /* @__PURE__ */ jsx61(trash_default, { size: 20 })
+                  children: /* @__PURE__ */ jsx62(
+                    trash_default,
+                    {
+                      className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                      size: 24
+                    }
+                  )
                 }
               )
             ]
@@ -2151,12 +2249,12 @@ function getOryComponents(overrides) {
 }
 
 // src/theme/default/flows/error.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function Error({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsx62("div", { children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ jsx63("div", { children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx
@@ -2165,7 +2263,7 @@ import {
   OryProvider,
   OryTwoStepCard
 } from "@ory/elements-react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function Login({
   flow,
   config,
@@ -2173,14 +2271,14 @@ function Login({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     OryProvider,
     {
       config,
       flow,
       flowType: FlowType8.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx63(OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsx64(OryTwoStepCard, {})
     }
   );
 }
@@ -2191,7 +2289,7 @@ import {
   OryProvider as OryProvider2,
   OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function Recovery({
   flow,
   config,
@@ -2199,14 +2297,14 @@ function Recovery({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     OryProvider2,
     {
       config,
       flow,
       flowType: FlowType9.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx64(OryTwoStepCard2, {})
+      children: children != null ? children : /* @__PURE__ */ jsx65(OryTwoStepCard2, {})
     }
   );
 }
@@ -2217,7 +2315,7 @@ import {
   OryProvider as OryProvider3,
   OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function Registration({
   flow,
   children,
@@ -2225,14 +2323,14 @@ function Registration({
   config
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     OryProvider3,
     {
       config,
       flow,
       flowType: FlowType10.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx65(OryTwoStepCard3, {})
+      children: children != null ? children : /* @__PURE__ */ jsx66(OryTwoStepCard3, {})
     }
   );
 }
@@ -2244,7 +2342,7 @@ import {
   OryProvider as OryProvider4,
   OrySettingsCard
 } from "@ory/elements-react";
-import { Fragment as Fragment4, jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -2252,16 +2350,16 @@ function Settings({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     OryProvider4,
     {
       config,
       flow,
       flowType: FlowType11.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs37(Fragment4, { children: [
-        /* @__PURE__ */ jsx66(HeadlessPageHeader, {}),
-        /* @__PURE__ */ jsx66(OrySettingsCard, {})
+      children: children != null ? children : /* @__PURE__ */ jsxs36(Fragment4, { children: [
+        /* @__PURE__ */ jsx67(HeadlessPageHeader, {}),
+        /* @__PURE__ */ jsx67(OrySettingsCard, {})
       ] })
     }
   );
@@ -2273,7 +2371,7 @@ import {
   OryProvider as OryProvider5,
   OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function Verification({
   flow,
   config,
@@ -2281,22 +2379,24 @@ function Verification({
   components: flowOverrideComponents
 }) {
   const components = getOryComponents(flowOverrideComponents);
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     OryProvider5,
     {
       config,
       flow,
       flowType: FlowType12.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsx67(OryTwoStepCard4, {})
+      children: children != null ? children : /* @__PURE__ */ jsx68(OryTwoStepCard4, {})
     }
   );
 }
 export {
+  DefaultButtonSocial,
   DefaultCard,
   DefaultCardContent,
   DefaultCardFooter,
   DefaultCardHeader,
+  DefaultCardLayout,
   DefaultCardLogo,
   DefaultCurrentIdentifierButton,
   DefaultFormContainer,