@skybin-tech/brandkit
Version:
React components for brand-compliant social login buttons
1,346 lines (1,304 loc) • 44.6 kB
JavaScript
"use client";
import { useEffect as e } from "react";
import t, { css as n } from "styled-components";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
//#region src/hooks/useLink.ts
var a = (e) => {
let t = 2166136261;
for (let n = 0; n < e.length; n++) t ^= e.charCodeAt(n), t = t * 16777619 >>> 0;
return t.toString(36);
}, o = (t, n = "stylesheet", r = "text/css") => {
e(() => {
let e = `link-${a(`${t}|${n}|${r}`)}`;
if (document.getElementById(e)) return;
let i = document.createElement("link");
return i.id = e, i.href = t, i.rel = n, i.type = r, document.head.appendChild(i), () => {
let t = document.getElementById(e);
t && document.head.removeChild(t);
};
}, [
t,
n,
r
]);
}, s = (e) => /* @__PURE__ */ i("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "none",
"aria-hidden": "true",
...e,
children: [
/* @__PURE__ */ r("path", {
fill: "#4285F4",
d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
}),
/* @__PURE__ */ r("path", {
fill: "#34A853",
d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
}),
/* @__PURE__ */ r("path", {
fill: "#FBBC05",
d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
}),
/* @__PURE__ */ r("path", {
fill: "#EA4335",
d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
})
]
}), c = {
light: n`
color: #1f1f1f;
background: #ffffff;
border: 1px solid #dadce0;
`,
dark: n`
color: #e8eaed;
background: #131314;
border: 1px solid #8e8e93;
`
}, l = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, u = {
signin: "Sign in with Google",
signup: "Sign up with Google",
continue: "Continue with Google"
}, ee = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 12px;
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: box-shadow 0.2s ease;
${({ $dark: e }) => e ? c.dark : c.light};
${({ $shape: e }) => l[e]};
&:hover:not(:disabled) {
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
&:active:not(:disabled) {
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
0 4px 8px 3px rgba(60, 64, 67, 0.15);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, d = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: c, onClick: l, disabled: d, className: f }) => (o("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"), /* @__PURE__ */ i(ee, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: c,
onClick: l,
disabled: d,
className: f,
"aria-label": u[e],
children: [/* @__PURE__ */ r(s, {}), u[e]]
})), f = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 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.23.957-.266 1.983-.399 3.003-.404 1.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.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
}), p = {
light: n`
background: #ffffff;
color: #24292f;
border: 1px solid #d0d7de;
svg { fill: #24292f; }
`,
dark: n`
background: #24292f;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`
}, te = {
square: n`border-radius: 6px;`,
rounded: n`border-radius: 9999px;`
}, m = {
signin: "Sign in with GitHub",
signup: "Sign up with GitHub",
continue: "Continue with GitHub"
}, ne = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: box-shadow 0.2s, filter 0.2s;
${({ $dark: e }) => e ? p.dark : p.light};
${({ $shape: e }) => te[e]};
&:hover:not(:disabled) {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
filter: brightness(0.97);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, re = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(ne, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": m[e],
children: [/* @__PURE__ */ r(f, {}), m[e]]
}), ie = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" })
}), h = {
light: n`
background: #1877f2;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #242526;
color: #ffffff;
border: 1px solid #3a3b3c;
svg { fill: #1877f2; }
`
}, ae = {
square: n`border-radius: 6px;`,
rounded: n`border-radius: 9999px;`
}, g = {
signin: "Sign in with Facebook",
signup: "Sign up with Facebook",
continue: "Continue with Facebook"
}, oe = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? h.dark : h.light};
${({ $shape: e }) => ae[e]};
&:hover:not(:disabled) {
filter: brightness(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, se = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(oe, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": g[e],
children: [/* @__PURE__ */ r(ie, {}), g[e]]
}), ce = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })
}), _ = {
light: n`
background: #ffffff;
color: #0a66c2;
border: 1px solid #0a66c2;
`,
dark: n`
background: #0a66c2;
color: #ffffff;
border: none;
`
}, le = {
square: n`border-radius: 6px;`,
rounded: n`border-radius: 9999px;`
}, v = {
signin: "Sign in with LinkedIn",
signup: "Sign up with LinkedIn",
continue: "Continue with LinkedIn"
}, ue = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? _.dark : _.light};
${({ $shape: e }) => le[e]};
&:hover:not(:disabled) {
filter: brightness(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, de = ({ mode: e = "signin", dark: t = !0, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(ue, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": v[e],
children: [/* @__PURE__ */ r(ce, {}), v[e]]
}), fe = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83zM13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" })
}), y = {
light: n`
background: #ffffff;
color: #000000;
border: 1px solid #000000;
`,
dark: n`
background: #000000;
color: #ffffff;
border: none;
`
}, pe = {
square: n`border-radius: 8px;`,
rounded: n`border-radius: 9999px;`
}, b = {
signin: "Sign in with Apple",
signup: "Sign up with Apple",
continue: "Continue with Apple"
}, me = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? y.dark : y.light};
${({ $shape: e }) => pe[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, he = ({ mode: e = "signin", dark: t = !0, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(me, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": b[e],
children: [/* @__PURE__ */ r(fe, {}), b[e]]
}), ge = (e) => /* @__PURE__ */ i("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "none",
"aria-hidden": "true",
...e,
children: [
/* @__PURE__ */ r("rect", {
x: "1",
y: "1",
width: "10.5",
height: "10.5",
fill: "#F25022"
}),
/* @__PURE__ */ r("rect", {
x: "12.5",
y: "1",
width: "10.5",
height: "10.5",
fill: "#7FBA00"
}),
/* @__PURE__ */ r("rect", {
x: "1",
y: "12.5",
width: "10.5",
height: "10.5",
fill: "#00A4EF"
}),
/* @__PURE__ */ r("rect", {
x: "12.5",
y: "12.5",
width: "10.5",
height: "10.5",
fill: "#FFB900"
})
]
}), x = {
light: n`
background: #ffffff;
color: #1b1b1b;
border: 1px solid #8c8c8c;
`,
dark: n`
background: #2f2f2f;
color: #ffffff;
border: 1px solid #4a4a4a;
`
}, _e = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, S = {
signin: "Sign in with Microsoft",
signup: "Sign up with Microsoft",
continue: "Continue with Microsoft"
}, ve = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: box-shadow 0.2s, filter 0.2s;
${({ $dark: e }) => e ? x.dark : x.light};
${({ $shape: e }) => _e[e]};
&:hover:not(:disabled) {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
filter: brightness(0.97);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, ye = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(ve, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": S[e],
children: [/* @__PURE__ */ r(ge, {}), S[e]]
}), be = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
}), C = {
light: n`
background: #ffffff;
color: #0f1419;
border: 1px solid #cfd9de;
svg { fill: #0f1419; }
`,
dark: n`
background: #0f1419;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`
}, xe = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, w = {
signin: "Sign in with X",
signup: "Sign up with X",
continue: "Continue with X"
}, Se = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: box-shadow 0.2s, filter 0.2s;
${({ $dark: e }) => e ? C.dark : C.light};
${({ $shape: e }) => xe[e]};
&:hover:not(:disabled) {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
filter: brightness(0.95);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, Ce = ({ mode: e = "signin", dark: t = !0, shape: n = "rounded", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Se, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": w[e],
children: [/* @__PURE__ */ r(be, {}), w[e]]
}), we = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" })
}), T = {
light: n`
background: #5865f2;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #36393f;
color: #ffffff;
border: 1px solid #5865f2;
svg { fill: #ffffff; }
`
}, Te = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, E = {
signin: "Sign in with Discord",
signup: "Sign up with Discord",
continue: "Continue with Discord"
}, D = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? T.dark : T.light};
${({ $shape: e }) => Te[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(88, 101, 242, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, O = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(D, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": E[e],
children: [/* @__PURE__ */ r(we, {}), E[e]]
}), Ee = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" })
}), k = {
light: n`
background: #ffffff;
color: #1d1c1d;
border: 1px solid #dddddd;
`,
dark: n`
background: #4a154b;
color: #ffffff;
border: none;
`
}, De = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, A = {
signin: "Sign in with Slack",
signup: "Sign up with Slack",
continue: "Continue with Slack"
}, Oe = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Lato', 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? k.dark : k.light};
${({ $shape: e }) => De[e]};
&:hover:not(:disabled) {
filter: brightness(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, ke = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Oe, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": A[e],
children: [/* @__PURE__ */ r(Ee, {}), A[e]]
}), Ae = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" })
}), j = {
light: n`
background: #1db954;
color: #000000;
border: none;
svg { fill: #000000; }
`,
dark: n`
background: #121212;
color: #1db954;
border: 1px solid #1db954;
svg { fill: #1db954; }
`
}, je = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, M = {
signin: "Sign in with Spotify",
signup: "Sign up with Spotify",
continue: "Continue with Spotify"
}, Me = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Circular', 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? j.dark : j.light};
${({ $shape: e }) => je[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(29, 185, 84, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, Ne = ({ mode: e = "signin", dark: t = !1, shape: n = "rounded", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Me, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": M[e],
children: [/* @__PURE__ */ r(Ae, {}), M[e]]
}), Pe = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" })
}), N = {
light: n`
background: #ff4500;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #1c1c1c;
color: #ff4500;
border: 1px solid #ff4500;
svg { fill: #ff4500; }
`
}, Fe = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, P = {
signin: "Sign in with Reddit",
signup: "Sign up with Reddit",
continue: "Continue with Reddit"
}, Ie = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? N.dark : N.light};
${({ $shape: e }) => Fe[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(255, 69, 0, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, Le = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Ie, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": P[e],
children: [/* @__PURE__ */ r(Pe, {}), P[e]]
}), Re = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z" })
}), F = {
light: n`
background: #9146ff;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #0e0e10;
color: #9146ff;
border: 1px solid #9146ff;
svg { fill: #9146ff; }
`
}, ze = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, I = {
signin: "Sign in with Twitch",
signup: "Sign up with Twitch",
continue: "Continue with Twitch"
}, Be = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? F.dark : F.light};
${({ $shape: e }) => ze[e]};
&:hover:not(:disabled) {
filter: brightness(0.9);
box-shadow: 0 2px 4px rgba(145, 70, 255, 0.35);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, Ve = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Be, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": I[e],
children: [/* @__PURE__ */ r(Re, {}), I[e]]
}), He = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z" })
}), L = {
light: n`
background: #fc6d26;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #1f1f1f;
color: #fc6d26;
border: 1px solid #fc6d26;
svg { fill: #fc6d26; }
`
}, Ue = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, R = {
signin: "Sign in with GitLab",
signup: "Sign up with GitLab",
continue: "Continue with GitLab"
}, We = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? L.dark : L.light};
${({ $shape: e }) => Ue[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(252, 109, 38, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, Ge = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(We, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": R[e],
children: [/* @__PURE__ */ r(He, {}), R[e]]
}), Ke = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z" })
}), z = {
light: n`
background: #0052cc;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #1e2432;
color: #4c9aff;
border: 1px solid #4c9aff;
svg { fill: #4c9aff; }
`
}, qe = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, B = {
signin: "Sign in with Bitbucket",
signup: "Sign up with Bitbucket",
continue: "Continue with Bitbucket"
}, Je = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? z.dark : z.light};
${({ $shape: e }) => qe[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(0, 82, 204, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, Ye = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Je, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": B[e],
children: [/* @__PURE__ */ r(Ke, {}), B[e]]
}), Xe = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705a.661.661 0 0 1-.75.074c-1.052-.872-1.238-1.276-1.814-2.106-1.734 1.768-2.962 2.297-5.209 2.297-2.661 0-4.733-1.642-4.733-4.925 0-2.565 1.391-4.309 3.37-5.164 1.715-.754 4.11-.891 5.942-1.099v-.41c0-.753.06-1.642-.384-2.294-.385-.577-1.124-.815-1.775-.815-1.205 0-2.277.618-2.54 1.897-.054.285-.261.567-.549.582l-3.061-.333c-.259-.056-.548-.266-.472-.66C5.57 2.062 8.526 1 11.179 1c1.358 0 3.132.361 4.204 1.388C16.616 3.527 16.5 5.045 16.5 6.69v5.001c0 1.501.626 2.162 1.213 2.97.208.287.253.63-.008.838l-2.561 2.296zm3.542 1.554C18.93 21.077 16.2 22 13.853 22c-3.94 0-7.604-1.457-10.337-3.882-.214-.19-.023-.451.234-.303 2.944 1.714 6.586 2.745 10.346 2.745 2.536 0 5.324-.525 7.887-1.614.387-.165.712.254.503.603zm.67-2.181c-.293-.375-1.94-.178-2.68-.09-.225.027-.259-.168-.057-.31 1.312-.923 3.467-.656 3.717-.347.25.31-.065 2.468-1.295 3.498-.19.159-.37.075-.285-.133.277-.69.898-2.234.6-2.618z" })
}), V = {
light: n`
background: #ffffff;
color: #0f1111;
border: 1px solid #bbb9b9;
`,
dark: n`
background: #131921;
color: #ff9900;
border: 1px solid #3a4553;
`
}, Ze = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, H = {
signin: "Sign in with Amazon",
signup: "Sign up with Amazon",
continue: "Continue with Amazon"
}, Qe = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Amazon Ember', 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? V.dark : V.light};
${({ $shape: e }) => Ze[e]};
&:hover:not(:disabled) {
filter: brightness(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, $e = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(Qe, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": H[e],
children: [/* @__PURE__ */ r(Xe, {}), H[e]]
}), et = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.34 6.34 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.73a4.85 4.85 0 0 1-1.01-.04z" })
}), U = {
light: n`
background: #ffffff;
color: #000000;
border: 1px solid #000000;
svg { fill: #000000; }
`,
dark: n`
background: #000000;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`
}, tt = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, W = {
signin: "Sign in with TikTok",
signup: "Sign up with TikTok",
continue: "Continue with TikTok"
}, nt = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? U.dark : U.light};
${({ $shape: e }) => tt[e]};
&:hover:not(:disabled) {
filter: brightness(0.9);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, rt = ({ mode: e = "signin", dark: t = !0, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(nt, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": W[e],
children: [/* @__PURE__ */ r(et, {}), W[e]]
}), it = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z" })
}), G = {
light: n`
background: #003087;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #1c3163;
color: #ffffff;
border: 1px solid #009cde;
svg { fill: #009cde; }
`
}, at = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, K = {
signin: "Sign in with PayPal",
signup: "Sign up with PayPal",
continue: "Continue with PayPal"
}, ot = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? G.dark : G.light};
${({ $shape: e }) => at[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(0, 48, 135, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, st = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(ot, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": K[e],
children: [/* @__PURE__ */ r(it, {}), K[e]]
}), q = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M12 1.5L6.002 5.25 12 9l5.998-3.75L12 1.5zM6.002 12.75L12 9l5.998 3.75L12 16.5l-5.998-3.75zM12 9L6.002 5.25 0 9l6.002 3.75L12 9zm0 0l5.998 3.75L24 9l-6.002-3.75L12 9zM6.002 14.25L12 18l5.998-3.75L12 10.5l-5.998 3.75z" })
}), J = {
light: n`
background: #0061ff;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #1e1919;
color: #0061ff;
border: 1px solid #0061ff;
svg { fill: #0061ff; }
`
}, ct = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, Y = {
signin: "Sign in with Dropbox",
signup: "Sign up with Dropbox",
continue: "Continue with Dropbox"
}, lt = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? J.dark : J.light};
${({ $shape: e }) => ct[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(0, 97, 255, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, ut = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(lt, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": Y[e],
children: [/* @__PURE__ */ r(q, {}), Y[e]]
}), dt = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zM8.5 8A1.5 1.5 0 0 0 7 9.5v5A1.5 1.5 0 0 0 8.5 16h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 15.5 8h-7zm10.121 1.621L16 11.243v1.514l2.621 1.622A.5.5 0 0 0 19.5 14v-4a.5.5 0 0 0-.879-.379z" })
}), X = {
light: n`
background: #2d8cff;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,
dark: n`
background: #1c1c1c;
color: #2d8cff;
border: 1px solid #2d8cff;
svg { fill: #2d8cff; }
`
}, ft = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, Z = {
signin: "Sign in with Zoom",
signup: "Sign up with Zoom",
continue: "Continue with Zoom"
}, pt = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? X.dark : X.light};
${({ $shape: e }) => ft[e]};
&:hover:not(:disabled) {
filter: brightness(0.92);
box-shadow: 0 2px 4px rgba(45, 140, 255, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, mt = ({ mode: e = "signin", dark: t = !1, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(pt, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": Z[e],
children: [/* @__PURE__ */ r(dt, {}), Z[e]]
}), ht = (e) => /* @__PURE__ */ r("svg", {
width: "18",
height: "18",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
...e,
children: /* @__PURE__ */ r("path", { d: "M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.711L.436 13.178C1.862 19.329 7.315 24 11.979 24 18.626 24 24 18.627 24 12S18.626 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.455-.397.957-1.497 1.41-2.454 1.012H7.54zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.663 0 3.015-1.35 3.015-3.015zm-5.273-.005c0-1.252 1.013-2.266 2.265-2.266 1.249 0 2.266 1.014 2.266 2.266 0 1.251-1.017 2.265-2.266 2.265-1.252 0-2.265-1.014-2.265-2.265z" })
}), Q = {
light: n`
background: #ffffff;
color: #1b2838;
border: 1px solid #1b2838;
svg { fill: #1b2838; }
`,
dark: n`
background: #1b2838;
color: #c6d4df;
border: none;
svg { fill: #c6d4df; }
`
}, gt = {
square: n`border-radius: 4px;`,
rounded: n`border-radius: 9999px;`
}, $ = {
signin: "Sign in with Steam",
signup: "Sign up with Steam",
continue: "Continue with Steam"
}, _t = t.button`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "auto"};
height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : e ?? "40px"};
padding: 0 16px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: filter 0.2s, box-shadow 0.2s;
${({ $dark: e }) => e ? Q.dark : Q.light};
${({ $shape: e }) => gt[e]};
&:hover:not(:disabled) {
filter: brightness(1.1);
box-shadow: 0 2px 4px rgba(27, 40, 56, 0.4);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, vt = ({ mode: e = "signin", dark: t = !0, shape: n = "square", width: a, height: o, onClick: s, disabled: c, className: l }) => /* @__PURE__ */ i(_t, {
type: "button",
$dark: t,
$shape: n,
$width: a,
$height: o,
onClick: s,
disabled: c,
className: l,
"aria-label": $[e],
children: [/* @__PURE__ */ r(ht, {}), $[e]]
});
//#endregion
export { $e as AmazonButton, he as AppleButton, Ye as BitbucketButton, O as DiscordButton, ut as DropboxButton, se as FacebookButton, re as GitHubButton, Ge as GitLabButton, d as GoogleButton, de as LinkedInButton, ye as MicrosoftButton, st as PayPalButton, Le as RedditButton, ke as SlackButton, Ne as SpotifyButton, vt as SteamButton, rt as TikTokButton, Ve as TwitchButton, Ce as TwitterButton, mt as ZoomButton };