@skybin-tech/brandkit/dist/index.umd.js

React components for brand-compliant social login buttons

(function(d,x){typeof exports=="object"&&typeof module<"u"?x(exports,require("react"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","styled-components"],x):(d=typeof globalThis<"u"?globalThis:d||self,x(d.BrandKit={},d.React,d.styled))})(this,function(d,x,h){"use strict";var _={exports:{}},w={};/**
 * @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 $;function U(){if($)return w;$=1;var r=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function a(f,o,c){var g=null;if(c!==void 0&&(g=""+c),o.key!==void 0&&(g=""+o.key),"key"in o){c={};for(var m in o)m!=="key"&&(c[m]=o[m])}else c=o;return o=c.ref,{$$typeof:r,type:f,key:g,ref:o!==void 0?o:null,props:c}}return w.Fragment=i,w.jsx=a,w.jsxs=a,w}var R={};/**
 * @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 P;function W(){return P||(P=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Re?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case pe:return"Profiler";case he:return"StrictMode";case ve:return"Suspense";case Ee:return"SuspenseList";case we: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 be:return"Portal";case me:return(e.displayName||"Context")+".Provider";case ge:return(e._context.displayName||"Context")+".Consumer";case xe:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ke:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case F:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function i(e){return""+e}function a(e){try{i(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,l=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.",l),i(e)}}function f(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===F)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function o(){var e=y.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function g(e){if(Y.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function m(e,t){function n(){L||(L=!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 fe(){var e=r(this.type);return G[e]||(G[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 de(e,t,n,l,p,b,S,C){return n=b.ref,e={$$typeof:M,type:e,key:t,props:b,_owner:p},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:fe}):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:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function B(e,t,n,l,p,b,S,C){var u=t.children;if(u!==void 0)if(l)if(_e(u)){for(l=0;l<u.length;l++)z(u[l]);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 z(u);if(Y.call(t,"key")){u=r(e);var k=Object.keys(t).filter(function(Te){return Te!=="key"});l=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",V[u+l]||(k=0<k.length?"{"+k.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} />`,l,u,k,u),V[u+l]=!0)}if(u=null,n!==void 0&&(a(n),u=""+n),g(t)&&(a(t.key),u=""+t.key),"key"in t){n={};for(var O in t)O!=="key"&&(n[O]=t[O])}else n=t;return u&&m(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),de(e,u,b,p,o(),n,S,C)}function z(e){typeof e=="object"&&e!==null&&e.$$typeof===M&&e._store&&(e._store.validated=1)}var T=x,M=Symbol.for("react.transitional.element"),be=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),he=Symbol.for("react.strict_mode"),pe=Symbol.for("react.profiler"),ge=Symbol.for("react.consumer"),me=Symbol.for("react.context"),xe=Symbol.for("react.forward_ref"),ve=Symbol.for("react.suspense"),Ee=Symbol.for("react.suspense_list"),ke=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),we=Symbol.for("react.activity"),Re=Symbol.for("react.client.reference"),y=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,_e=Array.isArray,A=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var L,G={},H=T.react_stack_bottom_frame.bind(T,c)(),D=A(f(c)),V={};R.Fragment=j,R.jsx=function(e,t,n,l,p){var b=1e4>y.recentlyCreatedOwnerStacks++;return B(e,t,n,!1,l,p,b?Error("react-stack-top-frame"):H,b?A(f(e)):D)},R.jsxs=function(e,t,n,l,p){var b=1e4>y.recentlyCreatedOwnerStacks++;return B(e,t,n,!0,l,p,b?Error("react-stack-top-frame"):H,b?A(f(e)):D)}}()),R}var N;function q(){return N||(N=1,process.env.NODE_ENV==="production"?_.exports=U():_.exports=W()),_.exports}var s=q();const J=r=>s.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",...r,children:s.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"})}),v={light:{bg:"#ffffff",fg:"#24292f",border:"1px solid #d0d7de"},dark:{bg:"#24292f",fg:"#ffffff",border:"none"}},X=h.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?v.dark.bg:v.light.bg};
  color: ${({$dark:r})=>r?v.dark.fg:v.light.fg};
  border: ${({$dark:r})=>r?v.dark.border:v.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;
}
`,Z=({mode:r,dark:i=!1,onClick:a,disabled:f,className:o})=>s.jsxs(X,{onClick:a,type:"button",$dark:i,disabled:f,className:o,children:[s.jsx(J,{}),r==="login"?"Login with GitHub":"Continue with GitHub"]}),Q=r=>s.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",...r,children:s.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"})}),K=r=>{let i=2166136261;for(let a=0;a<r.length;a++)i^=r.charCodeAt(a),i=i*16777619>>>0;return i.toString(36)},ee=(r,i="stylesheet",a="text/css")=>{x.useEffect(()=>{const f=`link-${K(`${r}|${i}|${a}`)}`;if(document.getElementById(f))return;const o=document.createElement("link");return o.id=f,o.href=r,o.rel=i,o.type=a,document.head.appendChild(o),()=>{const c=document.getElementById(f);c&&document.head.removeChild(c)}},[r,i,a])},re=h.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;
  }
`,te=({onClick:r,disabled:i,className:a})=>s.jsxs(re,{type:"button",onClick:r,disabled:i,className:a,children:[s.jsx(Q,{}),"Continue with Facebook"]}),oe=r=>s.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",...r,children:[s.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"}),s.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"}),s.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"}),s.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"})]}),ne={light:h.css`
    color: #1f1f1f;
    background: #ffffff;
    border: 1px solid #dadce0;
  `,dark:h.css`
    color: #e8eaed;
    background: #131314;
    border: 1px solid #8e8e93;
  `},ae={square:h.css`border-radius: 4px;`,rounded:h.css`border-radius: 9999px;`},I={SI:"Sign in with Google",SU:"Sign up with Google",ctn:"Continue with Google"},ie=h.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})=>ne[r]};
  ${({$shape:r})=>ae[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;
  }
`,se=({theme:r="light",shape:i="square",variant:a,width:f,height:o,onClick:c,disabled:g,className:m})=>(ee("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"),s.jsxs(ie,{type:"button",$theme:r,$shape:i,$width:f,$height:o,onClick:c,disabled:g,className:m,"aria-label":I[a],children:[s.jsx(oe,{}),I[a]]})),ce=r=>s.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",...r,children:s.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"})}),E={light:{bg:"#ffffff",color:"#0A66C2",border:"1px solid #0A66C2"},dark:{bg:"#0A66C2",color:"#ffffff",border:"none"}},le=h.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?E.dark.bg:E.light.bg};
  color: ${({$dark:r})=>r?E.dark.color:E.light.color};
  border: ${({$dark:r})=>r?E.dark.border:E.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}
`,ue=({mode:r,dark:i=!1,disabled:a=!1,className:f,shape:o="round",onClick:c})=>s.jsxs(le,{type:"button",onClick:c,disabled:a,$dark:i,$shape:o,className:f,children:[s.jsx(ce,{}),r==="login"?"Login with LinkedIn":"Continue with LinkedIn"]});d.FacebookButton=te,d.GitHubButton=Z,d.GoogleButton=se,d.LinkedInButton=ue,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});