@skybin-tech/brandkit
Version:
React components for brand-compliant social login buttons
539 lines (525 loc) • 17.6 kB
JavaScript
import se, { useEffect as ie } from "react";
import _, { css as R } from "styled-components";
var w = { exports: {} }, v = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var L;
function le() {
if (L) return v;
L = 1;
var r = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
function a(f, o, l) {
var h = null;
if (l !== void 0 && (h = "" + l), o.key !== void 0 && (h = "" + o.key), "key" in o) {
l = {};
for (var p in o)
p !== "key" && (l[p] = o[p]);
} else l = o;
return o = l.ref, {
$$typeof: r,
type: f,
key: h,
ref: o !== void 0 ? o : null,
props: l
};
}
return v.Fragment = s, v.jsx = a, v.jsxs = a, v;
}
var E = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var H;
function ce() {
return H || (H = 1, process.env.NODE_ENV !== "production" && function() {
function r(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === oe ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case j:
return "Fragment";
case J:
return "Profiler";
case q:
return "StrictMode";
case K:
return "Suspense";
case ee:
return "SuspenseList";
case te:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case W:
return "Portal";
case Z:
return (e.displayName || "Context") + ".Provider";
case X:
return (e._context.displayName || "Context") + ".Consumer";
case Q:
var t = e.render;
return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case re:
return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
case N:
t = e._payload, e = e._init;
try {
return r(e(t));
} catch {
}
}
return null;
}
function s(e) {
return "" + e;
}
function a(e) {
try {
s(e);
var t = !1;
} catch {
t = !0;
}
if (t) {
t = console;
var n = t.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return n.call(
t,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
c
), s(e);
}
}
function f(e) {
if (e === j) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === N)
return "<...>";
try {
var t = r(e);
return t ? "<" + t + ">" : "<...>";
} catch {
return "<...>";
}
}
function o() {
var e = y.A;
return e === null ? null : e.getOwner();
}
function l() {
return Error("react-stack-top-frame");
}
function h(e) {
if (I.call(e, "key")) {
var t = Object.getOwnPropertyDescriptor(e, "key").get;
if (t && t.isReactWarning) return !1;
}
return e.key !== void 0;
}
function p(e, t) {
function n() {
z || (z = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
t
));
}
n.isReactWarning = !0, Object.defineProperty(e, "key", {
get: n,
configurable: !0
});
}
function V() {
var e = r(this.type);
return M[e] || (M[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function U(e, t, n, c, b, d, A, C) {
return n = d.ref, e = {
$$typeof: P,
type: e,
key: t,
props: d,
_owner: b
}, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: V
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: A
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: C
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function S(e, t, n, c, b, d, A, C) {
var u = t.children;
if (u !== void 0)
if (c)
if (ne(u)) {
for (c = 0; c < u.length; c++)
O(u[c]);
Object.freeze && Object.freeze(u);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else O(u);
if (I.call(t, "key")) {
u = r(e);
var g = Object.keys(t).filter(function(ae) {
return ae !== "key";
});
c = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", B[u + c] || (g = 0 < g.length ? "{" + g.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
c,
u,
g,
u
), B[u + c] = !0);
}
if (u = null, n !== void 0 && (a(n), u = "" + n), h(t) && (a(t.key), u = "" + t.key), "key" in t) {
n = {};
for (var $ in t)
$ !== "key" && (n[$] = t[$]);
} else n = t;
return u && p(
n,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), U(
e,
u,
d,
b,
o(),
n,
A,
C
);
}
function O(e) {
typeof e == "object" && e !== null && e.$$typeof === P && e._store && (e._store.validated = 1);
}
var k = se, P = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), Q = Symbol.for("react.forward_ref"), K = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), re = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), y = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ne = Array.isArray, T = console.createTask ? console.createTask : function() {
return null;
};
k = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var z, M = {}, Y = k.react_stack_bottom_frame.bind(
k,
l
)(), F = T(f(l)), B = {};
E.Fragment = j, E.jsx = function(e, t, n, c, b) {
var d = 1e4 > y.recentlyCreatedOwnerStacks++;
return S(
e,
t,
n,
!1,
c,
b,
d ? Error("react-stack-top-frame") : Y,
d ? T(f(e)) : F
);
}, E.jsxs = function(e, t, n, c, b) {
var d = 1e4 > y.recentlyCreatedOwnerStacks++;
return S(
e,
t,
n,
!0,
c,
b,
d ? Error("react-stack-top-frame") : Y,
d ? T(f(e)) : F
);
};
}()), E;
}
var G;
function ue() {
return G || (G = 1, process.env.NODE_ENV === "production" ? w.exports = le() : w.exports = ce()), w.exports;
}
var i = ue();
const fe = (r) => /* @__PURE__ */ i.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...r, children: /* @__PURE__ */ i.jsx("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" }) }), m = {
light: {
bg: "#ffffff",
fg: "#24292f",
border: "1px solid #d0d7de"
},
dark: {
bg: "#24292f",
fg: "#ffffff",
border: "none"
}
}, de = _.button`
width: 240px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: opacity 0.2s;
background: ${({ $dark: r }) => r ? m.dark.bg : m.light.bg};
color: ${({ $dark: r }) => r ? m.dark.fg : m.light.fg};
border: ${({ $dark: r }) => r ? m.dark.border : m.light.border};
/* Icon color must remain GitHub black or white */
svg {
fill: ${({ $dark: r }) => r ? "#ffffff" : "#24292f"};
}
&:hover:not(:disabled) {
background: ${({ $dark: r }) => r ? "#1c2128" : "#f6f8fa"};
transform: scale(1.02);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, je = ({
mode: r,
dark: s = !1,
onClick: a,
disabled: f,
className: o
}) => /* @__PURE__ */ i.jsxs(
de,
{
onClick: a,
type: "button",
$dark: s,
disabled: f,
className: o,
children: [
/* @__PURE__ */ i.jsx(fe, {}),
r === "login" ? "Login with GitHub" : "Continue with GitHub"
]
}
), be = (r) => /* @__PURE__ */ i.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...r, children: /* @__PURE__ */ i.jsx("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" }) }), he = (r) => {
let s = 2166136261;
for (let a = 0; a < r.length; a++)
s ^= r.charCodeAt(a), s = s * 16777619 >>> 0;
return s.toString(36);
}, pe = (r, s = "stylesheet", a = "text/css") => {
ie(() => {
const f = `link-${he(`${r}|${s}|${a}`)}`;
if (document.getElementById(f)) return;
const o = document.createElement("link");
return o.id = f, o.href = r, o.rel = s, o.type = a, document.head.appendChild(o), () => {
const l = document.getElementById(f);
l && document.head.removeChild(l);
};
}, [r, s, a]);
}, ge = _.button`
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #1877f2;
border: 1px solid #1877f2;
color: white;
border-radius: 6px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
&:hover:not(:disabled) {
background: #166fe5;
transform: scale(1.02);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`, ye = ({ onClick: r, disabled: s, className: a }) => /* @__PURE__ */ i.jsxs(ge, { type: "button", onClick: r, disabled: s, className: a, children: [
/* @__PURE__ */ i.jsx(be, {}),
"Continue with Facebook"
] }), me = (r) => /* @__PURE__ */ i.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", ...r, children: [
/* @__PURE__ */ i.jsx("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__ */ i.jsx("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__ */ i.jsx("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__ */ i.jsx("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" })
] }), xe = {
light: R`
color: #1f1f1f;
background: #ffffff;
border: 1px solid #dadce0;
`,
dark: R`
color: #e8eaed;
background: #131314;
border: 1px solid #8e8e93;
`
}, ve = {
square: R`border-radius: 4px;`,
rounded: R`border-radius: 9999px;`
}, D = {
SI: "Sign in with Google",
SU: "Sign up with Google",
ctn: "Continue with Google"
}, Ee = _.button`
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: ${({ $width: r }) => r ?? "auto"};
height: ${({ $height: r }) => r ?? "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;
${({ $theme: r }) => xe[r]};
${({ $shape: r }) => ve[r]};
&: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;
}
`, Te = ({
theme: r = "light",
shape: s = "square",
variant: a,
width: f,
height: o,
onClick: l,
disabled: h,
className: p
}) => (pe(
"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
), /* @__PURE__ */ i.jsxs(
Ee,
{
type: "button",
$theme: r,
$shape: s,
$width: f,
$height: o,
onClick: l,
disabled: h,
className: p,
"aria-label": D[a],
children: [
/* @__PURE__ */ i.jsx(me, {}),
D[a]
]
}
)), ke = (r) => /* @__PURE__ */ i.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...r, children: /* @__PURE__ */ i.jsx("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" }) }), x = {
light: {
bg: "#ffffff",
color: "#0A66C2",
border: "1px solid #0A66C2"
},
dark: {
bg: "#0A66C2",
color: "#ffffff",
border: "none"
}
}, we = _.button`
width: 240px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
background: ${({ $dark: r }) => r ? x.dark.bg : x.light.bg};
color: ${({ $dark: r }) => r ? x.dark.color : x.light.color};
border: ${({ $dark: r }) => r ? x.dark.border : x.light.border};
border-radius: ${({ $shape: r }) => r === "round" ? "24px" : "6px"};
&:hover:not(:disabled) {
opacity: 0.9;
}
&&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
${({ className: r }) => r}
`, Ae = ({
mode: r,
dark: s = !1,
disabled: a = !1,
className: f,
shape: o = "round",
onClick: l
}) => /* @__PURE__ */ i.jsxs(
we,
{
type: "button",
onClick: l,
disabled: a,
$dark: s,
$shape: o,
className: f,
children: [
/* @__PURE__ */ i.jsx(ke, {}),
r === "login" ? "Login with LinkedIn" : "Continue with LinkedIn"
]
}
);
export {
ye as FacebookButton,
je as GitHubButton,
Te as GoogleButton,
Ae as LinkedInButton
};