@ory/elements-react
Version:
Ory Elements React - a collection of React components for authentication UIs.
971 lines (935 loc) • 357 kB
JavaScript
"use client"
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/theme/default/index.ts
var index_exports = {};
__export(index_exports, {
Consent: () => Consent,
DefaultButtonSocial: () => DefaultButtonSocial,
DefaultCard: () => DefaultCard,
DefaultCardContent: () => DefaultCardContent,
DefaultCardFooter: () => DefaultCardFooter,
DefaultCardHeader: () => DefaultCardHeader,
DefaultCardLayout: () => DefaultCardLayout,
DefaultCardLogo: () => DefaultCardLogo,
DefaultCurrentIdentifierButton: () => DefaultCurrentIdentifierButton,
DefaultFormContainer: () => DefaultFormContainer,
DefaultMessage: () => DefaultMessage,
DefaultMessageContainer: () => DefaultMessageContainer,
Error: () => Error2,
Login: () => Login,
Recovery: () => Recovery,
Registration: () => Registration,
Settings: () => Settings,
Verification: () => Verification,
getOryComponents: () => getOryComponents
});
module.exports = __toCommonJS(index_exports);
// src/theme/default/assets/ory-badge-horizontal.svg
var React = __toESM(require("react"));
var import_jsx_runtime = require("react/jsx-runtime");
var SvgOryBadgeHorizontal = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#0F172A", d: "M18.007 8h-1.71l2.007-3.996L16.296 0h1.711l1.145 2.301L20.327 0H22z" }),
/* @__PURE__ */ (0, import_jsx_runtime.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
var React2 = __toESM(require("react"));
var import_jsx_runtime2 = require("react/jsx-runtime");
var SvgOryBadgeVertical = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#0F172A", d: "M8 3.993v1.71L4.004 3.697 0 5.704V3.993l2.301-1.145L0 1.673V0z" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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
var import_jsx_runtime3 = require("react/jsx-runtime");
function Badge() {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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__ */ (0, import_jsx_runtime3.jsx)(ory_badge_horizontal_default, { width: 22, height: 8, className: "sm:hidden" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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
var import_client_fetch4 = require("@ory/client-fetch");
var import_elements_react = require("@ory/elements-react");
var import_react_intl = require("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
var import_client_fetch2 = require("@ory/client-fetch");
var import_client_fetch3 = require("@ory/client-fetch");
var import_react2 = require("react");
// src/context/component.tsx
var import_client_fetch = require("@ory/client-fetch");
var import_react = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var ComponentContext = (0, import_react.createContext)({
components: null,
// fine because we throw an error if it's not provided
nodeSorter: () => 0,
groupSorter: () => 0
});
var defaultGroupOrder = [
import_client_fetch.UiNodeGroupEnum.Default,
import_client_fetch.UiNodeGroupEnum.Profile,
import_client_fetch.UiNodeGroupEnum.Password,
import_client_fetch.UiNodeGroupEnum.Oidc,
import_client_fetch.UiNodeGroupEnum.Code,
import_client_fetch.UiNodeGroupEnum.LookupSecret,
import_client_fetch.UiNodeGroupEnum.Passkey,
import_client_fetch.UiNodeGroupEnum.Webauthn,
import_client_fetch.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(import_client_fetch3.UiNodeGroupEnum).filter((group) => {
var _a2;
return (_a2 = groups[group]) == null ? void 0 : _a2.length;
}).filter(
(group) => ![
import_client_fetch3.UiNodeGroupEnum.Default,
import_client_fetch3.UiNodeGroupEnum.IdentifierFirst,
import_client_fetch3.UiNodeGroupEnum.Profile,
import_client_fetch3.UiNodeGroupEnum.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
var import_jsx_runtime5 = require("react/jsx-runtime");
function DefaultCardFooter() {
const oryFlow = (0, import_elements_react.useOryFlow)();
switch (oryFlow.flowType) {
case import_client_fetch4.FlowType.Login:
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoginCardFooter, {});
case import_client_fetch4.FlowType.Registration:
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RegistrationCardFooter, {});
case import_client_fetch4.FlowType.Recovery:
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecoveryCardFooter, {});
case import_client_fetch4.FlowType.Verification:
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VerificationCardFooter, {});
case import_client_fetch4.FlowType.OAuth2Consent:
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConsentCardFooter, { flow: oryFlow.flow });
default:
return null;
}
}
function LoginCardFooter() {
const { config, formState, flow, flowType } = (0, import_elements_react.useOryFlow)();
const intl = (0, import_react_intl.useIntl)();
const authMethods = nodesToAuthMethodGroups(flow.ui.nodes);
if (flowType === import_client_fetch4.FlowType.Login && flow.refresh) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
formState.current === "provide_identifier" && config.project.registration_enabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
intl.formatMessage({
id: "login.registration-label",
defaultMessage: "No account?"
}),
" ",
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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 === import_client_fetch4.FlowType.Login && flow.requested_aal === "aal2" && (formState.current === "select_method" || authMethods.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
intl.formatMessage({
id: "login.2fa.go-back"
}),
" ",
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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 = (0, import_react_intl.useIntl)();
const { config, flow, formState } = (0, import_elements_react.useOryFlow)();
const screenSelectionNode = findScreenSelectionButton(flow.ui.nodes);
switch (formState.current) {
case "method_active":
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal leading-normal antialiased", children: screenSelectionNode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-normal leading-normal antialiased", children: [
intl.formatMessage({
id: "registration.login-label",
defaultMessage: "Already have an account?"
}),
" ",
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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 } = (0, import_elements_react.useComponents)();
const rememberNode = findNode(flow.ui.nodes, {
group: "oauth2_consent",
node_type: "input",
name: "remember"
});
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-8 flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-interface-foreground-default-secondary leading-normal", children: "You may be sharing sensitive information with this site or application." })
] }),
rememberNode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
Node2.Checkbox,
{
attributes: rememberNode.attributes,
node: rememberNode
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
Node2.Button,
{
node: n,
attributes
},
attributes.value
);
}) }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-sm", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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
var import_elements_react3 = require("@ory/elements-react");
// src/theme/default/utils/constructCardHeader.ts
var import_client_fetch5 = require("@ory/client-fetch");
var import_react_intl2 = require("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 = (0, import_react_intl2.useIntl)();
switch (opts.flowType) {
case import_client_fetch5.FlowType.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 import_client_fetch5.FlowType.Settings:
return {
title: intl.formatMessage({
id: "settings.title"
}),
description: intl.formatMessage({
id: "settings.subtitle"
})
};
case import_client_fetch5.FlowType.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 import_client_fetch5.FlowType.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 import_client_fetch5.FlowType.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) => (0, import_client_fetch5.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 import_client_fetch5.FlowType.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 import_client_fetch5.FlowType.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 import_client_fetch5.FlowType.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
var import_client_fetch6 = require("@ory/client-fetch");
var import_elements_react2 = require("@ory/elements-react");
// src/theme/default/assets/icons/arrow-left.svg
var React3 = __toESM(require("react"));
var import_jsx_runtime6 = require("react/jsx-runtime");
var SvgArrowLeft = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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
var import_react_hook_form = require("react-hook-form");
var import_jsx_runtime7 = require("react/jsx-runtime");
function DefaultCurrentIdentifierButton() {
const { flow, flowType, config, formState } = (0, import_elements_react2.useOryFlow)();
const { setValue } = (0, import_react_hook_form.useFormContext)();
const ui = flow.ui;
if (formState.current === "provide_identifier") {
return null;
}
if (flowType === import_client_fetch6.FlowType.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__ */ (0, import_jsx_runtime7.jsxs)("form", { action: flow.ui.action, method: flow.ui.method, children: [
flow.ui.nodes.filter((n) => {
if ((0, import_client_fetch6.isUiNodeInputAttributes)(n.attributes)) {
return n.attributes.type === "hidden";
}
return false;
}).map((n) => {
const attrs = n.attributes;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"input",
{
type: "hidden",
name: attrs.name,
value: attrs.value
},
attrs.name
);
}),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
arrow_left_default,
{
size: 16,
stroke: "1",
className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
"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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
arrow_left_default,
{
size: 16,
stroke: "1",
className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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 import_client_fetch6.FlowType.Login:
nodeBackButtonAttributes = (_a = nodes.find(
(node) => (0, import_client_fetch6.isUiNodeInputAttributes)(node.attributes) && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
)) == null ? void 0 : _a.attributes;
break;
case import_client_fetch6.FlowType.Registration:
nodeBackButtonAttributes = guessRegistrationBackButton(nodes);
break;
case import_client_fetch6.FlowType.Recovery:
case import_client_fetch6.FlowType.Verification:
nodeBackButtonAttributes = (_b = nodes.find(
(n) => (0, import_client_fetch6.isUiNodeInputAttributes)(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) => (0, import_client_fetch6.isUiNodeInputAttributes)(node.attributes) && backButtonCandiates.includes(node.attributes.name) && node.group === "default"
)) == null ? void 0 : _a.attributes;
}
// src/theme/default/components/card/header.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
function InnerCardHeader({ title, text }) {
const { Card } = (0, import_elements_react3.useComponents)();
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "flex flex-col gap-8 antialiased", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Card.Logo, {}),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultCurrentIdentifierButton, {})
] })
] });
}
function DefaultCardHeader() {
const context = (0, import_elements_react3.useOryFlow)();
const { title, description } = useCardHeaderText(context.flow.ui, context);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InnerCardHeader, { title, text: description });
}
// src/theme/default/components/card/logo.tsx
var import_elements_react4 = require("@ory/elements-react");
var import_jsx_runtime9 = require("react/jsx-runtime");
function DefaultCardLogo() {
const flow = (0, import_elements_react4.useOryFlow)();
if (flow.config.logoUrl) {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
}
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
}
// src/theme/default/components/card/layout.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
function DefaultCardLayout({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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
var import_jsx_runtime11 = require("react/jsx-runtime");
function DefaultCard({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)("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__ */ (0, import_jsx_runtime11.jsx)(Badge, {})
] }) });
}
// src/theme/default/utils/cn.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/theme/default/components/form/index.tsx
var import_react_intl4 = require("react-intl");
var import_elements_react6 = require("@ory/elements-react");
var import_client_fetch8 = require("@ory/client-fetch");
// src/theme/default/components/form/social.tsx
var import_elements_react5 = require("@ory/elements-react");
var import_react3 = require("react");
var import_react_hook_form2 = require("react-hook-form");
var import_react_intl3 = require("react-intl");
var import_usehooks_ts = require("usehooks-ts");
// src/theme/default/provider-logos/apple.svg
var React4 = __toESM(require("react"));
var import_jsx_runtime12 = require("react/jsx-runtime");
var SvgApple = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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
var React5 = __toESM(require("react"));
var import_jsx_runtime13 = require("react/jsx-runtime");
var SvgAuth0 = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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
var React6 = __toESM(require("react"));
var import_jsx_runtime14 = require("react/jsx-runtime");
var SvgDiscord = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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
var React7 = __toESM(require("react"));
var import_jsx_runtime15 = require("react/jsx-runtime");
var SvgFacebook = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("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__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#18ACFE" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: 1, stopColor: "#0163E0" })
] }) })
] });
};
var facebook_default = SvgFacebook;
// src/theme/default/provider-logos/generic.svg
var React8 = __toESM(require("react"));
var import_jsx_runtime16 = require("react/jsx-runtime");
var SvgGeneric = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("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__ */ (0, import_jsx_runtime16.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z" }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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
var React9 = __toESM(require("react"));
var import_jsx_runtime17 = require("react/jsx-runtime");
var SvgGithub = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("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
var React10 = __toESM(require("react"));
var import_jsx_runtime18 = require("react/jsx-runtime");
var SvgGitlab = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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
var React11 = __toESM(require("react"));
var import_jsx_runtime19 = require("react/jsx-runtime");
var SvgGoogle = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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
var React12 = __toESM(require("react"));
var import_jsx_runtime20 = require("react/jsx-runtime");
var SvgLinkedin = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("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__ */ (0, import_jsx_runtime20.jsx)("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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
var React13 = __toESM(require("react"));
var import_jsx_runtime21 = require("react/jsx-runtime");
var SvgMicrosoft = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
] });
};
var microsoft_default = SvgMicrosoft;
// src/theme/default/provider-logos/slack.svg
var React14 = __toESM(require("react"));
var import_jsx_runtime22 = require("react/jsx-runtime");
var SvgSlack = (props) => {
var _a, _b;
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32",