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

package/dist/theme/default/index.mjs

@@ -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,26 +405,32 @@ function DefaultCurrentIdentifierButton() {
     "autocomplete",
     "node_type"
   ]);
-  return /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs5(
     "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",
+      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",
       ...attributes,
       href: initFlowUrl,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
       children: [
-        /* @__PURE__ */ jsx6(arrow_left_default, { size: 16, className: "text-button-identifier-fg-subtle" }),
+        /* @__PURE__ */ jsx6(
+          arrow_left_default,
+          {
+            size: 16,
+            className: "text-button-identifier-fg-subtle shrink-0"
+          }
+        ),
         /* @__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 })
       ]
     }
-  ) });
+  );
 }
 function getBackButtonNode(flowType, nodes) {
   let nodeBackButton;
   switch (flowType) {
     case FlowType3.Login:
       nodeBackButton = nodes.find(
-        (node) => "name" in node.attributes && node.attributes.name === "identifier" && node.group === "identifier_first"
+        (node) => "name" in node.attributes && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
       );
       break;
     case FlowType3.Registration:
@@ -443,10 +471,7 @@ function InnerCardHeader({ title, text }) {
 }
 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 });
 }
 
@@ -478,20 +503,281 @@ 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";
+
+// src/theme/default/provider-logos/apple.svg
+import * as React4 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
+var SvgApple = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx10("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__ */ jsx10("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 jsx11 } from "react/jsx-runtime";
+var SvgAuth0 = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx11("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__ */ jsx11("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 jsx12, 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__ */ jsx12("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__ */ jsx12("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 jsx13, 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__ */ jsx13("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__ */ jsx13("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__ */ jsx13("defs", { children: /* @__PURE__ */ jsx13("clipPath", { id: "facebook_svg__a", children: /* @__PURE__ */ jsx13("rect", { fill: "#fff" }) }) })
+  ] });
+};
+var facebook_default = SvgFacebook;
+
+// src/theme/default/provider-logos/generic.svg
+import * as React8 from "react";
+import { jsx as jsx14, 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__ */ jsx14("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx14("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
+    /* @__PURE__ */ jsx14("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 jsx15 } from "react/jsx-runtime";
+var SvgGithub = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx15("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__ */ jsx15("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 jsx16, 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__ */ jsx16("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__ */ jsx16("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__ */ jsx16("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__ */ jsx16("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 jsx17, 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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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 jsx18, 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__ */ jsx18("rect", { x: 2, y: 2, fill: "#1275B1", rx: 14 }),
+    /* @__PURE__ */ jsx18("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 jsx19, 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__ */ jsx19("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
+    /* @__PURE__ */ jsx19("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
+    /* @__PURE__ */ jsx19("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
+    /* @__PURE__ */ jsx19("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 jsx20, 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__ */ jsx20("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__ */ jsx20("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__ */ jsx20("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__ */ jsx20("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 jsx21, 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__ */ jsx21("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
+    /* @__PURE__ */ jsx21("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 jsx22, 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__ */ jsx22("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
+    /* @__PURE__ */ jsx22("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 { jsx as jsx23, jsxs as jsxs18 } 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 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__ */ jsxs18(
+    "button",
+    {
+      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 }
+      ),
+      value: attributes.value,
+      type: "submit",
+      name: "provider",
+      ...props,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx23("span", { className: "w-5 h-5", children: Logo ? /* @__PURE__ */ jsx23(
+          Logo,
+          {
+            size: 20
+          }
+        ) : /* @__PURE__ */ jsx23("span", { className: "rounded-full aspect-square border flex items-center justify-center text-xs", children: provider.slice(0, 2) }) }),
+        showLabel && node.meta.label ? /* @__PURE__ */ jsx23("span", { className: "text-sm text-left leading-none font-medium text-forms-fg-default flex-grow", children: uiTextToFormattedMessage(node.meta.label, intl) }) : null
+      ]
+    }
+  );
+}
+DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx23(DefaultButtonSocial, { ...props, logos: logos2 });
+function DefaultSocialButtonContainer({
+  children,
+  nodes
+}) {
+  return /* @__PURE__ */ jsx23(
+    "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 jsx24 } from "react/jsx-runtime";
 function DefaultFormContainer({
   children,
   onSubmit,
   action,
   method
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx24(
     "form",
     {
       onSubmit,
@@ -504,11 +790,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__ */ jsx24(
     "section",
     {
       className: cn(
@@ -519,56 +805,57 @@ function DefaultMessageContainer({ children }) {
   );
 }
 function DefaultMessage({ message }) {
-  const intl = useIntl3();
-  return /* @__PURE__ */ jsx10(
+  const intl = useIntl4();
+  return /* @__PURE__ */ jsx24(
     "span",
     {
-      className: cn("text-sm mt-1 leading-normal", {
+      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"
       }),
-      children: uiTextToFormattedMessage(message, intl)
+      ...messageTestId(message),
+      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 jsx25 } 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__ */ jsx25("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__ */ jsx25("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 jsx26 } 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__ */ jsx26("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__ */ jsx26("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 jsx27 } 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__ */ jsx27("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__ */ jsx27("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 jsx28 } 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__ */ jsx28("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__ */ jsx28("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;
 
@@ -578,7 +865,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 jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var iconsMap = {
   code: code_default,
   passkey: passkey_default,
@@ -589,19 +876,22 @@ 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__ */ jsx29("div", { className: "w-full hover:bg-forms-bg-hover px-2 py-1 rounded", children: /* @__PURE__ */ jsxs19(
     "button",
     {
       className: "flex text-left py-2 gap-3 cursor-pointer",
       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__ */ jsx29("div", { className: "flex-none w-4 h-4 mt-[2px]", children: Icon && /* @__PURE__ */ jsx29(Icon, { size: 20, className: "text-forms-fg-default" }) }),
+        /* @__PURE__ */ jsxs19("div", { className: "flex-1 text-sm leading-normal", children: [
+          /* @__PURE__ */ jsx29("div", { className: "text-forms-fg-default text-sm", children: intl.formatMessage({ id: `two-step.${group}.title` }) }),
+          /* @__PURE__ */ jsx29("div", { className: "text-forms-fg-mute text-sm", children: intl.formatMessage({ id: `two-step.${group}.description` }) })
         ] })
       ]
     }
@@ -611,15 +901,15 @@ function DefaultAuthMethodListItem({
 // src/theme/default/components/form/button.tsx
 import { FlowType as FlowType5, 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";
+import { useIntl as useIntl6 } from "react-intl";
 
 // src/theme/default/components/form/spinner.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function Spinner({ className }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs20(
     "svg",
     {
       "aria-hidden": "true",
@@ -632,7 +922,7 @@ function Spinner({ className }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx16("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx30("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx30(
           "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",
@@ -641,7 +931,7 @@ function Spinner({ className }) {
             strokeLinejoin: "round"
           }
         ) }),
-        /* @__PURE__ */ jsx16("defs", { children: /* @__PURE__ */ jsx16("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx30("defs", { children: /* @__PURE__ */ jsx30("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx30(
           "rect",
           {
             width: "24",
@@ -656,9 +946,9 @@ function Spinner({ className }) {
 }
 
 // src/theme/default/components/form/button.tsx
-import { useOryFlow as useOryFlow6 } from "@ory/elements-react";
+import { useOryFlow as useOryFlow7 } from "@ory/elements-react";
 import { cva } from "class-variance-authority";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx31, 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",
@@ -711,16 +1001,16 @@ var DefaultButton = ({
     // End of skipped attributes
     ...rest
   } = attributes;
-  const intl = useIntl5();
+  const intl = useIntl6();
   const label = getNodeLabel(node);
-  const { flowType } = useOryFlow6();
+  const { flowType } = useOryFlow7();
   const {
     formState: { isSubmitting },
     setValue
   } = useFormContext2();
   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,
@@ -743,8 +1033,8 @@ var DefaultButton = ({
       disabled: (_a = rest.disabled) != null ? _a : true,
       "data-loading": isSubmitting,
       children: [
-        isSubmitting ? /* @__PURE__ */ jsx17(Spinner, {}) : null,
-        label ? uiTextToFormattedMessage2(label, intl) : ""
+        isSubmitting ? /* @__PURE__ */ jsx31(Spinner, {}) : null,
+        label ? uiTextToFormattedMessage3(label, intl) : ""
       ]
     }
   );
@@ -754,18 +1044,18 @@ DefaultButton.displayName = "DefaultButton";
 // src/theme/default/components/form/checkbox.tsx
 import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
 import {
-  messageTestId,
-  uiTextToFormattedMessage as uiTextToFormattedMessage4
+  messageTestId as messageTestId2,
+  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)) {
@@ -813,7 +1103,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 jsx32 } from "react/jsx-runtime";
 var linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
 function computeLabelElements(labelText) {
   const elements = [];
@@ -829,7 +1119,7 @@ function computeLabelElements(labelText) {
       elements.push(labelText.slice(lastIndex, matchStart));
     }
     elements.push(
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx32(
         "a",
         {
           href: url,
@@ -849,18 +1139,18 @@ 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__ */ jsx32(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 jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function CheckboxSVG() {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       className: "absolute w-4 h-4 hidden peer-checked:block",
@@ -870,14 +1160,14 @@ function CheckboxSVG() {
       viewBox: "0 0 16 16",
       fill: "none",
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx33(
           "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(
+        /* @__PURE__ */ jsx33(
           "path",
           {
             fillRule: "evenodd",
@@ -904,11 +1194,11 @@ 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(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: "flex antialiased gap-3 self-stretch item-start",
@@ -916,8 +1206,8 @@ var DefaultCheckbox = ({
         setChecked(!checked);
       },
       children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex h-5 items-center", children: [
-          /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsxs22("div", { className: "flex h-5 items-center", children: [
+          /* @__PURE__ */ jsx33(
             "input",
             {
               ...attributes,
@@ -932,16 +1222,16 @@ var DefaultCheckbox = ({
               ...register(name, { value })
             }
           ),
-          /* @__PURE__ */ jsx19(CheckboxSVG, {})
+          /* @__PURE__ */ jsx33(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(
+        /* @__PURE__ */ jsxs22("div", { className: "text-sm items-center", children: [
+          /* @__PURE__ */ jsx33("label", { className: "text-sm font-normal leading-normal text-forms-fg-default", children: /* @__PURE__ */ jsx33(CheckboxLabel, { label }) }),
+          node.messages.map((message) => /* @__PURE__ */ jsx33(
             "span",
             {
               className: "text-sm text-red-900 mt-1",
-              ...messageTestId(message),
-              children: uiTextToFormattedMessage4(message, intl)
+              ...messageTestId2(message),
+              children: uiTextToFormattedMessage5(message, intl)
             },
             message.id
           ))
@@ -952,32 +1242,32 @@ var DefaultCheckbox = ({
 };
 
 // src/theme/default/components/form/group-container.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function DefaultGroupContainer({ children }) {
-  return /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-1 gap-6", children });
+  return /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-1 gap-6", children });
 }
 
 // src/theme/default/components/form/horizontal-divider.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function DefaultHorizontalDivider() {
-  return /* @__PURE__ */ jsx21("hr", { className: "border-dialog-border-default" });
+  return /* @__PURE__ */ jsx35("hr", { className: "border-dialog-border-default" });
 }
 
 // src/theme/default/components/form/image.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function DefaultImage({ attributes }) {
-  return /* @__PURE__ */ jsx22("figure", { children: /* @__PURE__ */ jsx22("img", { ...attributes }) });
+  return /* @__PURE__ */ jsx36("figure", { children: /* @__PURE__ */ jsx36("img", { ...attributes }) });
 }
 
 // src/theme/default/components/form/input.tsx
 import { FlowType as FlowType6, getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
 import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage5,
-  useOryFlow as useOryFlow7
+  uiTextToFormattedMessage as uiTextToFormattedMessage6,
+  useOryFlow as useOryFlow8
 } 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 { useIntl as useIntl9 } from "react-intl";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var DefaultInput = ({
   node,
   attributes,
@@ -993,18 +1283,18 @@ var DefaultInput = ({
     node_type: _,
     ...rest
   } = attributes;
-  const intl = useIntl8();
-  const { flowType } = useOryFlow7();
+  const intl = useIntl9();
+  const { flowType } = useOryFlow8();
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
       defaultMessage: "Enter your {placeholder}"
     },
     {
-      placeholder: uiTextToFormattedMessage5(label, intl)
+      placeholder: uiTextToFormattedMessage6(label, intl)
     }
   ) : "";
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx37(
     "input",
     {
       ...rest,
@@ -1024,41 +1314,58 @@ var DefaultInput = ({
 };
 
 // src/theme/default/components/form/label.tsx
-import { FlowType as FlowType7, getNodeLabel as getNodeLabel4 } from "@ory/client-fetch";
 import {
-  messageTestId as messageTestId2,
-  uiTextToFormattedMessage as uiTextToFormattedMessage6,
-  useOryFlow as useOryFlow8
+  FlowType as FlowType7,
+  getNodeLabel as getNodeLabel4,
+  instanceOfUiText
+} from "@ory/client-fetch";
+import {
+  messageTestId as messageTestId3,
+  uiTextToFormattedMessage as uiTextToFormattedMessage7,
+  useComponents as useComponents2,
+  useOryFlow as useOryFlow9
 } from "@ory/elements-react";
-import { useIntl as useIntl9 } from "react-intl";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useFormContext as useFormContext4 } from "react-hook-form";
+import { useIntl as useIntl10 } from "react-intl";
+import { jsx as jsx38, 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")
+  );
+}
 function DefaultLabel({
   node,
   children,
   attributes,
   ...rest
 }) {
-  const intl = useIntl9();
+  const intl = useIntl10();
   const label = getNodeLabel4(node);
-  const { config, flowType, flow } = useOryFlow8();
+  const { Message } = useComponents2();
+  const { config, flowType, flow } = useOryFlow9();
+  const { setValue, formState } = useFormContext4();
   const isPassword = attributes.type === "password";
-  const hasResendNode = flow.ui.nodes.some(
-    (n) => "name" in n.attributes && n.attributes.name === "email" && n.attributes.type === "submit"
-  );
-  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 resendNode = findResendNode(flow.ui.nodes);
+  const handleResend = () => {
+    if ((resendNode == null ? void 0 : resendNode.attributes) && "name" in resendNode.attributes) {
+      setValue(resendNode.attributes.name, resendNode.attributes.value);
+    }
+  };
+  const fieldError = formState.errors[attributes.name];
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col antialiased gap-1", children: [
+    label && /* @__PURE__ */ jsxs23("span", { className: "inline-flex justify-between", children: [
+      /* @__PURE__ */ jsx38(
         "label",
         {
-          ...messageTestId2(label),
+          ...messageTestId3(label),
           className: "text-sm font-medium leading-normal",
           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(
+      /* @__PURE__ */ jsx38(
         "a",
         {
           href: config.project.recovery_ui_url,
@@ -1069,68 +1376,58 @@ function DefaultLabel({
           })
         }
       ),
-      hasResendNode && /* @__PURE__ */ jsx24(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx38(
         "button",
         {
           type: "submit",
-          name: "method",
-          value: "code",
+          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",
           children: intl.formatMessage({ id: "identities.messages.1070008" })
         }
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ jsx24(
-      "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"
-        }),
-        ...messageTestId2(message),
-        children: uiTextToFormattedMessage6(message, intl)
-      },
-      message.id
-    ))
+    node.messages.map((message) => /* @__PURE__ */ jsx38(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx38(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 jsx39 } 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__ */ jsx39(
     "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"
       ),
-      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 useFormContext4 } from "react-hook-form";
+import { useFormContext as useFormContext5 } 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 jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+var InputOTP = React21.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx40(
   OTPInput,
   {
     ref,
@@ -1143,12 +1440,12 @@ 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__ */ jsx40("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,
@@ -1160,7 +1457,7 @@ var InputOTPSlot = React8.forwardRef(({ index, className, ...props }, ref) => {
       ...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" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx40("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx40("div", { className: "h-4 w-px animate-caret-blink bg-branding-bg-default duration-750" }) })
       ]
     }
   );
@@ -1168,23 +1465,23 @@ 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 { jsx as jsx41 } from "react/jsx-runtime";
 var DefaultPinCodeInput = ({ attributes }) => {
-  const { setValue, watch } = useFormContext4();
+  const { setValue, watch } = useFormContext5();
   const { maxlength, name } = attributes;
   const elements = maxlength != null ? maxlength : 6;
   const handleInputChange = (v) => {
     setValue(name, v);
   };
   const value = watch(name);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx41(
     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(
+      children: /* @__PURE__ */ jsx41(InputOTPGroup, { className: "w-full space-x-2 justify-between", children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx41(
         InputOTPSlot,
         {
           index,
@@ -1197,301 +1494,42 @@ var DefaultPinCodeInput = ({ attributes }) => {
 };
 
 // src/theme/default/components/form/section.tsx
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } 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 });
+  return /* @__PURE__ */ jsx42("div", { className: "flex flex-col w-80 md:w-[712px] lg:w-[802px] xl:w-[896px]", 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: "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__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx42("h3", { className: "font-medium text-dialog-fg-default", children: title }),
+      /* @__PURE__ */ jsx42("span", { className: "text-sm text-dialog-fg-subtle", 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" })
-  ] });
+  return /* @__PURE__ */ jsx42("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 });
 };
-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",
-    {
-      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 }
-      ),
-      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
-      ]
-    }
-  );
-}
-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 jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl12();
-  return /* @__PURE__ */ jsxs27(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs26(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))
   ] });
 }
 
 // src/theme/default/components/generic/page-header.tsx
-import { useComponents as useComponents2 } from "@ory/elements-react";
+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";
@@ -1526,10 +1564,10 @@ 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 jsx45, 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: [
+  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__ */ jsxs27("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" })
   ] }) });
@@ -1662,7 +1700,7 @@ 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 jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const { config } = useOryFlow10();
   const initials = getUserInitials(session);
@@ -1674,21 +1712,21 @@ var UserMenu = ({ session }) => {
   useEffect(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
-  return /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
+  return /* @__PURE__ */ jsxs28(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__ */ jsxs28(DropdownMenuContent, { children: [
+      /* @__PURE__ */ jsxs28(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__ */ jsxs28("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 })
         ] })
       ] }),
-      /* @__PURE__ */ jsx49(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs29("a", { href: "/settings", children: [
+      /* @__PURE__ */ jsx49(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs28("a", { href: "/settings", children: [
         /* @__PURE__ */ jsx49(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(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__ */ jsx49(logout_default, { size: 16 }),
         " Logout"
       ] }) })
@@ -1698,11 +1736,11 @@ 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 jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
-  const { Card } = useComponents2();
+  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: [
+  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__ */ jsxs29("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 })
   ] }) }) });
@@ -1718,16 +1756,16 @@ var SvgTrash = (props) => {
 var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { useFormContext as useFormContext5 } from "react-hook-form";
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useFormContext as useFormContext6 } from "react-hook-form";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
   unlinkButtons
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const { setValue } = useFormContext5();
-  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
+  const { setValue } = useFormContext6();
+  return /* @__PURE__ */ jsxs30("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 attrs = button.attributes;
       return /* @__PURE__ */ jsx52(
@@ -1750,8 +1788,8 @@ function DefaultSettingsOidc({
       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: [
+      return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxs30("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 })
         ] }),
@@ -1773,13 +1811,13 @@ function DefaultSettingsOidc({
 }
 
 // src/theme/default/components/settings/settings-passkey.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
 }) {
   const hasRemoveButtons = removeButtons.length > 0;
-  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-8", children: [
+  return /* @__PURE__ */ jsxs31("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,
       {
@@ -1788,7 +1826,7 @@ function DefaultSettingsPasskey({
         onClick: triggerButton.onClick
       }
     ) : null }),
-    hasRemoveButtons ? /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-8", children: [
+    hasRemoveButtons ? /* @__PURE__ */ jsxs31("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) => {
         var _a, _b;
@@ -1796,13 +1834,13 @@ function DefaultSettingsPasskey({
         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__ */ 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__ */ jsxs31("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 })
               ] }),
@@ -1836,10 +1874,10 @@ 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 jsx55, 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: [
+  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__ */ jsxs32("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" })
   ] }) });
@@ -1856,7 +1894,7 @@ var SvgRefresh = (props) => {
 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 jsx57, jsxs as jsxs33 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
@@ -1873,9 +1911,9 @@ function DefaultSettingsRecoveryCodes({
     element.click();
   };
   const hasCodes = codes.length >= 1;
-  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-8", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsx57(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ jsxs34("div", { className: "flex justify-end gap-4", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex justify-end gap-4", children: [
       regnerateButton && /* @__PURE__ */ jsx57(
         "button",
         {
@@ -1927,7 +1965,7 @@ var SvgQrcode = (props) => {
 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 jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 function DefaultSettingsTotp(props) {
   var _a;
   if ("totpUnlink" in props && props.totpUnlink) {
@@ -1938,9 +1976,9 @@ 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: [
+    return /* @__PURE__ */ jsxs34("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__ */ jsxs34("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(
@@ -1961,7 +1999,7 @@ function DefaultSettingsTotp(props) {
     ] });
   }
   if ("totpSecret" in props) {
-    return /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
+    return /* @__PURE__ */ jsxs34("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,
@@ -1972,7 +2010,7 @@ function DefaultSettingsTotp(props) {
           }
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
         /* @__PURE__ */ jsx59(
           DefaultLabel,
           {
@@ -2022,15 +2060,15 @@ var SvgKey = (props) => {
 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 jsx61, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
   removeButtons
 }) {
   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: [
+  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex gap-3 items-end max-w-[60%]", children: [
       /* @__PURE__ */ jsx61("div", { className: "flex-1", children: /* @__PURE__ */ jsx61(
         DefaultLabel,
         {
@@ -2054,7 +2092,7 @@ function DefaultSettingsWebauthn({
         }
       ) : null
     ] }),
-    hasRemoveButtons ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-8", children: [
+    hasRemoveButtons ? /* @__PURE__ */ jsxs35("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) => {
         var _a, _b;
@@ -2062,13 +2100,13 @@ function DefaultSettingsWebauthn({
         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__ */ jsxs35("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 })
               ] }),
@@ -2232,7 +2270,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 jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -2247,7 +2285,7 @@ function Settings({
       flow,
       flowType: FlowType11.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs37(Fragment4, { children: [
+      children: children != null ? children : /* @__PURE__ */ jsxs36(Fragment4, { children: [
         /* @__PURE__ */ jsx66(HeadlessPageHeader, {}),
         /* @__PURE__ */ jsx66(OrySettingsCard, {})
       ] })
@@ -2281,6 +2319,7 @@ function Verification({
   );
 }
 export {
+  DefaultButtonSocial,
   DefaultCard,
   DefaultCardContent,
   DefaultCardFooter,