@ory/elements-react
Version:
Ory Elements React - a collection of React components for authentication UIs.
1,019 lines (979 loc) • 343 kB
JavaScript
"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 { useComponents, useOryFlow } from "@ory/elements-react";
import { useIntl } from "react-intl";
// src/theme/default/utils/url.ts
function restartFlowUrl(flow, fallback) {
if (flow.requested_aal === "aal2")
return appendRefresh(appendAal(fallback, "aal1"), true);
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();
}
function appendAal(url, aal) {
const urlObj = new URL(url);
urlObj.searchParams.set("aal", aal);
return urlObj.toString();
}
function appendRefresh(url, refresh) {
const urlObj = new URL(url);
urlObj.searchParams.set("refresh", refresh ? "true" : "false");
return urlObj.toString();
}
// src/util/ui/index.ts
import {
isUiNodeInputAttributes as isUiNodeInputAttributes2,
isUiNodeScriptAttributes
} from "@ory/client-fetch";
import { UiNodeGroupEnum as UiNodeGroupEnum2 } from "@ory/client-fetch";
import { useMemo } from "react";
// src/context/component.tsx
import {
isUiNodeInputAttributes,
UiNodeGroupEnum
} from "@ory/client-fetch";
import { createContext, useContext } from "react";
import { jsx as jsx4 } from "react/jsx-runtime";
var ComponentContext = createContext({
components: null,
// fine because we throw an error if it's not provided
nodeSorter: () => 0,
groupSorter: () => 0
});
var defaultGroupOrder = [
UiNodeGroupEnum.Default,
UiNodeGroupEnum.Profile,
UiNodeGroupEnum.Password,
UiNodeGroupEnum.Oidc,
UiNodeGroupEnum.Code,
UiNodeGroupEnum.LookupSecret,
UiNodeGroupEnum.Passkey,
UiNodeGroupEnum.Webauthn,
UiNodeGroupEnum.Totp
];
// src/util/ui/index.ts
function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
var _a;
const groups = {};
for (const node of nodes) {
if (node.type === "script") {
continue;
}
const groupNodes = (_a = groups[node.group]) != null ? _a : [];
groupNodes.push(node);
groups[node.group] = groupNodes;
}
return Object.values(UiNodeGroupEnum2).filter((group) => {
var _a2;
return (_a2 = groups[group]) == null ? void 0 : _a2.length;
}).filter(
(group) => ![
UiNodeGroupEnum2.Default,
UiNodeGroupEnum2.IdentifierFirst,
UiNodeGroupEnum2.Profile,
UiNodeGroupEnum2.Captcha,
...excludeAuthMethods
].includes(group)
);
}
var findNode = (nodes, opt) => nodes.find((n) => {
return n.attributes.node_type === opt.node_type && (opt.group instanceof RegExp ? n.group.match(opt.group) : n.group === opt.group) && (opt.name && n.attributes.node_type === "input" ? opt.name instanceof RegExp ? n.attributes.name.match(opt.name) : n.attributes.name === opt.name : !opt.name);
});
// src/util/nodes.ts
function findScreenSelectionButton(nodes) {
return nodes.find(
(node) => node.attributes.node_type === "input" && node.attributes.type === "submit" && node.attributes.name === "screen"
);
}
// src/theme/default/components/card/footer.tsx
import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
function DefaultCardFooter() {
const oryFlow = useOryFlow();
switch (oryFlow.flowType) {
case FlowType.Login:
return /* @__PURE__ */ jsx5(LoginCardFooter, {});
case FlowType.Registration:
return /* @__PURE__ */ jsx5(RegistrationCardFooter, {});
case FlowType.Recovery:
return /* @__PURE__ */ jsx5(RecoveryCardFooter, {});
case FlowType.Verification:
return /* @__PURE__ */ jsx5(VerificationCardFooter, {});
case FlowType.OAuth2Consent:
return /* @__PURE__ */ jsx5(ConsentCardFooter, { flow: oryFlow.flow });
default:
return null;
}
}
function LoginCardFooter() {
const { config, formState, flow, flowType } = useOryFlow();
const intl = useIntl();
const authMethods = nodesToAuthMethodGroups(flow.ui.nodes);
if (flowType === FlowType.Login && flow.refresh) {
return null;
}
return /* @__PURE__ */ jsxs4(Fragment, { children: [
formState.current === "provide_identifier" && config.project.registration_enabled && /* @__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__ */ jsx5(
"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/login/action/register",
children: intl.formatMessage({
id: "login.registration-button",
defaultMessage: "Sign up"
})
}
)
] }),
authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ jsx5("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx5(
"a",
{
className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
href: "",
"data-testid": "ory/screen/login/mfa/action/selectMethod",
children: intl.formatMessage({
id: "login.2fa.method.go-back"
})
}
) }),
authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ jsx5("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ jsx5(
"a",
{
className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
href: restartFlowUrl(
flow,
`${config.sdk.url}/self-service/${flowType}/browser`
),
"data-testid": "ory/screen/login/mfa/action/reauthenticate",
children: intl.formatMessage({
id: "login.2fa.go-back.link"
})
}
) }),
flowType === FlowType.Login && flow.requested_aal === "aal2" && (formState.current === "select_method" || authMethods.length === 0) && /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
intl.formatMessage({
id: "login.2fa.go-back"
}),
" ",
/* @__PURE__ */ jsx5(
"a",
{
className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
href: restartFlowUrl(
flow,
`${config.sdk.url}/self-service/${flowType}/browser`
),
"data-testid": "ory/screen/login/mfa/action/reauthenticate",
children: intl.formatMessage({
id: "login.2fa.go-back.link"
})
}
)
] })
] });
}
function RegistrationCardFooter() {
const intl = useIntl();
const { config, flow, formState } = useOryFlow();
const screenSelectionNode = findScreenSelectionButton(flow.ui.nodes);
switch (formState.current) {
case "method_active":
return /* @__PURE__ */ jsx5("span", { className: "font-normal leading-normal antialiased", children: screenSelectionNode && /* @__PURE__ */ jsx5(
"a",
{
className: "font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover",
href: "",
children: intl.formatMessage({
id: "card.footer.select-another-method",
defaultMessage: "Select another method"
})
}
) });
case "select_method":
default:
return /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased", children: [
intl.formatMessage({
id: "registration.login-label",
defaultMessage: "Already have an account?"
}),
" ",
/* @__PURE__ */ jsx5(
"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;
}
function ConsentCardFooter({ flow }) {
var _a, _b;
const { Node: Node2 } = useComponents();
const rememberNode = findNode(flow.ui.nodes, {
group: "oauth2_consent",
node_type: "input",
name: "remember"
});
return /* @__PURE__ */ jsxs4("div", { className: "flex gap-8 flex-col", children: [
/* @__PURE__ */ jsxs4("div", { children: [
/* @__PURE__ */ jsxs4("p", { className: "text-interface-foreground-default-secondary leading-normal font-medium", children: [
"Make sure you trust ",
(_a = flow.consent_request.client) == null ? void 0 : _a.client_name
] }),
/* @__PURE__ */ jsx5("p", { className: "text-interface-foreground-default-secondary leading-normal", children: "You may be sharing sensitive information with this site or application." })
] }),
rememberNode && /* @__PURE__ */ jsx5(
Node2.Checkbox,
{
attributes: rememberNode.attributes,
node: rememberNode
}
),
/* @__PURE__ */ jsx5("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: flow.ui.nodes.filter(
(n) => n.attributes.node_type === "input" && n.attributes.type === "submit"
).map((n) => {
const attributes = n.attributes;
return /* @__PURE__ */ jsx5(
Node2.Button,
{
node: n,
attributes
},
attributes.value
);
}) }),
/* @__PURE__ */ jsxs4("p", { className: "text-sm", children: [
/* @__PURE__ */ jsxs4("span", { className: "text-interface-foreground-default-tertiary", children: [
"Authorizing will redirect to",
" "
] }),
(_b = flow.consent_request.client) == null ? void 0 : _b.client_name
] })
] });
}
// src/theme/default/components/card/header.tsx
import { useComponents as useComponents2, useOryFlow as useOryFlow3 } from "@ory/elements-react";
// src/theme/default/utils/constructCardHeader.ts
import {
FlowType as FlowType2,
isUiNodeInputAttributes as isUiNodeInputAttributes3
} 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, _c, _d, _e, _f;
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" || node.group === "saml")) {
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) => isUiNodeInputAttributes3(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)
}
)
};
} else if (opts.flow.requested_aal === "aal2") {
return {
title: intl.formatMessage({
id: "login.title-aal2"
}),
description: intl.formatMessage({
id: ((_c = opts.formState) == null ? void 0 : _c.current) === "method_active" ? `login.${opts.formState.method}.subtitle` : "login.subtitle-aal2"
})
};
}
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" })
)
}
) : ""
};
case FlowType2.OAuth2Consent:
return {
title: intl.formatMessage(
{
id: "consent.title"
},
{
party: (_d = opts.flow.consent_request.client) == null ? void 0 : _d.client_name
}
),
description: intl.formatMessage(
{
id: "consent.subtitle"
},
{
identifier: (_f = (_e = opts.flow.session.identity) == null ? void 0 : _e.traits.email) != null ? _f : ""
}
)
};
}
return {
title: "Error",
description: "An error occurred"
};
}
// src/theme/default/components/card/current-identifier-button.tsx
import {
FlowType as FlowType3,
isUiNodeInputAttributes as isUiNodeInputAttributes4
} 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 jsx6 } from "react/jsx-runtime";
var SvgArrowLeft = (props) => {
var _a, _b;
return /* @__PURE__ */ jsx6("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__ */ jsx6("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 { useFormContext } from "react-hook-form";
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
function DefaultCurrentIdentifierButton() {
const { flow, flowType, config, formState } = useOryFlow2();
const { setValue } = useFormContext();
const ui = flow.ui;
if (formState.current === "provide_identifier") {
return null;
}
if (flowType === FlowType3.Login && flow.requested_aal === "aal2") {
return null;
}
const nodeBackButton = getBackButtonNodeAttributes(flowType, ui.nodes);
if (!nodeBackButton) {
return null;
}
const initFlowUrl2 = restartFlowUrl(
flow,
`${config.sdk.url}/self-service/${flowType}/browser`
);
const attributes = omit(nodeBackButton, [
"autocomplete",
"node_type",
"maxlength"
]);
const screenSelectionNode = findScreenSelectionButton(flow.ui.nodes);
if (screenSelectionNode) {
return /* @__PURE__ */ jsxs5("form", { action: flow.ui.action, method: flow.ui.method, children: [
flow.ui.nodes.filter((n) => {
if (isUiNodeInputAttributes4(n.attributes)) {
return n.attributes.type === "hidden";
}
return false;
}).map((n) => {
const attrs = n.attributes;
return /* @__PURE__ */ jsx7(
"input",
{
type: "hidden",
name: attrs.name,
value: attrs.value
},
attrs.name
);
}),
/* @__PURE__ */ jsx7(
"button",
{
className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
...attributes,
type: "submit",
onClick: () => {
setValue(
screenSelectionNode.attributes.name,
screenSelectionNode.attributes.value
);
setValue("method", "profile");
},
name: screenSelectionNode.attributes.name,
value: screenSelectionNode.attributes.value,
title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.value}`,
"data-testid": `ory/screen/${flowType}/action/restart`,
children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
/* @__PURE__ */ jsx7(
arrow_left_default,
{
size: 16,
stroke: "1",
className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
}
),
/* @__PURE__ */ jsx7("span", { className: "overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.value })
] })
}
)
] });
}
return /* @__PURE__ */ jsx7(
"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.value}`,
"data-testid": `ory/screen/${flowType}/action/restart`,
children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
/* @__PURE__ */ jsx7(
arrow_left_default,
{
size: 16,
stroke: "1",
className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
}
),
/* @__PURE__ */ jsx7("span", { className: "overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.value })
] })
}
);
}
function getBackButtonNodeAttributes(flowType, nodes) {
var _a, _b;
let nodeBackButtonAttributes;
switch (flowType) {
case FlowType3.Login:
nodeBackButtonAttributes = (_a = nodes.find(
(node) => isUiNodeInputAttributes4(node.attributes) && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
)) == null ? void 0 : _a.attributes;
break;
case FlowType3.Registration:
nodeBackButtonAttributes = guessRegistrationBackButton(nodes);
break;
case FlowType3.Recovery:
case FlowType3.Verification:
nodeBackButtonAttributes = (_b = nodes.find(
(n) => isUiNodeInputAttributes4(n.attributes) && n.attributes.name === "email"
)) == null ? void 0 : _b.attributes;
break;
}
if ((nodeBackButtonAttributes == null ? void 0 : nodeBackButtonAttributes.node_type) !== "input" || !(nodeBackButtonAttributes == null ? void 0 : nodeBackButtonAttributes.value)) {
return void 0;
}
return nodeBackButtonAttributes;
}
var backButtonCandiates = [
"traits.email",
"traits.username",
"traits.phone_number"
];
function guessRegistrationBackButton(uiNodes) {
var _a;
return (_a = uiNodes.find(
(node) => isUiNodeInputAttributes4(node.attributes) && backButtonCandiates.includes(node.attributes.name) && node.group === "default"
)) == null ? void 0 : _a.attributes;
}
// src/theme/default/components/card/header.tsx
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
function InnerCardHeader({ title, text }) {
const { Card } = useComponents2();
return /* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-8 antialiased", children: [
/* @__PURE__ */ jsx8(Card.Logo, {}),
/* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ jsx8("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
/* @__PURE__ */ jsx8("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
/* @__PURE__ */ jsx8(DefaultCurrentIdentifierButton, {})
] })
] });
}
function DefaultCardHeader() {
const context = useOryFlow3();
const { title, description } = useCardHeaderText(context.flow.ui, context);
return /* @__PURE__ */ jsx8(InnerCardHeader, { title, text: description });
}
// src/theme/default/components/card/logo.tsx
import { useOryFlow as useOryFlow4 } from "@ory/elements-react";
import { jsx as jsx9 } from "react/jsx-runtime";
function DefaultCardLogo() {
const flow = useOryFlow4();
if (flow.config.logoUrl) {
return /* @__PURE__ */ jsx9("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
}
return /* @__PURE__ */ jsx9("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 jsx10 } from "react/jsx-runtime";
function DefaultCardLayout({ children }) {
return /* @__PURE__ */ jsx10("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 jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
function DefaultCard({ children }) {
return /* @__PURE__ */ jsx11("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__ */ jsx11(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";
import { useEffect } from "react";
import { useFormContext as useFormContext2 } from "react-hook-form";
import { useIntl as useIntl3 } from "react-intl";
import { useDebounceValue } from "usehooks-ts";
// src/theme/default/provider-logos/apple.svg
import * as React4 from "react";
import { jsx as jsx12 } from "react/jsx-runtime";
var SvgApple = (props) => {
var _a, _b;
return /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ jsx12("path", { 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 jsx13 } from "react/jsx-runtime";
var SvgAuth0 = (props) => {
var _a, _b;
return /* @__PURE__ */ jsx13("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__ */ jsx13("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 jsx14, 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__ */ jsx14("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__ */ jsx14("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 jsx15, 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__ */ jsx15("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
/* @__PURE__ */ jsx15("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__ */ jsx15("defs", { children: /* @__PURE__ */ jsxs9("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ jsx15("stop", { stopColor: "#18ACFE" }),
/* @__PURE__ */ jsx15("stop", { offset: 1, stopColor: "#0163E0" })
] }) })
] });
};
var facebook_default = SvgFacebook;
// src/theme/default/provider-logos/generic.svg
import * as React8 from "react";
import { jsx as jsx16, 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__ */ jsx16("path", { stroke: "none", d: "M0 0h24v24H0z" }),
/* @__PURE__ */ jsx16("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
/* @__PURE__ */ jsx16("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 jsx17 } from "react/jsx-runtime";
var SvgGithub = (props) => {
var _a, _b;
return /* @__PURE__ */ jsx17("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__ */ jsx17("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 jsx18, 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__ */ jsx18("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__ */ jsx18("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__ */ jsx18("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__ */ jsx18("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 jsx19, 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__ */ jsx19("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__ */ jsx19("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__ */ jsx19("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__ */ jsx19("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 jsx20, 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__ */ jsx20("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
/* @__PURE__ */ jsx20("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 jsx21, 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__ */ jsx21("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
/* @__PURE__ */ jsx21("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
/* @__PURE__ */ jsx21("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
/* @__PURE__ */ jsx21("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 jsx22, 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__ */ jsx22("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__ */ jsx22("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__ */ jsx22("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__ */ jsx22("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 jsx23, 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__ */ jsx23("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
/* @__PURE__ */ jsx23("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 jsx24, 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__ */ jsx24("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
/* @__PURE__ */ jsx24("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 jsx25 } from "react/jsx-runtime";
var SvgX = (props) => {
var _a, _b;
return /* @__PURE__ */ jsx25("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__ */ jsx25("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/spinner.tsx
import { jsx as jsx26, 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__ */ jsx26("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ jsx26(
"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: "rou