@ory/elements-react 0.0.0-pr.8e964fc1

package/dist/theme/default/index.mjs

@@ -0,0 +1,2571 @@
+"use client"
+
+// src/theme/default/assets/ory-badge-horizontal.svg
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SvgOryBadgeHorizontal = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx("path", { fill: "#0F172A", d: "M18.007 8h-1.71l2.007-3.996L16.296 0h1.711l1.145 2.301L20.327 0H22z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#0F172A", fillRule: "evenodd", d: "M12.902 4.86a2.47 2.47 0 0 0 1.796-2.365v-.038C14.687 1.097 13.592 0 12.245 0H9.037v1.44l1.208 1.985H9.04V8h1.51V4.949h.633L13.04 8h1.775zm-.876-1.431h.223c.52 0 .943-.427.943-.953a.95.95 0 0 0-.943-.952h-1.39zM4 0a4 4 0 1 0-.001 7.999A4 4 0 0 0 4 0M1.524 4a2.476 2.476 0 1 0 4.952 0 2.476 2.476 0 0 0-4.952 0", clipRule: "evenodd" })
+  ] });
+};
+var ory_badge_horizontal_default = SvgOryBadgeHorizontal;
+
+// src/theme/default/assets/ory-badge-vertical.svg
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SvgOryBadgeVertical = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx2("path", { fill: "#0F172A", d: "M8 3.993v1.71L4.004 3.697 0 5.704V3.993l2.301-1.145L0 1.673V0z" }),
+    /* @__PURE__ */ jsx2("path", { fill: "#0F172A", fillRule: "evenodd", d: "M4.86 9.099a2.47 2.47 0 0 0-2.365-1.797h-.038C1.097 7.313 0 8.408 0 9.755v3.208h1.44l1.985-1.208v1.204H8v-1.51H4.949v-.633L8 8.96V7.185zm-1.431.875v-.223a.95.95 0 0 0-.953-.943.95.95 0 0 0-.952.943v1.39zM0 18a4 4 0 1 0 8 0 4 4 0 0 0-8 0m4 2.476a2.476 2.476 0 1 0 0-4.952 2.476 2.476 0 0 0 0 4.952", clipRule: "evenodd" })
+  ] });
+};
+var ory_badge_vertical_default = SvgOryBadgeVertical;
+
+// src/theme/default/components/card/badge.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Badge() {
+  return /* @__PURE__ */ jsxs3("div", { className: "absolute bg-ory-background-default p-2 font-bold max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding sm:right-0 sm:top-8 sm:translate-x-full sm:rounded-r-branding border-ory-border-default border max-sm:py-[7px] sm:pl-[7px]", children: [
+    /* @__PURE__ */ jsx3(ory_badge_horizontal_default, { width: 22, height: 8, className: "sm:hidden" }),
+    /* @__PURE__ */ jsx3(ory_badge_vertical_default, { width: 8, height: 22, className: "max-sm:hidden" })
+  ] });
+}
+
+// src/theme/default/components/card/content.tsx
+function DefaultCardContent({ children }) {
+  return children;
+}
+
+// src/theme/default/components/card/footer.tsx
+import { FlowType } from "@ory/client-fetch";
+import { useOryFlow } from "@ory/elements-react";
+import { useFormContext } from "react-hook-form";
+import { useIntl } from "react-intl";
+
+// src/theme/default/utils/url.ts
+function restartFlowUrl(flow, fallback) {
+  return flow.request_url || appendReturnTo(fallback, flow.return_to);
+}
+function initFlowUrl(sdkUrl, flowType, flow) {
+  const result = `${sdkUrl}/self-service/${flowType}/browser`;
+  const qs = new URLSearchParams();
+  if (flow.oauth2_login_challenge) {
+    qs.set("login_challenge", flow.oauth2_login_challenge);
+  }
+  if (flow.return_to) {
+    qs.set("return_to", flow.return_to);
+  } else if (typeof window !== "undefined") {
+    const searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.has("return_to")) {
+      qs.set("return_to", searchParams.get("return_to") || "");
+    }
+  }
+  if (qs.toString().length === 0) {
+    return result;
+  }
+  return result + "?" + qs.toString();
+}
+function appendReturnTo(url, returnTo) {
+  if (!returnTo) {
+    return url;
+  }
+  const urlObj = new URL(url);
+  urlObj.searchParams.set("return_to", returnTo);
+  return urlObj.toString();
+}
+
+// src/theme/default/components/card/footer.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DefaultCardFooter() {
+  const { flowType } = useOryFlow();
+  switch (flowType) {
+    case FlowType.Login:
+      return /* @__PURE__ */ jsx4(LoginCardFooter, {});
+    case FlowType.Registration:
+      return /* @__PURE__ */ jsx4(RegistrationCardFooter, {});
+    case FlowType.Recovery:
+      return /* @__PURE__ */ jsx4(RecoveryCardFooter, {});
+    case FlowType.Verification:
+      return /* @__PURE__ */ jsx4(VerificationCardFooter, {});
+    default:
+      return null;
+  }
+}
+function LoginCardFooter() {
+  const { config, formState, flow } = useOryFlow();
+  const intl = useIntl();
+  if (!config.project.registration_enabled || formState.current !== "provide_identifier") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
+    intl.formatMessage({
+      id: "login.registration-label",
+      defaultMessage: "No account?"
+    }),
+    " ",
+    /* @__PURE__ */ jsx4(
+      "a",
+      {
+        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+        href: initFlowUrl(config.sdk.url, "registration", flow),
+        "data-testid": "ory/screen/registration/action/login",
+        children: intl.formatMessage({
+          id: "login.registration-button",
+          defaultMessage: "Sign up"
+        })
+      }
+    )
+  ] });
+}
+function findScreenSelectionButton(nodes) {
+  return nodes.find(
+    (node) => node.attributes.node_type === "input" && node.attributes.type === "submit" && node.attributes.name === "screen"
+  );
+}
+function RegistrationCardFooter() {
+  const intl = useIntl();
+  const { config, flow, formState } = useOryFlow();
+  const { setValue } = useFormContext();
+  if (formState.current === "select_method") {
+    return null;
+  }
+  const screenSelectionNode = findScreenSelectionButton(flow.ui.nodes);
+  function handleScreenSelection() {
+    setValue("method", "profile");
+    if (screenSelectionNode) {
+      setValue("screen", "credential-selection");
+    }
+  }
+  return /* @__PURE__ */ jsx4("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ jsx4(Fragment, { children: screenSelectionNode && /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: "font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover",
+      type: "submit",
+      onClick: handleScreenSelection,
+      children: intl.formatMessage({
+        id: "card.footer.select-another-method",
+        defaultMessage: "Select another method"
+      })
+    }
+  ) }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+    intl.formatMessage({
+      id: "registration.login-label",
+      defaultMessage: "Already have an account?"
+    }),
+    " ",
+    /* @__PURE__ */ jsx4(
+      "a",
+      {
+        className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+        href: initFlowUrl(config.sdk.url, "login", flow),
+        "data-testid": "ory/screen/registration/action/login",
+        children: intl.formatMessage({
+          id: "registration.login-button",
+          defaultMessage: "Sign in"
+        })
+      }
+    )
+  ] }) });
+}
+function RecoveryCardFooter() {
+  return null;
+}
+function VerificationCardFooter() {
+  return null;
+}
+
+// src/theme/default/components/card/header.tsx
+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 { useIntl as useIntl2 } from "react-intl";
+function joinWithCommaOr(list, orText = "or") {
+  if (list.length === 0) {
+    return ".";
+  } else if (list.length === 1) {
+    return list[0];
+  } else {
+    const last = list.pop();
+    return `${list.join(", ")} ${orText} ${last}`;
+  }
+}
+function useCardHeaderText(container, opts) {
+  var _a, _b;
+  const nodes = container.nodes;
+  const intl = useIntl2();
+  switch (opts.flowType) {
+    case FlowType2.Recovery:
+      if (nodes.find(
+        (node) => "name" in node.attributes && node.attributes.name === "code"
+      )) {
+        return {
+          title: intl.formatMessage({
+            id: "recovery.title"
+          }),
+          description: intl.formatMessage({
+            id: "identities.messages.1060003"
+          })
+        };
+      }
+      return {
+        title: intl.formatMessage({
+          id: "recovery.title"
+        }),
+        description: intl.formatMessage({
+          id: "recovery.subtitle"
+        })
+      };
+    case FlowType2.Settings:
+      return {
+        title: intl.formatMessage({
+          id: "settings.title"
+        }),
+        description: intl.formatMessage({
+          id: "settings.subtitle"
+        })
+      };
+    case FlowType2.Verification:
+      if (nodes.find(
+        (node) => "name" in node.attributes && node.attributes.name === "code"
+      )) {
+        return {
+          title: intl.formatMessage({
+            id: "verification.title"
+          }),
+          description: intl.formatMessage({
+            id: "identities.messages.1080003"
+          })
+        };
+      }
+      return {
+        title: intl.formatMessage({
+          id: "verification.title"
+        }),
+        description: intl.formatMessage({
+          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")) {
+    switch (opts.flowType) {
+      case FlowType2.Registration:
+        parts.push(
+          intl.formatMessage(
+            { id: "card.header.parts.password.registration" },
+            // TODO: make this generic for other labels
+            { identifierLabel: "email" }
+          )
+        );
+        break;
+      default:
+        parts.push(
+          intl.formatMessage(
+            { id: "card.header.parts.password.login" },
+            // TODO: make this generic for other labels
+            { identifierLabel: "email" }
+          )
+        );
+    }
+  }
+  if (nodes.find((node) => node.group === "oidc")) {
+    parts.push(
+      intl.formatMessage({
+        id: "card.header.parts.oidc"
+      })
+    );
+  }
+  if (nodes.find((node) => node.group === "code")) {
+    parts.push(intl.formatMessage({ id: "card.header.parts.code" }));
+  }
+  if (nodes.find((node) => node.group === "passkey")) {
+    parts.push(intl.formatMessage({ id: "card.header.parts.passkey" }));
+  }
+  if (nodes.find((node) => node.group === "webauthn")) {
+    parts.push(intl.formatMessage({ id: "card.header.parts.webauthn" }));
+  }
+  if (nodes.find((node) => node.group === "identifier_first")) {
+    const identifier = nodes.find(
+      (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.name.startsWith("identifier") && node.attributes.type !== "hidden"
+    );
+    if (identifier) {
+      parts.push(
+        intl.formatMessage(
+          {
+            id: "card.header.parts.identifier-first"
+          },
+          {
+            identifierLabel: (_b = identifier.meta.label) == null ? void 0 : _b.text
+          }
+        )
+      );
+    }
+  }
+  switch (opts.flowType) {
+    case FlowType2.Login:
+      if (opts.flow.refresh) {
+        return {
+          title: intl.formatMessage({
+            id: "login.title-refresh"
+          }),
+          description: intl.formatMessage(
+            {
+              id: "login.subtitle-refresh"
+            },
+            {
+              parts: joinWithCommaOr(parts)
+            }
+          )
+        };
+      }
+      return {
+        title: intl.formatMessage({
+          id: "login.title"
+        }),
+        description: parts.length > 0 ? intl.formatMessage(
+          {
+            id: "login.subtitle"
+          },
+          {
+            parts: joinWithCommaOr(
+              parts,
+              intl.formatMessage({ id: "misc.or" })
+            )
+          }
+        ) : ""
+      };
+    case FlowType2.Registration:
+      return {
+        title: intl.formatMessage({
+          id: "registration.title"
+        }),
+        description: parts.length > 0 ? intl.formatMessage(
+          {
+            id: "registration.subtitle"
+          },
+          {
+            parts: joinWithCommaOr(
+              parts,
+              intl.formatMessage({ id: "misc.or" })
+            )
+          }
+        ) : ""
+      };
+  }
+  return {
+    title: "Error",
+    description: "An error occurred"
+  };
+}
+
+// src/theme/default/components/card/current-identifier-button.tsx
+import { FlowType as FlowType3 } from "@ory/client-fetch";
+import { useOryFlow as useOryFlow2 } from "@ory/elements-react";
+
+// src/theme/default/assets/icons/arrow-left.svg
+import * as React3 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SvgArrowLeft = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", 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__ */ jsx5("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.325h14m-14 0 6 6m-6-6 6-6" }) });
+};
+var arrow_left_default = SvgArrowLeft;
+
+// src/theme/default/utils/attributes.ts
+function omit(obj, keys) {
+  const ret = { ...obj };
+  for (const key of keys) {
+    delete ret[key];
+  }
+  return ret;
+}
+
+// src/theme/default/components/card/current-identifier-button.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function DefaultCurrentIdentifierButton() {
+  const { flow, flowType, config, formState } = useOryFlow2();
+  const ui = flow.ui;
+  if (formState.current === "provide_identifier") {
+    return null;
+  }
+  const nodeBackButton = getBackButtonNode(flowType, ui.nodes);
+  if ((nodeBackButton == null ? void 0 : nodeBackButton.attributes.node_type) !== "input" || !nodeBackButton.attributes.value) {
+    return null;
+  }
+  const initFlowUrl2 = restartFlowUrl(
+    flow,
+    `${config.sdk.url}/self-service/${flowType}/browser`
+  );
+  const attributes = omit(nodeBackButton.attributes, [
+    "autocomplete",
+    "node_type",
+    "maxlength"
+  ]);
+  return /* @__PURE__ */ jsx6(
+    "a",
+    {
+      className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
+      ...attributes,
+      href: initFlowUrl2,
+      title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
+      "data-testid": "ory/screen/login/action/restart",
+      children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
+        /* @__PURE__ */ jsx6(
+          arrow_left_default,
+          {
+            size: 16,
+            stroke: "1",
+            className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
+          }
+        ),
+        /* @__PURE__ */ jsx6("span", { className: "overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.attributes.value })
+      ] })
+    }
+  );
+}
+function getBackButtonNode(flowType, nodes) {
+  let nodeBackButton;
+  switch (flowType) {
+    case FlowType3.Login:
+      nodeBackButton = nodes.find(
+        (node) => "name" in node.attributes && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
+      );
+      break;
+    case FlowType3.Registration:
+      nodeBackButton = guessRegistrationBackButton(nodes);
+      break;
+    case FlowType3.Recovery:
+    case FlowType3.Verification:
+      nodeBackButton = nodes.find(
+        (n) => "name" in n.attributes && n.attributes.name === "email"
+      );
+      break;
+  }
+  return nodeBackButton;
+}
+var backButtonCandiates = [
+  "traits.email",
+  "traits.username",
+  "traits.phone_number"
+];
+function guessRegistrationBackButton(uiNodes) {
+  return uiNodes.find(
+    (node) => "name" in node.attributes && backButtonCandiates.includes(node.attributes.name) && node.group === "default"
+  );
+}
+
+// src/theme/default/components/card/header.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function InnerCardHeader({ title, text }) {
+  const { Card } = useComponents();
+  return /* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-8 antialiased", children: [
+    /* @__PURE__ */ jsx7(Card.Logo, {}),
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx7("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx7("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
+      /* @__PURE__ */ jsx7(DefaultCurrentIdentifierButton, {})
+    ] })
+  ] });
+}
+function DefaultCardHeader() {
+  const context = useOryFlow3();
+  const { title, description } = useCardHeaderText(context.flow.ui, context);
+  return /* @__PURE__ */ jsx7(InnerCardHeader, { title, text: description });
+}
+
+// src/theme/default/components/card/logo.tsx
+import { useOryFlow as useOryFlow4 } from "@ory/elements-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function DefaultCardLogo() {
+  const flow = useOryFlow4();
+  if (flow.config.logoUrl) {
+    return /* @__PURE__ */ jsx8("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
+  }
+  return /* @__PURE__ */ jsx8("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
+}
+
+// src/theme/default/components/card/layout.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function DefaultCardLayout({ children }) {
+  return /* @__PURE__ */ jsx9("main", { className: "p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen", children });
+}
+
+// src/theme/default/components/card/index.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function DefaultCard({ children }) {
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-1 sm:items-center justify-center font-sans items-start w-full sm:w-[480px] sm:max-w-[480px]", children: /* @__PURE__ */ jsxs7("div", { className: "relative grid grid-cols-1 gap-8 sm:rounded-cards sm:border border-form-border-default bg-form-background-default px-8 py-12 sm:px-12 sm:py-14 border-b w-full", children: [
+    children,
+    /* @__PURE__ */ jsx10(Badge, {})
+  ] }) });
+}
+
+// src/theme/default/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/theme/default/components/form/index.tsx
+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";
+
+// src/theme/default/provider-logos/apple.svg
+import * as React4 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SvgApple = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx11("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
+};
+var apple_default = SvgApple;
+
+// src/theme/default/provider-logos/auth0.svg
+import * as React5 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SvgAuth0 = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx12("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
+};
+var auth0_default = SvgAuth0;
+
+// src/theme/default/provider-logos/discord.svg
+import * as React6 from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var SvgDiscord = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx13("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
+    /* @__PURE__ */ jsx13("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
+  ] });
+};
+var discord_default = SvgDiscord;
+
+// src/theme/default/provider-logos/facebook.svg
+import * as React7 from "react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var SvgFacebook = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 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__ */ jsx14("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
+    /* @__PURE__ */ jsx14("path", { fill: "#fff", d: "m21.214 20.282.622-3.952h-3.89v-2.563c0-1.081.542-2.136 2.284-2.136H22V8.267S20.395 8 18.86 8c-3.205 0-5.298 1.893-5.298 5.318v3.012H10v3.952h3.562v9.552q1.073.165 2.191.166 1.12 0 2.192-.166v-9.552z" }),
+    /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs9("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx14("stop", { stopColor: "#18ACFE" }),
+      /* @__PURE__ */ jsx14("stop", { offset: 1, stopColor: "#0163E0" })
+    ] }) })
+  ] });
+};
+var facebook_default = SvgFacebook;
+
+// src/theme/default/provider-logos/generic.svg
+import * as React8 from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var SvgGeneric = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, className: "generic_svg__icon generic_svg__icon-tabler generic_svg__icon-tabler-brand-oauth", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx15("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx15("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
+    /* @__PURE__ */ jsx15("path", { d: "M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108 1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z" })
+  ] });
+};
+var generic_default = SvgGeneric;
+
+// src/theme/default/provider-logos/github.svg
+import * as React9 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var SvgGithub = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx16("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
+};
+var github_default = SvgGithub;
+
+// src/theme/default/provider-logos/gitlab.svg
+import * as React10 from "react";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var SvgGitlab = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx17("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
+    /* @__PURE__ */ jsx17("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
+    /* @__PURE__ */ jsx17("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
+    /* @__PURE__ */ jsx17("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
+  ] });
+};
+var gitlab_default = SvgGitlab;
+
+// src/theme/default/provider-logos/google.svg
+import * as React11 from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var SvgGoogle = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx18("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
+    /* @__PURE__ */ jsx18("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
+  ] });
+};
+var google_default = SvgGoogle;
+
+// src/theme/default/provider-logos/linkedin.svg
+import * as React12 from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var SvgLinkedin = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx19("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
+    /* @__PURE__ */ jsx19("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
+  ] });
+};
+var linkedin_default = SvgLinkedin;
+
+// src/theme/default/provider-logos/microsoft.svg
+import * as React13 from "react";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var SvgMicrosoft = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs14("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 23 23", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx20("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
+    /* @__PURE__ */ jsx20("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
+    /* @__PURE__ */ jsx20("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
+    /* @__PURE__ */ jsx20("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
+  ] });
+};
+var microsoft_default = SvgMicrosoft;
+
+// src/theme/default/provider-logos/slack.svg
+import * as React14 from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var SvgSlack = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx21("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
+    /* @__PURE__ */ jsx21("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
+  ] });
+};
+var slack_default = SvgSlack;
+
+// src/theme/default/provider-logos/spotify.svg
+import * as React15 from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var SvgSpotify = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx22("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
+    /* @__PURE__ */ jsx22("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
+  ] });
+};
+var spotify_default = SvgSpotify;
+
+// src/theme/default/provider-logos/yandex.svg
+import * as React16 from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var SvgYandex = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
+    /* @__PURE__ */ jsx23("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
+    /* @__PURE__ */ jsx23("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
+  ] });
+};
+var yandex_default = SvgYandex;
+
+// src/theme/default/provider-logos/x.svg
+import * as React17 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SvgX = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx24("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__ */ jsx24("path", { fill: "#0F172A", d: "M24.122 3h4.292L18.99 13.73 30 28.285h-8.64l-6.764-8.845-7.744 8.845H2.56l9.983-11.476L2 3h8.854l6.112 8.08zM22.62 25.766h2.379L9.604 5.426H7.048z" }) });
+};
+var x_default = SvgX;
+
+// 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,
+  x: x_default
+};
+var provider_logos_default = logos;
+
+// src/theme/default/components/form/social.tsx
+import { useIntl as useIntl3 } from "react-intl";
+import { useEffect, useState } from "react";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+
+// src/theme/default/components/form/spinner.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsxs18(
+    "svg",
+    {
+      "aria-hidden": "true",
+      role: "status",
+      className: cn(
+        "absolute pointer-events-none inset-0 m-auto size-8 animate-spin",
+        className
+      ),
+      viewBox: "0 0 34 34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx25("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx25(
+          "path",
+          {
+            d: "M23.364 10.6362C22.1053 9.37751 20.5016 8.52034 18.7558 8.17307C17.01 7.82581 15.2004 8.00404 13.5559 8.68523C11.9113 9.36641 10.5057 10.52 9.51678 12C8.52784 13.4801 8 15.2201 8 17.0001C8 18.7802 8.52784 20.5202 9.51678 22.0003C10.5057 23.4803 11.9113 24.6339 13.5559 25.3151C15.2004 25.9962 17.01 26.1745 18.7558 25.8272C20.5016 25.4799 22.1053 24.6228 23.364 23.3641",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx25("defs", { children: /* @__PURE__ */ jsx25("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ jsx25(
+          "rect",
+          {
+            width: "24",
+            height: "24",
+            fill: "currentColor",
+            transform: "translate(17 0.029541) rotate(45)"
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/theme/default/components/form/social.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function extractProvider(context) {
+  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
+    return context.provider;
+  }
+  return void 0;
+}
+function DefaultButtonSocial({
+  attributes,
+  node,
+  onClick,
+  showLabel: _showLabel,
+  logos: providedLogos
+}) {
+  var _a, _b, _c;
+  const logos2 = { ...provider_logos_default, ...providedLogos };
+  const {
+    node_type: _ignoredNodeType,
+    type: _ignoredType,
+    name: _ignoredName,
+    ...props
+  } = attributes;
+  const {
+    flow: { ui }
+  } = useOryFlow5();
+  const [clicked, setClicked] = useState(false);
+  const intl = useIntl3();
+  const {
+    formState: { isSubmitting }
+  } = useFormContext2();
+  const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
+  const Logo = logos2[attributes.value.split("-")[0]];
+  const showLabel = _showLabel != null ? _showLabel : oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0;
+  const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
+  const localOnClick = () => {
+    setClicked(true);
+    onClick == null ? void 0 : onClick();
+  };
+  useEffect(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
+  return /* @__PURE__ */ jsxs19(
+    "button",
+    {
+      className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded-buttons flex items-center justify-center px-4 py-[13px] loading:bg-button-social-background-disabled loading:border-button-social-border-disabled loading:text-button-social-foreground-disabled hover:text-button-social-foreground-hover",
+      value: attributes.value,
+      type: "submit",
+      name: "provider",
+      "data-testid": `ory/form/node/input/${attributes.name}`,
+      ...props,
+      onClick: localOnClick,
+      "data-loading": clicked,
+      disabled: isSubmitting,
+      children: [
+        /* @__PURE__ */ jsx26("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx26(Logo, { size: 20 }) : /* @__PURE__ */ jsx26("span", { className: "flex aspect-square items-center justify-center rounded-[999px] border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx26(Spinner, { className: "size-5" }) }),
+        showLabel && node.meta.label ? /* @__PURE__ */ jsx26("span", { className: "grow text-left font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }) : null
+      ]
+    }
+  );
+}
+DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ jsx26(DefaultButtonSocial, { ...props, logos: logos2 });
+function DefaultSocialButtonContainer({
+  children,
+  nodes
+}) {
+  return /* @__PURE__ */ jsx26(
+    "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 jsx27 } from "react/jsx-runtime";
+function DefaultFormContainer({
+  children,
+  onSubmit,
+  action,
+  method
+}) {
+  return /* @__PURE__ */ jsx27(
+    "form",
+    {
+      onSubmit,
+      noValidate: true,
+      action,
+      method,
+      className: "grid gap-8",
+      children
+    }
+  );
+}
+function DefaultMessageContainer({ children }) {
+  const { flowType } = useOryFlow6();
+  if (!children || Array.isArray(children) && children.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx27(
+    "section",
+    {
+      className: cn(
+        flowType === FlowType4.Settings ? "text-center" : "text-left"
+      ),
+      children
+    }
+  );
+}
+function DefaultMessage({ message }) {
+  const intl = useIntl4();
+  return /* @__PURE__ */ jsx27(
+    "span",
+    {
+      className: cn(
+        "leading-normal",
+        message.type === "error" && "text-interface-foreground-validation-danger",
+        message.type === "info" && "text-interface-foreground-default-secondary",
+        message.type === "success" && "text-interface-foreground-validation-success"
+      ),
+      ...messageTestId(message),
+      children: uiTextToFormattedMessage2(message, intl)
+    }
+  );
+}
+
+// src/theme/default/components/card/auth-method-list-item.tsx
+import { useIntl as useIntl5 } from "react-intl";
+
+// src/theme/default/assets/icons/code.svg
+import * as React18 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SvgCode = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx28("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__ */ jsx28("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 React19 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var SvgPasskey = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx29("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__ */ jsx29("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 React20 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var SvgPassword = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx30("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__ */ jsx30("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 React21 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var SvgWebauthn = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx31("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__ */ jsx31("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;
+
+// src/theme/default/utils/form.ts
+function isGroupImmediateSubmit(group) {
+  return group === "code";
+}
+
+// src/theme/default/components/card/auth-method-list-item.tsx
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+var iconsMap = {
+  code: code_default,
+  passkey: passkey_default,
+  password: password_default,
+  webauthn: webauthn_default,
+  ...provider_logos_default
+};
+function DefaultAuthMethodListItem({
+  onClick,
+  group
+}) {
+  const intl = useIntl5();
+  const Icon = iconsMap[group] || null;
+  return /* @__PURE__ */ jsxs20(
+    "button",
+    {
+      className: "flex cursor-pointer gap-3 text-left items-start w-full rounded-buttons p-2 hover:bg-interface-background-default-primary-hover",
+      onClick,
+      type: isGroupImmediateSubmit(group) ? "submit" : "button",
+      "data-testid": `ory/form/auth-picker/${group}`,
+      children: [
+        /* @__PURE__ */ jsx32("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx32(Icon, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
+        /* @__PURE__ */ jsxs20("span", { className: "flex-1 leading-normal inline-flex flex-col", children: [
+          /* @__PURE__ */ jsx32("span", { className: "text-interface-foreground-default-primary", children: intl.formatMessage({ id: `two-step.${group}.title` }) }),
+          /* @__PURE__ */ jsx32("span", { className: "text-interface-foreground-default-secondary", children: intl.formatMessage({
+            id: `two-step.${group}.description`
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/theme/default/components/form/button.tsx
+import { getNodeLabel } from "@ory/client-fetch";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage3
+} from "@ory/elements-react";
+import { cva } from "class-variance-authority";
+import { useFormContext as useFormContext3 } from "react-hook-form";
+import { useIntl as useIntl6 } from "react-intl";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+var buttonStyles = cva(
+  [
+    "relative flex justify-center gap-3 overflow-hidden rounded-buttons leading-none ring-1 ring-inset font-medium",
+    "disabled:cursor-not-allowed loading:cursor-wait loading:before:pointer-events-none",
+    "transition-colors duration-100 ease-linear",
+    "p-4 max-w-[488px]"
+  ],
+  {
+    variants: {
+      intent: {
+        primary: [
+          "bg-button-primary-background-default text-button-primary-foreground-default ring-button-primary-border-default",
+          "hover:bg-button-primary-background-hover hover:text-button-primary-foreground-hover hover:ring-button-primary-border-hover",
+          "disabled:bg-button-primary-background-disabled disabled:text-button-primary-foreground-disabled disabled:ring-button-primary-border-disabled",
+          "loading:bg-button-primary-background-default loading:text-button-primary-foreground-default loading:ring-button-primary-border-default",
+          "loading:before:absolute loading:before:inset-0 loading:before:bg-button-primary-background-default loading:before:opacity-80 loading:before:content-['']",
+          "disabled:bg-button-primary-background-disabled disabled:text-button-primary-foreground-disabled disabled:ring-button-primary-border-disabled"
+        ],
+        secondary: [
+          "bg-button-secondary-background-default text-button-secondary-foreground-default ring-button-secondary-border-default",
+          "hover:bg-button-secondary-background-hover hover:text-button-secondary-foreground-hover hover:ring-button-secondary-border-hover",
+          "disabled:bg-button-secondary-background-disabled disabled:text-button-secondary-foreground-disabled disabled:ring-button-secondary-border-disabled",
+          "loading:bg-button-secondary-background-default loading:text-button-secondary-foreground-default loading:ring-button-secondary-border-default",
+          "loading:before:absolute loading:before:inset-0 loading:before:bg-button-secondary-background-default loading:before:opacity-80 loading:before:content-['']"
+        ]
+      },
+      defaultVariants: {
+        intent: "primary"
+      }
+    }
+  }
+);
+var DefaultButton = ({
+  attributes,
+  node,
+  onClick
+}) => {
+  var _a;
+  const {
+    type,
+    name,
+    value,
+    // Button does not support these attributes, so we skip them
+    autocomplete: _ignoredAutocomplete,
+    label: _ignoredLabel,
+    node_type: _ignoredNodeType,
+    // End of skipped attributes
+    ...rest
+  } = attributes;
+  const [clicked, setClicked] = useState2(false);
+  const intl = useIntl6();
+  const label = getNodeLabel(node);
+  const {
+    formState: { isSubmitting },
+    setValue
+  } = useFormContext3();
+  useEffect2(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
+  const isPrimary = attributes.name === "method" || attributes.name.includes("passkey") || attributes.name.includes("webauthn") || attributes.name.includes("lookup_secret");
+  return /* @__PURE__ */ jsxs21(
+    "button",
+    {
+      ...rest,
+      value,
+      name,
+      type: type === "button" ? "button" : "submit",
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        setClicked(true);
+        if (type !== "button") {
+          setValue(name, value);
+        }
+      },
+      className: buttonStyles({
+        intent: isPrimary ? "primary" : "secondary"
+      }),
+      disabled: (_a = rest.disabled) != null ? _a : isSubmitting,
+      "data-loading": clicked,
+      children: [
+        clicked ? /* @__PURE__ */ jsx33(Spinner, {}) : null,
+        label ? /* @__PURE__ */ jsx33("span", { children: uiTextToFormattedMessage3(label, intl) }) : ""
+      ]
+    }
+  );
+};
+DefaultButton.displayName = "DefaultButton";
+
+// src/theme/default/components/form/checkbox.tsx
+import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
+import {
+  messageTestId as messageTestId2,
+  uiTextToFormattedMessage as uiTextToFormattedMessage5
+} from "@ory/elements-react";
+import { useForm } from "react-hook-form";
+import { useIntl as useIntl8 } from "react-intl";
+
+// src/theme/default/components/ui/checkbox-label.tsx
+import { useIntl as useIntl7 } from "react-intl";
+
+// src/util/i18n/index.ts
+var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
+  const contextInjectedMessage = Object.entries(context).reduce(
+    (accumulator, [key, value]) => {
+      if (Array.isArray(value)) {
+        return {
+          ...accumulator,
+          [key]: value,
+          [key + "_list"]: intl.formatList(value)
+        };
+      } else if (key.endsWith("_unix")) {
+        if (typeof value === "number") {
+          return {
+            ...accumulator,
+            [key]: intl.formatDate(new Date(value * 1e3)),
+            [key + "_since"]: intl.formatDateTimeRange(
+              new Date(value),
+              /* @__PURE__ */ new Date()
+            ),
+            [key + "_since_minutes"]: Math.ceil(
+              (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60
+            ).toFixed(0),
+            [key + "_until"]: intl.formatDateTimeRange(
+              /* @__PURE__ */ new Date(),
+              new Date(value)
+            ),
+            [key + "_until_minutes"]: Math.ceil(
+              ((/* @__PURE__ */ new Date()).getTime() / 1e3 - value) / 60
+            ).toFixed(0)
+          };
+        }
+      } else if (key === "property") {
+        return {
+          ...accumulator,
+          [key]: intl.formatMessage({
+            id: `property.${value}`,
+            defaultMessage: value
+          })
+        };
+      }
+      return {
+        ...accumulator,
+        [key]: value
+      };
+    },
+    {}
+  );
+  return intl.formatMessage(
+    {
+      id: `identities.messages.${id}`,
+      defaultMessage: text
+    },
+    contextInjectedMessage
+  );
+};
+
+// src/theme/default/components/ui/checkbox-label.tsx
+import { Fragment as Fragment2, jsx as jsx34 } from "react/jsx-runtime";
+var linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+function computeLabelElements(labelText) {
+  const elements = [];
+  let lastIndex = 0;
+  for (const match of labelText.matchAll(linkRegex)) {
+    const linkText = match[1];
+    const url = match[2];
+    const matchStart = match.index;
+    if (typeof matchStart === "undefined") {
+      continue;
+    }
+    if (matchStart > lastIndex) {
+      elements.push(labelText.slice(lastIndex, matchStart));
+    }
+    elements.push(
+      /* @__PURE__ */ jsx34(
+        "a",
+        {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-button-link-brand-brand hover:text-button-link-brand-brand-hover underline",
+          children: linkText
+        },
+        matchStart
+      )
+    );
+    lastIndex = matchStart + match[0].length;
+  }
+  if (lastIndex < labelText.length) {
+    elements.push(labelText.slice(lastIndex));
+  }
+  return elements;
+}
+function CheckboxLabel({ label }) {
+  const intl = useIntl7();
+  if (!label) {
+    return null;
+  }
+  const labelText = uiTextToFormattedMessage4(label, intl);
+  return /* @__PURE__ */ jsx34(Fragment2, { children: computeLabelElements(labelText) });
+}
+
+// src/theme/default/components/form/checkbox.tsx
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+function CheckboxSVG() {
+  return /* @__PURE__ */ jsx35(
+    "svg",
+    {
+      className: "absolute hidden size-4 peer-checked:block fill-checkbox-foreground-checked",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx35(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.6464 5.14645C11.8417 4.95118 12.1583 4.95118 12.3536 5.14645C12.5338 5.32669 12.5477 5.6103 12.3951 5.80645L12.3536 5.85355L7.35355 10.8536C7.17331 11.0338 6.8897 11.0477 6.69355 10.8951L6.64645 10.8536L4.14645 8.35355C3.95118 8.15829 3.95118 7.84171 4.14645 7.64645C4.32669 7.4662 4.6103 7.45234 4.80645 7.60485L4.85355 7.64645L7 9.7925L11.6464 5.14645Z"
+        }
+      )
+    }
+  );
+}
+var DefaultCheckbox = ({
+  attributes: initialAttributes,
+  node
+}) => {
+  const {
+    value,
+    name,
+    // Button does not support these attributes, so we skip them
+    autocomplete: _autocomplete,
+    onclick: _onclick,
+    maxlength: _max,
+    // End of skipped attributes
+    ...attributes
+  } = initialAttributes;
+  const intl = useIntl8();
+  const label = getNodeLabel2(node);
+  const { register } = useForm();
+  const hasError = node.messages.some((m) => m.type === "error");
+  return /* @__PURE__ */ jsxs22("label", { className: "flex items-start gap-3 self-stretch antialiased", children: [
+    /* @__PURE__ */ jsxs22("span", { className: "flex h-5 items-center", children: [
+      /* @__PURE__ */ jsx35(
+        "input",
+        {
+          ...attributes,
+          value: 1,
+          defaultChecked: Boolean(value),
+          type: "checkbox",
+          className: cn(
+            "peer size-4 border appearance-none rounded-forms bg-checkbox-background-default border-checkbox-border-checkbox-border-default checked:bg-checkbox-background-checked checked:border-checkbox-border-checkbox-border-checked",
+            hasError && "border-interface-border-validation-danger"
+          ),
+          ...register(name, { value })
+        }
+      ),
+      /* @__PURE__ */ jsx35(CheckboxSVG, {})
+    ] }),
+    /* @__PURE__ */ jsxs22("span", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx35("span", { className: "font-normal leading-tight text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx35(CheckboxLabel, { label }) }),
+      node.messages.map((message) => /* @__PURE__ */ jsx35(
+        "span",
+        {
+          className: cn(
+            "mt-1",
+            message.type === "error" ? "text-interface-foreground-validation-danger" : "text-interface-foreground-default-secondary"
+          ),
+          ...messageTestId2(message),
+          children: uiTextToFormattedMessage5(message, intl)
+        },
+        message.id
+      ))
+    ] })
+  ] });
+};
+
+// src/theme/default/components/form/group-container.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+function DefaultGroupContainer({ children }) {
+  return /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-1 gap-8", children });
+}
+
+// src/theme/default/components/form/horizontal-divider.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+function DefaultHorizontalDivider() {
+  return /* @__PURE__ */ jsx37("hr", { className: "border-interface-border-default-primary" });
+}
+
+// src/theme/default/components/form/image.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+function DefaultImage({ attributes }) {
+  return /* @__PURE__ */ jsx38("figure", { children: /* @__PURE__ */ jsx38("img", { ...attributes }) });
+}
+
+// src/theme/default/components/form/input.tsx
+import { FlowType as FlowType5, getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage6,
+  useOryFlow as useOryFlow7
+} from "@ory/elements-react";
+import { useFormContext as useFormContext4 } from "react-hook-form";
+import { useIntl as useIntl9 } from "react-intl";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var DefaultInput = ({
+  node,
+  attributes,
+  onClick
+}) => {
+  const label = getNodeLabel3(node);
+  const { register } = useFormContext4();
+  const {
+    value,
+    autocomplete,
+    name,
+    maxlength,
+    node_type: _,
+    ...rest
+  } = attributes;
+  const intl = useIntl9();
+  const { flowType } = useOryFlow7();
+  const formattedLabel = label ? intl.formatMessage(
+    {
+      id: "input.placeholder",
+      defaultMessage: "Enter your {placeholder}"
+    },
+    {
+      placeholder: uiTextToFormattedMessage6(label, intl)
+    }
+  ) : "";
+  return /* @__PURE__ */ jsx39(
+    "input",
+    {
+      ...rest,
+      onClick,
+      maxLength: maxlength,
+      autoComplete: autocomplete,
+      placeholder: formattedLabel,
+      "data-testid": `ory/form/node/input/${name}`,
+      className: cn(
+        "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0",
+        "bg-input-background-default border-input-border-default text-input-foreground-primary",
+        "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
+        "focus:border-input-border-focus focus-visible:border-input-border-focus",
+        "hover:bg-input-background-hover hover:border-input-border-hover",
+        "px-4 py-[13px]",
+        // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
+        flowType === FlowType5.Settings && "max-w-[488px]"
+      ),
+      ...register(name, { value })
+    }
+  );
+};
+
+// src/theme/default/components/form/label.tsx
+import {
+  FlowType as FlowType6,
+  getNodeLabel as getNodeLabel4,
+  instanceOfUiText
+} from "@ory/client-fetch";
+import {
+  messageTestId as messageTestId3,
+  uiTextToFormattedMessage as uiTextToFormattedMessage7,
+  useComponents as useComponents2,
+  useOryFlow as useOryFlow8
+} from "@ory/elements-react";
+import { useFormContext as useFormContext5 } from "react-hook-form";
+import { useIntl as useIntl10 } from "react-intl";
+import { jsx as jsx40, 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 = useIntl10();
+  const label = getNodeLabel4(node);
+  const { Message } = useComponents2();
+  const { config, flowType, flow } = useOryFlow8();
+  const { setValue, formState } = useFormContext5();
+  const isPassword = attributes.type === "password";
+  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 gap-1 antialiased", children: [
+    label && /* @__PURE__ */ jsxs23("span", { className: "inline-flex justify-between", children: [
+      /* @__PURE__ */ jsx40(
+        "label",
+        {
+          ...messageTestId3(label),
+          className: "leading-normal text-input-foreground-primary",
+          htmlFor: attributes.name,
+          "data-testid": `ory/form/node/input/label/${attributes.name}`,
+          ...rest,
+          children: uiTextToFormattedMessage7(label, intl)
+        }
+      ),
+      isPassword && config.project.recovery_enabled && flowType === FlowType6.Login && // TODO: make it possible to override with a custom component
+      /* @__PURE__ */ jsx40(
+        "a",
+        {
+          href: initFlowUrl(config.sdk.url, "recovery", flow),
+          className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          children: intl.formatMessage({
+            id: "forms.label.forgot-password",
+            defaultMessage: "Forgot password?"
+          })
+        }
+      ),
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx40(
+        "button",
+        {
+          type: "submit",
+          name: resendNode.attributes.name,
+          value: resendNode.attributes.value,
+          onClick: handleResend,
+          className: "cursor-pointer text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
+          children: intl.formatMessage({ id: "identities.messages.1070008" })
+        }
+      )
+    ] }),
+    children,
+    node.messages.map((message) => /* @__PURE__ */ jsx40(Message.Content, { message }, message.id)),
+    fieldError && instanceOfUiText(fieldError) && /* @__PURE__ */ jsx40(Message.Content, { message: fieldError })
+  ] });
+}
+
+// src/theme/default/components/form/link-button.tsx
+import { getNodeLabel as getNodeLabel5 } from "@ory/client-fetch";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage8
+} from "@ory/elements-react";
+import { forwardRef } from "react";
+import { useIntl as useIntl11 } from "react-intl";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
+  const intl = useIntl11();
+  const label = getNodeLabel5(node);
+  return /* @__PURE__ */ jsx41(
+    "a",
+    {
+      ...attributes,
+      ref,
+      title: label ? uiTextToFormattedMessage8(label, intl) : "",
+      "data-testid": `ory/form/node/link/${attributes.id}`,
+      className: cn(
+        "antialiased rounded cursor-pointer text-center border gap-3 leading-none bg-button-primary-background-default hover:bg-button-primary-background-hover transition-colors text-button-primary-foreground-default hover:text-button-primary-foreground-hover p-4 font-medium"
+      ),
+      children: label ? uiTextToFormattedMessage8(label, intl) : ""
+    }
+  );
+});
+DefaultLinkButton.displayName = "DefaultLinkButton";
+
+// src/theme/default/components/form/pin-code-input.tsx
+import { useFormContext as useFormContext6 } from "react-hook-form";
+
+// src/theme/default/components/form/shadcn/otp-input.tsx
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as React22 from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+var InputOTP = React22.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx42(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React22.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React22.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-forms border border-solid bg-input-background-default py-[15px] text-center focus-visible:outline-none w-full",
+        "relative flex items-center justify-center transition-all leading-none",
+        isActive ? "border-input-border-focus" : "border-input-border-default",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx42("span", { className: "inline-block size-4", children: char }),
+        hasFakeCaret && /* @__PURE__ */ jsx42("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx42("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+// src/theme/default/components/form/pin-code-input.tsx
+import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
+import { FlowType as FlowType7 } from "@ory/client-fetch";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var DefaultPinCodeInput = ({ attributes }) => {
+  const { setValue, watch } = useFormContext6();
+  const { maxlength, name } = attributes;
+  const elements = maxlength != null ? maxlength : 6;
+  const { flowType } = useOryFlow9();
+  const handleInputChange = (v) => {
+    setValue(name, v);
+  };
+  const value = watch(name);
+  return /* @__PURE__ */ jsx43(
+    InputOTP,
+    {
+      maxLength: maxlength != null ? maxlength : 6,
+      onChange: handleInputChange,
+      name,
+      value,
+      children: /* @__PURE__ */ jsx43(
+        InputOTPGroup,
+        {
+          className: cn(
+            "w-full flex gap-2 justify-stretch",
+            // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
+            flowType === FlowType7.Settings && "max-w-[488px]"
+          ),
+          children: [...Array(elements)].map((_, index) => /* @__PURE__ */ jsx43(InputOTPSlot, { index }, index))
+        }
+      )
+    }
+  );
+};
+
+// src/theme/default/components/form/section.tsx
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var DefaultFormSection = ({
+  children,
+  nodes: _nodes,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx44(
+    "form",
+    {
+      className: "flex w-full max-w-screen-sm flex-col md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] px-4",
+      ...rest,
+      children
+    }
+  );
+};
+var DefaultFormSectionContent = ({
+  title,
+  description,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-8 rounded-t-cards border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx44("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
+      /* @__PURE__ */ jsx44("span", { className: "text-interface-foreground-default-secondary", children: description })
+    ] }),
+    children
+  ] });
+};
+var DefaultFormSectionFooter = ({
+  children,
+  text
+}) => {
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[72px] items-center justify-between gap-2 rounded-b-cards border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
+      ),
+      children: [
+        /* @__PURE__ */ jsx44("span", { children: text }),
+        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 jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+function DefaultText({ node, attributes }) {
+  var _a;
+  const intl = useIntl12();
+  return /* @__PURE__ */ jsxs26(Fragment3, { children: [
+    /* @__PURE__ */ jsx45("p", { "data-testid": `ory/form/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__ */ jsx45(
+      "pre",
+      {
+        "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
+        children: /* @__PURE__ */ jsx45("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
+      },
+      index
+    ))
+  ] });
+}
+
+// src/theme/default/components/generic/page-header.tsx
+import { useComponents as useComponents3 } from "@ory/elements-react";
+
+// src/theme/default/components/ui/user-menu.tsx
+import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
+
+// src/util/client.ts
+import {
+  Configuration,
+  FrontendApi
+} from "@ory/client-fetch";
+function frontendClient(sdkUrl, opts = {}) {
+  const config = new Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    headers: {
+      Accept: "application/json",
+      ...opts.headers
+    }
+  });
+  return new FrontendApi(config);
+}
+
+// src/theme/default/assets/icons/logout.svg
+import * as React23 from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var SvgLogout = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx46("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx46("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
+};
+var logout_default = SvgLogout;
+
+// src/theme/default/assets/icons/settings.svg
+import * as React24 from "react";
+import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+var SvgSettings = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx47("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__ */ jsx47("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__ */ jsx47("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
+  ] }) });
+};
+var settings_default = SvgSettings;
+
+// src/theme/default/utils/user.ts
+function isTraitsIndexable(traits) {
+  return typeof traits === "object" && traits !== null;
+}
+var getUserInitials = (session) => {
+  var _a, _b;
+  const avatar = "";
+  let primary = "";
+  let secondary = "";
+  if (!((_a = session == null ? void 0 : session.identity) == null ? void 0 : _a.traits) || !isTraitsIndexable(session.identity.traits)) {
+    return {
+      primary,
+      secondary,
+      avatar
+    };
+  }
+  const traits = (_b = session.identity) == null ? void 0 : _b.traits;
+  if (traits.email && typeof traits.email === "string") {
+    secondary = traits.email;
+  }
+  if (traits.name) {
+    if (typeof traits.name === "string") {
+      primary = traits.name;
+    }
+    if (typeof traits.name === "object" && traits.name && traits.name.first && traits.name.last) {
+      primary = traits.name.first + " " + traits.name.last;
+    }
+  }
+  if (primary === "") {
+    primary = secondary;
+    secondary = "";
+  }
+  return {
+    primary,
+    secondary,
+    avatar
+  };
+};
+
+// src/theme/default/components/ui/dropdown-menu.tsx
+import { forwardRef as forwardRef3 } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = forwardRef3(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ jsx48(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx48(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    align: "end",
+    className: cn(
+      "z-50 min-w-[19rem] overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "border border-interface-border-default-primary bg-interface-background-default-primary rounded-cards",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx48(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center outline-none transition-colors data-[disabled]:pointer-events-none",
+      "px-8 py-3 lg:py-4.5 text-sm gap-6",
+      "first:border-0 border-t border-button-secondary-border-default hover:border-button-social-border-hover",
+      "text-button-secondary-foreground-default bg-button-secondary-background-default",
+      "hover:text-button-secondary-foreground-hover hover:bg-button-secondary-background-hover",
+      "data-[disabled]:text-button-secondary-foreground-disabled data-[disabled]:bg-button-secondary-background-disabled",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx48(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+// src/theme/default/components/ui/user-avater.tsx
+import { forwardRef as forwardRef4 } from "react";
+
+// src/theme/default/assets/icons/user.svg
+import * as React25 from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var SvgUser = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx49("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__ */ jsx49("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
+};
+var user_default = SvgUser;
+
+// src/theme/default/components/ui/user-avater.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+var UserAvatar = forwardRef4(
+  ({ initials, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx50(
+      "button",
+      {
+        ref,
+        className: "relative flex size-10 items-center justify-center overflow-hidden rounded-[999px] bg-button-primary-background-default hover:bg-button-primary-background-hover",
+        ...rest,
+        children: /* @__PURE__ */ jsx50("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx50(
+          "img",
+          {
+            src: initials.avatar,
+            alt: initials.primary,
+            className: "w-full object-contain"
+          }
+        ) : /* @__PURE__ */ jsx50(
+          user_default,
+          {
+            size: 24,
+            className: "text-button-primary-foreground-default"
+          }
+        ) })
+      }
+    );
+  }
+);
+UserAvatar.displayName = "UserAvatar";
+
+// src/theme/default/components/ui/user-menu.tsx
+import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+var UserMenu = ({ session }) => {
+  const { config } = useOryFlow10();
+  const initials = getUserInitials(session);
+  const [logoutFlow, setLogoutFlow] = useState3();
+  const fetchLogoutFlow = useCallback(async () => {
+    const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
+    setLogoutFlow(flow);
+  }, [config.sdk.url]);
+  useEffect3(() => {
+    void fetchLogoutFlow();
+  }, [fetchLogoutFlow]);
+  return /* @__PURE__ */ jsxs28(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx51(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(UserAvatar, { initials }) }),
+    /* @__PURE__ */ jsxs28(DropdownMenuContent, { children: [
+      /* @__PURE__ */ jsxs28(DropdownMenuLabel2, { className: "flex gap-3 px-5 py-4.5", children: [
+        /* @__PURE__ */ jsx51(UserAvatar, { disabled: true, initials }),
+        /* @__PURE__ */ jsxs28("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx51("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
+          initials.secondary && /* @__PURE__ */ jsx51("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx51(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs28("a", { href: "/settings", children: [
+        /* @__PURE__ */ jsx51(settings_default, { size: 16 }),
+        " User settings"
+      ] }) }),
+      /* @__PURE__ */ jsx51(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__ */ jsx51(logout_default, { size: 16 }),
+        " Logout"
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/theme/default/components/generic/page-header.tsx
+import { useSession } from "@ory/elements-react/client";
+import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
+var DefaultPageHeader = (_props) => {
+  const { Card } = useComponents3();
+  const { session } = useSession();
+  return /* @__PURE__ */ jsx52("div", { className: "mt-16 flex max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ jsx52("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+    /* @__PURE__ */ jsx52("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx52(Card.Logo, {}) }),
+    /* @__PURE__ */ jsx52(UserMenu, { session })
+  ] }) }) });
+};
+
+// src/theme/default/components/settings/settings-oidc.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useFormContext as useFormContext7 } from "react-hook-form";
+
+// src/theme/default/assets/icons/trash.svg
+import * as React26 from "react";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var SvgTrash = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx53("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__ */ jsx53("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
+};
+var trash_default = SvgTrash;
+
+// src/theme/default/components/settings/settings-oidc.tsx
+import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
+function DefaultSettingsOidc({
+  linkButtons,
+  unlinkButtons
+}) {
+  const hasLinkButtons = linkButtons.length > 0;
+  const hasUnlinkButtons = unlinkButtons.length > 0;
+  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-8", children: [
+    hasLinkButtons && /* @__PURE__ */ jsx54("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
+      const attrs = button.attributes;
+      return /* @__PURE__ */ jsx54(
+        DefaultButtonSocial,
+        {
+          showLabel: true,
+          node: button,
+          attributes: attrs,
+          onClick: button.onClick
+        },
+        attrs.value
+      );
+    }) }),
+    hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx54(DefaultHorizontalDivider, {}) : null,
+    unlinkButtons.map((button) => {
+      if (button.attributes.node_type !== "input") {
+        return null;
+      }
+      return /* @__PURE__ */ jsx54(UnlinkRow, { button }, button.attributes.value);
+    })
+  ] });
+}
+function UnlinkRow({ button }) {
+  var _a, _b;
+  const [clicked, setClicked] = useState4(false);
+  const {
+    formState: { isSubmitting }
+  } = useFormContext7();
+  const attrs = button.attributes;
+  const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
+  const Logo = attrs.value in provider_logos_default ? provider_logos_default[attrs.value] : provider_logos_default.generic;
+  const localOnClick = () => {
+    button.onClick();
+    setTimeout(() => {
+      setClicked(true);
+    }, 100);
+  };
+  useEffect4(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
+  return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx54(Logo, { size: 32 }),
+      /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+    ] }),
+    /* @__PURE__ */ jsx54(
+      "button",
+      {
+        ...attrs,
+        type: "submit",
+        onClick: localOnClick,
+        disabled: isSubmitting,
+        className: "relative",
+        title: `Unlink ${provider}`,
+        children: clicked ? /* @__PURE__ */ jsx54(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx54(
+          trash_default,
+          {
+            className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+            size: 24
+          }
+        )
+      }
+    )
+  ] }, attrs.value);
+}
+
+// src/theme/default/components/settings/settings-passkey.tsx
+import { useComponents as useComponents4 } from "@ory/elements-react";
+import { useFormContext as useFormContext8 } from "react-hook-form";
+import { jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
+function DefaultSettingsPasskey({
+  triggerButton,
+  removeButtons
+}) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext8();
+  const { Node } = useComponents4();
+  const hasRemoveButtons = removeButtons.length > 0;
+  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsx55("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ jsx55(
+      Node.Button,
+      {
+        node: triggerButton,
+        attributes: triggerButton.attributes,
+        onClick: triggerButton.onClick
+      }
+    ) }),
+    hasRemoveButtons ? /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx55(DefaultHorizontalDivider, {}),
+      /* @__PURE__ */ jsx55("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+        var _a, _b;
+        const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
+        const addedAt = "added_at" in context ? context.added_at : null;
+        const displayName = "display_name" in context ? context.display_name : null;
+        const keyId = "value" in node.attributes ? node.attributes.value : null;
+        return /* @__PURE__ */ jsxs31(
+          "div",
+          {
+            className: "flex justify-between gap-6 md:items-center",
+            children: [
+              /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 items-center flex-1", children: [
+                /* @__PURE__ */ jsx55(
+                  passkey_default,
+                  {
+                    size: 32,
+                    className: "text-interface-foreground-default-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsx55("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ jsx55("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                  ] }),
+                  addedAt && /* @__PURE__ */ jsx55("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                    dateStyle: "long"
+                  }).format(new Date(addedAt)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx55(
+                "button",
+                {
+                  ...node.attributes,
+                  type: "submit",
+                  onClick: node.onClick,
+                  disabled: isSubmitting,
+                  className: "relative",
+                  children: isSubmitting ? /* @__PURE__ */ jsx55(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx55(
+                    trash_default,
+                    {
+                      className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                      size: 24
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          `passkey-remove-button-${i}`
+        );
+      }) })
+    ] }) : null
+  ] });
+}
+
+// src/theme/default/assets/icons/download.svg
+import * as React27 from "react";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var SvgDownload = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx56("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
+};
+var download_default = SvgDownload;
+
+// src/theme/default/assets/icons/eye.svg
+import * as React28 from "react";
+import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+var SvgEye = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsxs32("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx57("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
+    /* @__PURE__ */ jsx57("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
+  ] }) });
+};
+var eye_default = SvgEye;
+
+// src/theme/default/assets/icons/refresh.svg
+import * as React29 from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var SvgRefresh = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ jsx58("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
+};
+var refresh_default = SvgRefresh;
+
+// src/theme/default/components/settings/settings-recovery-codes.tsx
+import { useFormContext as useFormContext9 } from "react-hook-form";
+import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+function DefaultSettingsRecoveryCodes({
+  codes,
+  regnerateButton,
+  revealButton,
+  onRegenerate,
+  onReveal
+}) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext9();
+  const onDownload = () => {
+    const element = document.createElement("a");
+    const file = new Blob([codes.join("\n")], {
+      type: "text/plain"
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = "recovery-codes.txt";
+    document.body.appendChild(element);
+    element.click();
+  };
+  const hasCodes = codes.length >= 1;
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
+    codes.length > 0 && /* @__PURE__ */ jsx59(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ jsxs33("div", { className: "flex gap-4 justify-between", children: [
+      /* @__PURE__ */ jsx59("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ jsxs33("div", { className: "flex gap-2", children: [
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx59(
+          "button",
+          {
+            ...regnerateButton.attributes,
+            type: "submit",
+            className: "ml-auto",
+            onClick: onRegenerate,
+            disabled: isSubmitting,
+            "data-loading": isSubmitting,
+            children: /* @__PURE__ */ jsx59(
+              refresh_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        ),
+        revealButton && /* @__PURE__ */ jsx59(Fragment4, { children: /* @__PURE__ */ jsx59(
+          "button",
+          {
+            ...revealButton.attributes,
+            type: "submit",
+            className: "ml-auto",
+            onClick: onReveal,
+            title: "Reveal recovery codes",
+            children: /* @__PURE__ */ jsx59(
+              eye_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        ) }),
+        hasCodes && /* @__PURE__ */ jsx59(
+          "button",
+          {
+            onClick: onDownload,
+            type: "button",
+            className: "ml-auto",
+            "data-testid": "ory/screen/settings/group/recovery_code/download",
+            title: "Download recovery codes",
+            children: /* @__PURE__ */ jsx59(
+              download_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    hasCodes ? /* @__PURE__ */ jsx59("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx59(
+      "div",
+      {
+        className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary",
+        "data-testid": "ory/screen/settings/group/recovery_code/codes",
+        children: codes.map((code) => /* @__PURE__ */ jsx59("p", { children: code }, code))
+      }
+    ) }) : null
+  ] });
+}
+
+// src/theme/default/components/settings/settings-totp.tsx
+import { useComponents as useComponents5 } from "@ory/elements-react";
+
+// src/theme/default/assets/icons/qrcode.svg
+import * as React30 from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var SvgQrcode = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx60("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__ */ jsx60("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
+};
+var qrcode_default = SvgQrcode;
+
+// src/theme/default/components/settings/settings-totp.tsx
+import { useFormContext as useFormContext10 } from "react-hook-form";
+import { jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
+function DefaultSettingsTotp({
+  totpImage,
+  totpInput,
+  totpSecret,
+  totpUnlink,
+  onUnlink
+}) {
+  const { Node, Card } = useComponents5();
+  const {
+    formState: { isSubmitting }
+  } = useFormContext10();
+  if (totpUnlink) {
+    const {
+      type,
+      autocomplete: _ignoredAutocomplete,
+      label: _ignoredLabel,
+      node_type: _ignoredNodeType,
+      ...buttonAttrs
+    } = totpUnlink.attributes;
+    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx61("div", { className: "col-span-full", children: /* @__PURE__ */ jsx61(Card.Divider, {}) }),
+      /* @__PURE__ */ jsxs34("div", { className: "col-span-full flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx61("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ jsx61(qrcode_default, { size: 32 }) }),
+        /* @__PURE__ */ jsx61("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ jsx61("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: type === "button" ? "button" : "submit",
+            ...buttonAttrs,
+            onClick: onUnlink,
+            disabled: isSubmitting,
+            children: isSubmitting ? /* @__PURE__ */ jsx61(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx61(
+              trash_default,
+              {
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                size: 24
+              }
+            )
+          }
+        )
+      ] })
+    ] });
+  }
+  if (totpImage && totpSecret && totpInput) {
+    return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx61("div", { className: "col-span-full", children: /* @__PURE__ */ jsx61(DefaultHorizontalDivider, {}) }),
+      /* @__PURE__ */ jsx61("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx61("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx61("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx61(
+        Node.Image,
+        {
+          node: totpImage,
+          attributes: {
+            ...totpImage.attributes
+          }
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx61(
+          Node.Label,
+          {
+            node: totpSecret,
+            attributes: totpSecret.attributes,
+            children: /* @__PURE__ */ jsx61(
+              Node.Input,
+              {
+                node: totpSecret,
+                attributes: {
+                  disabled: true,
+                  name: "totp_secret_key",
+                  node_type: "input",
+                  type: "text",
+                  value: totpSecret.attributes.text.text
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          Node.Label,
+          {
+            attributes: totpInput.attributes,
+            node: totpInput,
+            children: /* @__PURE__ */ jsx61(
+              Node.CodeInput,
+              {
+                node: totpInput,
+                attributes: totpInput.attributes
+              }
+            )
+          }
+        )
+      ] })
+    ] });
+  }
+}
+
+// src/theme/default/components/settings/settings-webauthn.tsx
+import { useComponents as useComponents6 } from "@ory/elements-react";
+
+// src/theme/default/assets/icons/key.svg
+import * as React31 from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var SvgKey = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx62("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__ */ jsx62("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
+};
+var key_default = SvgKey;
+
+// src/theme/default/components/settings/settings-webauthn.tsx
+import { useFormContext as useFormContext11 } from "react-hook-form";
+import { jsx as jsx63, jsxs as jsxs35 } from "react/jsx-runtime";
+function DefaultSettingsWebauthn({
+  nameInput,
+  triggerButton,
+  removeButtons
+}) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext11();
+  const { Node, Card } = useComponents6();
+  const hasRemoveButtons = removeButtons.length > 0;
+  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
+      /* @__PURE__ */ jsx63("div", { className: "flex-1", children: /* @__PURE__ */ jsx63(
+        Node.Label,
+        {
+          node: nameInput,
+          attributes: nameInput.attributes,
+          children: /* @__PURE__ */ jsx63(
+            Node.Input,
+            {
+              node: nameInput,
+              attributes: nameInput.attributes
+            }
+          )
+        }
+      ) }),
+      triggerButton ? /* @__PURE__ */ jsx63(
+        Node.Button,
+        {
+          node: triggerButton,
+          attributes: triggerButton.attributes,
+          onClick: triggerButton.onClick
+        }
+      ) : null
+    ] }),
+    hasRemoveButtons ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx63(Card.Divider, {}),
+      /* @__PURE__ */ jsx63("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
+        var _a, _b;
+        const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
+        const addedAt = "added_at" in context ? context.added_at : null;
+        const displayName = "display_name" in context ? context.display_name : null;
+        const keyId = "value" in node.attributes ? node.attributes.value : null;
+        return /* @__PURE__ */ jsxs35(
+          "div",
+          {
+            className: "flex justify-between gap-6 md:items-center",
+            children: [
+              /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 items-center flex-1", children: [
+                /* @__PURE__ */ jsx63(
+                  key_default,
+                  {
+                    size: 32,
+                    className: "text-interface-foreground-default-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsx63("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ jsx63("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                  ] }),
+                  addedAt && /* @__PURE__ */ jsx63("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                    dateStyle: "long"
+                  }).format(new Date(addedAt)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx63(
+                "button",
+                {
+                  ...node.attributes,
+                  type: "submit",
+                  onClick: node.onClick,
+                  disabled: isSubmitting,
+                  className: "relative",
+                  children: isSubmitting ? /* @__PURE__ */ jsx63(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx63(
+                    trash_default,
+                    {
+                      className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+                      size: 24
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          `webauthn-remove-button-${i}`
+        );
+      }) })
+    ] }) : null
+  ] });
+}
+
+// src/theme/default/components/card/auth-method-list-container.tsx
+import { jsx as jsx64 } from "react/jsx-runtime";
+function DefaultAuthMethodListContainer({
+  children
+}) {
+  return /* @__PURE__ */ jsx64("div", { className: "grid grid-cols-1 gap-2", children });
+}
+
+// src/theme/default/components/default-components.tsx
+function getOryComponents(overrides) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha;
+  return {
+    Card: {
+      Root: (_b = (_a = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _a.Root) != null ? _b : DefaultCard,
+      Footer: (_d = (_c = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _c.Footer) != null ? _d : DefaultCardFooter,
+      Header: (_f = (_e = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _e.Header) != null ? _f : DefaultCardHeader,
+      Content: (_h = (_g = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _g.Content) != null ? _h : DefaultCardContent,
+      Logo: (_j = (_i = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _i.Logo) != null ? _j : DefaultCardLogo,
+      Divider: (_l = (_k = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _k.Divider) != null ? _l : DefaultHorizontalDivider,
+      AuthMethodListContainer: (_n = (_m = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _m.AuthMethodListContainer) != null ? _n : DefaultAuthMethodListContainer,
+      AuthMethodListItem: (_p = (_o = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _o.AuthMethodListItem) != null ? _p : DefaultAuthMethodListItem,
+      SettingsSection: (_r = (_q = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _q.SettingsSection) != null ? _r : DefaultFormSection,
+      SettingsSectionContent: (_t = (_s = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _s.SettingsSectionContent) != null ? _t : DefaultFormSectionContent,
+      SettingsSectionFooter: (_v = (_u = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _u.SettingsSectionFooter) != null ? _v : DefaultFormSectionFooter
+    },
+    Node: {
+      Button: (_x = (_w = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _w.Button) != null ? _x : DefaultButton,
+      OidcButton: (_z = (_y = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _y.OidcButton) != null ? _z : DefaultButtonSocial,
+      Input: (_B = (_A = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _A.Input) != null ? _B : DefaultInput,
+      CodeInput: (_D = (_C = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _C.CodeInput) != null ? _D : DefaultPinCodeInput,
+      Image: (_F = (_E = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _E.Image) != null ? _F : DefaultImage,
+      Label: (_H = (_G = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _G.Label) != null ? _H : DefaultLabel,
+      Checkbox: (_J = (_I = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _I.Checkbox) != null ? _J : DefaultCheckbox,
+      Text: (_L = (_K = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _K.Text) != null ? _L : DefaultText,
+      Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton
+    },
+    Form: {
+      Root: (_P = (_O = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _O.Root) != null ? _P : DefaultFormContainer,
+      Group: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Group) != null ? _R : DefaultGroupContainer,
+      OidcRoot: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.OidcRoot) != null ? _T : DefaultSocialButtonContainer,
+      RecoveryCodesSettings: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.RecoveryCodesSettings) != null ? _V : DefaultSettingsRecoveryCodes,
+      TotpSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.TotpSettings) != null ? _X : DefaultSettingsTotp,
+      OidcSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.OidcSettings) != null ? _Z : DefaultSettingsOidc,
+      WebauthnSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.WebauthnSettings) != null ? _$ : DefaultSettingsWebauthn,
+      PasskeySettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.PasskeySettings) != null ? _ba : DefaultSettingsPasskey
+    },
+    Message: {
+      Root: (_da = (_ca = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ca.Root) != null ? _da : DefaultMessageContainer,
+      Content: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Content) != null ? _fa : DefaultMessage
+    },
+    Page: {
+      Header: (_ha = (_ga = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ga.Header) != null ? _ha : DefaultPageHeader
+    }
+  };
+}
+
+// src/theme/default/flows/error.tsx
+import { jsx as jsx65 } from "react/jsx-runtime";
+function Error({
+  error,
+  children
+}) {
+  return /* @__PURE__ */ jsx65("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
+}
+
+// src/theme/default/flows/login.tsx
+import { FlowType as FlowType8 } from "@ory/client-fetch";
+import {
+  OryProvider,
+  OryTwoStepCard
+} from "@ory/elements-react";
+import { jsx as jsx66 } from "react/jsx-runtime";
+function Login({
+  flow,
+  config,
+  children,
+  components: flowOverrideComponents
+}) {
+  const components = getOryComponents(flowOverrideComponents);
+  return /* @__PURE__ */ jsx66(
+    OryProvider,
+    {
+      config,
+      flow,
+      flowType: FlowType8.Login,
+      components,
+      children: children != null ? children : /* @__PURE__ */ jsx66(OryTwoStepCard, {})
+    }
+  );
+}
+
+// src/theme/default/flows/recovery.tsx
+import { FlowType as FlowType9 } from "@ory/client-fetch";
+import {
+  OryProvider as OryProvider2,
+  OryTwoStepCard as OryTwoStepCard2
+} from "@ory/elements-react";
+import { jsx as jsx67 } from "react/jsx-runtime";
+function Recovery({
+  flow,
+  config,
+  children,
+  components: flowOverrideComponents
+}) {
+  const components = getOryComponents(flowOverrideComponents);
+  return /* @__PURE__ */ jsx67(
+    OryProvider2,
+    {
+      config,
+      flow,
+      flowType: FlowType9.Recovery,
+      components,
+      children: children != null ? children : /* @__PURE__ */ jsx67(OryTwoStepCard2, {})
+    }
+  );
+}
+
+// src/theme/default/flows/registration.tsx
+import { FlowType as FlowType10 } from "@ory/client-fetch";
+import {
+  OryProvider as OryProvider3,
+  OryTwoStepCard as OryTwoStepCard3
+} from "@ory/elements-react";
+import { jsx as jsx68 } from "react/jsx-runtime";
+function Registration({
+  flow,
+  children,
+  components: flowOverrideComponents,
+  config
+}) {
+  const components = getOryComponents(flowOverrideComponents);
+  return /* @__PURE__ */ jsx68(
+    OryProvider3,
+    {
+      config,
+      flow,
+      flowType: FlowType10.Registration,
+      components,
+      children: children != null ? children : /* @__PURE__ */ jsx68(OryTwoStepCard3, {})
+    }
+  );
+}
+
+// src/theme/default/flows/settings.tsx
+import { FlowType as FlowType11 } from "@ory/client-fetch";
+import {
+  HeadlessPageHeader,
+  OryProvider as OryProvider4,
+  OrySettingsCard
+} from "@ory/elements-react";
+import { Fragment as Fragment5, jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
+function Settings({
+  flow,
+  config,
+  children,
+  components: flowOverrideComponents
+}) {
+  const components = getOryComponents(flowOverrideComponents);
+  return /* @__PURE__ */ jsx69(
+    OryProvider4,
+    {
+      config,
+      flow,
+      flowType: FlowType11.Settings,
+      components,
+      children: children != null ? children : /* @__PURE__ */ jsxs36(Fragment5, { children: [
+        /* @__PURE__ */ jsx69(HeadlessPageHeader, {}),
+        /* @__PURE__ */ jsx69(OrySettingsCard, {})
+      ] })
+    }
+  );
+}
+
+// src/theme/default/flows/verification.tsx
+import { FlowType as FlowType12 } from "@ory/client-fetch";
+import {
+  OryProvider as OryProvider5,
+  OryTwoStepCard as OryTwoStepCard4
+} from "@ory/elements-react";
+import { jsx as jsx70 } from "react/jsx-runtime";
+function Verification({
+  flow,
+  config,
+  children,
+  components: flowOverrideComponents
+}) {
+  const components = getOryComponents(flowOverrideComponents);
+  return /* @__PURE__ */ jsx70(
+    OryProvider5,
+    {
+      config,
+      flow,
+      flowType: FlowType12.Verification,
+      components,
+      children: children != null ? children : /* @__PURE__ */ jsx70(OryTwoStepCard4, {})
+    }
+  );
+}
+export {
+  DefaultButtonSocial,
+  DefaultCard,
+  DefaultCardContent,
+  DefaultCardFooter,
+  DefaultCardHeader,
+  DefaultCardLayout,
+  DefaultCardLogo,
+  DefaultCurrentIdentifierButton,
+  DefaultFormContainer,
+  DefaultMessage,
+  DefaultMessageContainer,
+  Error,
+  Login,
+  Recovery,
+  Registration,
+  Settings,
+  Verification,
+  getOryComponents
+};
+//# sourceMappingURL=index.mjs.map