@skybin-tech/brandkit
Version:
React components for brand-compliant social login buttons
694 lines (653 loc) • 41.4 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`styled-components`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`styled-components`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.BrandKit={},e.React,e.styled,e.ReactJSXRuntime))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,l=i.length,u;c<l;c++)u=i[c],!ee.call(e,u)&&u!==n&&a(e,u,{get:(e=>t[e]).bind(null,u),enumerable:!(r=o(t,u))||r.enumerable});return e},u=(e,t,n)=>(n=e==null?{}:i(c(e)),l(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e));t=u(t),n=u(n);var te=e=>{let t=2166136261;for(let n=0;n<e.length;n++)t^=e.charCodeAt(n),t=t*16777619>>>0;return t.toString(36)},ne=(e,n=`stylesheet`,r=`text/css`)=>{(0,t.useEffect)(()=>{let t=`link-${te(`${e}|${n}|${r}`)}`;if(document.getElementById(t))return;let i=document.createElement(`link`);return i.id=t,i.href=e,i.rel=n,i.type=r,document.head.appendChild(i),()=>{let e=document.getElementById(t);e&&document.head.removeChild(e)}},[e,n,r])},re=e=>(0,r.jsxs)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,...e,children:[(0,r.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`}),(0,r.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`}),(0,r.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`}),(0,r.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`})]}),d={light:n.css`
color: #1f1f1f;
background: #ffffff;
border: 1px solid #dadce0;
`,dark:n.css`
color: #e8eaed;
background: #131314;
border: 1px solid #8e8e93;
`},ie={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},f={signin:`Sign in with Google`,signup:`Sign up with Google`,continue:`Continue with Google`},ae=n.default.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?d.dark:d.light};
${({$shape:e})=>ie[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;
}
`,oe=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(ne(`https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap`),(0,r.jsxs)(ae,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":f[e],children:[(0,r.jsx)(re,{}),f[e]]})),se=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.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`})}),p={light:n.css`
background: #ffffff;
color: #24292f;
border: 1px solid #d0d7de;
svg { fill: #24292f; }
`,dark:n.css`
background: #24292f;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`},ce={square:n.css`border-radius: 6px;`,rounded:n.css`border-radius: 9999px;`},m={signin:`Sign in with GitHub`,signup:`Sign up with GitHub`,continue:`Continue with GitHub`},h=n.default.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})=>ce[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;
}
`,le=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(h,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":m[e],children:[(0,r.jsx)(se,{}),m[e]]}),ue=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.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`})}),g={light:n.css`
background: #1877f2;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #242526;
color: #ffffff;
border: 1px solid #3a3b3c;
svg { fill: #1877f2; }
`},de={square:n.css`border-radius: 6px;`,rounded:n.css`border-radius: 9999px;`},_={signin:`Sign in with Facebook`,signup:`Sign up with Facebook`,continue:`Continue with Facebook`},fe=n.default.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?g.dark:g.light};
${({$shape:e})=>de[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;
}
`,pe=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(fe,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":_[e],children:[(0,r.jsx)(ue,{}),_[e]]}),me=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.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`})}),v={light:n.css`
background: #ffffff;
color: #0a66c2;
border: 1px solid #0a66c2;
`,dark:n.css`
background: #0a66c2;
color: #ffffff;
border: none;
`},he={square:n.css`border-radius: 6px;`,rounded:n.css`border-radius: 9999px;`},y={signin:`Sign in with LinkedIn`,signup:`Sign up with LinkedIn`,continue:`Continue with LinkedIn`},ge=n.default.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?v.dark:v.light};
${({$shape:e})=>he[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;
}
`,_e=({mode:e=`signin`,dark:t=!0,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(ge,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":y[e],children:[(0,r.jsx)(me,{}),y[e]]}),ve=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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`})}),b={light:n.css`
background: #ffffff;
color: #000000;
border: 1px solid #000000;
`,dark:n.css`
background: #000000;
color: #ffffff;
border: none;
`},ye={square:n.css`border-radius: 8px;`,rounded:n.css`border-radius: 9999px;`},x={signin:`Sign in with Apple`,signup:`Sign up with Apple`,continue:`Continue with Apple`},be=n.default.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?b.dark:b.light};
${({$shape:e})=>ye[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;
}
`,xe=({mode:e=`signin`,dark:t=!0,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(be,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":x[e],children:[(0,r.jsx)(ve,{}),x[e]]}),Se=e=>(0,r.jsxs)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,...e,children:[(0,r.jsx)(`rect`,{x:`1`,y:`1`,width:`10.5`,height:`10.5`,fill:`#F25022`}),(0,r.jsx)(`rect`,{x:`12.5`,y:`1`,width:`10.5`,height:`10.5`,fill:`#7FBA00`}),(0,r.jsx)(`rect`,{x:`1`,y:`12.5`,width:`10.5`,height:`10.5`,fill:`#00A4EF`}),(0,r.jsx)(`rect`,{x:`12.5`,y:`12.5`,width:`10.5`,height:`10.5`,fill:`#FFB900`})]}),S={light:n.css`
background: #ffffff;
color: #1b1b1b;
border: 1px solid #8c8c8c;
`,dark:n.css`
background: #2f2f2f;
color: #ffffff;
border: 1px solid #4a4a4a;
`},Ce={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},C={signin:`Sign in with Microsoft`,signup:`Sign up with Microsoft`,continue:`Continue with Microsoft`},we=n.default.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?S.dark:S.light};
${({$shape:e})=>Ce[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;
}
`,Te=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(we,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":C[e],children:[(0,r.jsx)(Se,{}),C[e]]}),Ee=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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`})}),w={light:n.css`
background: #ffffff;
color: #0f1419;
border: 1px solid #cfd9de;
svg { fill: #0f1419; }
`,dark:n.css`
background: #0f1419;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`},De={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},T={signin:`Sign in with X`,signup:`Sign up with X`,continue:`Continue with X`},E=n.default.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?w.dark:w.light};
${({$shape:e})=>De[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;
}
`,Oe=({mode:e=`signin`,dark:t=!0,shape:n=`rounded`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(E,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":T[e],children:[(0,r.jsx)(Ee,{}),T[e]]}),ke=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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`})}),D={light:n.css`
background: #5865f2;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #36393f;
color: #ffffff;
border: 1px solid #5865f2;
svg { fill: #ffffff; }
`},Ae={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},O={signin:`Sign in with Discord`,signup:`Sign up with Discord`,continue:`Continue with Discord`},je=n.default.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?D.dark:D.light};
${({$shape:e})=>Ae[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;
}
`,Me=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(je,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":O[e],children:[(0,r.jsx)(ke,{}),O[e]]}),Ne=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #ffffff;
color: #1d1c1d;
border: 1px solid #dddddd;
`,dark:n.css`
background: #4a154b;
color: #ffffff;
border: none;
`},Pe={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},A={signin:`Sign in with Slack`,signup:`Sign up with Slack`,continue:`Continue with Slack`},Fe=n.default.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})=>Pe[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;
}
`,Ie=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(Fe,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":A[e],children:[(0,r.jsx)(Ne,{}),A[e]]}),Le=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #1db954;
color: #000000;
border: none;
svg { fill: #000000; }
`,dark:n.css`
background: #121212;
color: #1db954;
border: 1px solid #1db954;
svg { fill: #1db954; }
`},Re={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},M={signin:`Sign in with Spotify`,signup:`Sign up with Spotify`,continue:`Continue with Spotify`},ze=n.default.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})=>Re[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;
}
`,Be=({mode:e=`signin`,dark:t=!1,shape:n=`rounded`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(ze,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":M[e],children:[(0,r.jsx)(Le,{}),M[e]]}),Ve=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #ff4500;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #1c1c1c;
color: #ff4500;
border: 1px solid #ff4500;
svg { fill: #ff4500; }
`},He={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},P={signin:`Sign in with Reddit`,signup:`Sign up with Reddit`,continue:`Continue with Reddit`},Ue=n.default.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})=>He[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;
}
`,We=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(Ue,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":P[e],children:[(0,r.jsx)(Ve,{}),P[e]]}),Ge=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #9146ff;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #0e0e10;
color: #9146ff;
border: 1px solid #9146ff;
svg { fill: #9146ff; }
`},Ke={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},I={signin:`Sign in with Twitch`,signup:`Sign up with Twitch`,continue:`Continue with Twitch`},qe=n.default.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})=>Ke[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;
}
`,Je=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(qe,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":I[e],children:[(0,r.jsx)(Ge,{}),I[e]]}),Ye=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #fc6d26;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #1f1f1f;
color: #fc6d26;
border: 1px solid #fc6d26;
svg { fill: #fc6d26; }
`},Xe={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},R={signin:`Sign in with GitLab`,signup:`Sign up with GitLab`,continue:`Continue with GitLab`},Ze=n.default.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})=>Xe[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;
}
`,Qe=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(Ze,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":R[e],children:[(0,r.jsx)(Ye,{}),R[e]]}),$e=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #0052cc;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #1e2432;
color: #4c9aff;
border: 1px solid #4c9aff;
svg { fill: #4c9aff; }
`},et={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},B={signin:`Sign in with Bitbucket`,signup:`Sign up with Bitbucket`,continue:`Continue with Bitbucket`},tt=n.default.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})=>et[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;
}
`,nt=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(tt,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":B[e],children:[(0,r.jsx)($e,{}),B[e]]}),rt=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #ffffff;
color: #0f1111;
border: 1px solid #bbb9b9;
`,dark:n.css`
background: #131921;
color: #ff9900;
border: 1px solid #3a4553;
`},it={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},H={signin:`Sign in with Amazon`,signup:`Sign up with Amazon`,continue:`Continue with Amazon`},at=n.default.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})=>it[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;
}
`,ot=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(at,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":H[e],children:[(0,r.jsx)(rt,{}),H[e]]}),st=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #ffffff;
color: #000000;
border: 1px solid #000000;
svg { fill: #000000; }
`,dark:n.css`
background: #000000;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`},ct={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},W={signin:`Sign in with TikTok`,signup:`Sign up with TikTok`,continue:`Continue with TikTok`},lt=n.default.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})=>ct[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;
}
`,ut=({mode:e=`signin`,dark:t=!0,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(lt,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":W[e],children:[(0,r.jsx)(st,{}),W[e]]}),dt=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #003087;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #1c3163;
color: #ffffff;
border: 1px solid #009cde;
svg { fill: #009cde; }
`},ft={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},K={signin:`Sign in with PayPal`,signup:`Sign up with PayPal`,continue:`Continue with PayPal`},pt=n.default.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})=>ft[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;
}
`,mt=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(pt,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":K[e],children:[(0,r.jsx)(dt,{}),K[e]]}),ht=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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`})}),q={light:n.css`
background: #0061ff;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #1e1919;
color: #0061ff;
border: 1px solid #0061ff;
svg { fill: #0061ff; }
`},gt={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},J={signin:`Sign in with Dropbox`,signup:`Sign up with Dropbox`,continue:`Continue with Dropbox`},Y=n.default.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(0.92);
box-shadow: 0 2px 4px rgba(0, 97, 255, 0.3);
}
&&:disabled {
cursor: not-allowed;
opacity: 0.38;
}
`,_t=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(Y,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":J[e],children:[(0,r.jsx)(ht,{}),J[e]]}),vt=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #2d8cff;
color: #ffffff;
border: none;
svg { fill: #ffffff; }
`,dark:n.css`
background: #1c1c1c;
color: #2d8cff;
border: 1px solid #2d8cff;
svg { fill: #2d8cff; }
`},yt={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},Z={signin:`Sign in with Zoom`,signup:`Sign up with Zoom`,continue:`Continue with Zoom`},bt=n.default.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})=>yt[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;
}
`,xt=({mode:e=`signin`,dark:t=!1,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(bt,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":Z[e],children:[(0,r.jsx)(vt,{}),Z[e]]}),St=e=>(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:(0,r.jsx)(`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.css`
background: #ffffff;
color: #1b2838;
border: 1px solid #1b2838;
svg { fill: #1b2838; }
`,dark:n.css`
background: #1b2838;
color: #c6d4df;
border: none;
svg { fill: #c6d4df; }
`},Ct={square:n.css`border-radius: 4px;`,rounded:n.css`border-radius: 9999px;`},$={signin:`Sign in with Steam`,signup:`Sign up with Steam`,continue:`Continue with Steam`},wt=n.default.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})=>Ct[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;
}
`;e.AmazonButton=ot,e.AppleButton=xe,e.BitbucketButton=nt,e.DiscordButton=Me,e.DropboxButton=_t,e.FacebookButton=pe,e.GitHubButton=le,e.GitLabButton=Qe,e.GoogleButton=oe,e.LinkedInButton=_e,e.MicrosoftButton=Te,e.PayPalButton=mt,e.RedditButton=We,e.SlackButton=Ie,e.SpotifyButton=Be,e.SteamButton=({mode:e=`signin`,dark:t=!0,shape:n=`square`,width:i,height:a,onClick:o,disabled:s,className:c})=>(0,r.jsxs)(wt,{type:`button`,$dark:t,$shape:n,$width:i,$height:a,onClick:o,disabled:s,className:c,"aria-label":$[e],children:[(0,r.jsx)(St,{}),$[e]]}),e.TikTokButton=ut,e.TwitchButton=Je,e.TwitterButton=Oe,e.ZoomButton=xt});