@necto-react/components 1.2.12 → 1.2.14

package/dist/index.cjs

@@ -1,402 +1,645 @@
-"use strict";var ot=Object.create;var y=Object.defineProperty;var tt=Object.getOwnPropertyDescriptor;var et=Object.getOwnPropertyNames;var rt=Object.getPrototypeOf,nt=Object.prototype.hasOwnProperty;var it=(o,t)=>{for(var r in t)y(o,r,{get:t[r],enumerable:!0})},M=(o,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of et(t))!nt.call(o,n)&&n!==r&&y(o,n,{get:()=>t[n],enumerable:!(i=tt(t,n))||i.enumerable});return o};var l=(o,t,r)=>(r=o!=null?ot(rt(o)):{},M(t||!o||!o.__esModule?y(r,"default",{value:o,enumerable:!0}):r,o)),st=o=>M(y({},"__esModule",{value:!0}),o);var re={};it(re,{AppleButton:()=>h,AtlassianButton:()=>C,BitbucketButton:()=>w,DiscordButton:()=>A,DropboxButton:()=>G,Else:()=>x,FacebookButton:()=>k,GitHubButton:()=>H,GitLabButton:()=>I,GoogleButton:()=>N,If:()=>b,Primitive:()=>O});module.exports=st(re);var V=require("@necto/constants"),z=require("@necto/dom"),m=require("react"),K=require("@emotion/react/jsx-runtime"),at=z.HTMLElements.Div,U=({as:o,asChild:t,children:r,...i},n)=>{let s=o??at;if(t){let e=m.Children.only(r);return(0,m.isValidElement)(e)?(0,m.cloneElement)(e,{...i,ref:e.ref??n}):null}return(0,K.jsx)(s,{ref:n,...i,children:r})},O=Object.assign((0,m.forwardRef)(U),V.DOM.HTML_TAGS.reduce((o,t)=>{let r=t,i=t[0].toUpperCase()+t.slice(1),n=(0,m.forwardRef)((s,e)=>U({...s,as:t},e));return o[r]=n,o[i]=n,o},{}));var X=require("react"),W=require("react/jsx-runtime"),x=o=>{let{children:t}=o;return(0,W.jsx)(X.Fragment,{children:typeof t=="function"?t():t})};var R=require("react"),Z=require("react/jsx-runtime"),b=o=>{let{condition:t,keepAlive:r,children:i}=o;if(!i)return null;let n=!!(typeof t=="function"?t():t);return(0,Z.jsx)(R.Fragment,{children:R.Children.toArray(i).find(s=>s.type!==x!=!n)||null})};var Y=l(require("clsx"),1),j=require("react"),oo=l(require("@emotion/styled"),1),to=require("react-icons/fa");var q=require("@emotion/react"),J=require("@necto/dom");var E=require("react");var u=require("@emotion/react/jsx-runtime"),ct=J.HTMLElements.Button,f=(0,E.forwardRef)(function({as:t=ct,asChild:r=!1,children:i,icon:n,showIcon:s=!0,iconPosition:e="left",disabled:a,className:p,...c},Yo){let jo=(t?.toLowerCase?.()??"")==="button"?{disabled:a}:{role:"button",tabIndex:a?-1:0,"aria-disabled":!!a,onKeyDown:B=>{a||(B.key==="Enter"||B.key===" ")&&(c.onClick?.(B),B.preventDefault())}},g=n?(0,u.jsx)("span",{className:"_necto:BrandIcon",css:q.css`
+"use strict";var dr=Object.create;var C=Object.defineProperty;var mr=Object.getOwnPropertyDescriptor;var ur=Object.getOwnPropertyNames;var br=Object.getPrototypeOf,gr=Object.prototype.hasOwnProperty;var Br=(t,o)=>{for(var r in o)C(t,r,{get:o[r],enumerable:!0})},yt=(t,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of ur(o))!gr.call(t,n)&&n!==r&&C(t,n,{get:()=>o[n],enumerable:!(s=mr(o,n))||s.enumerable});return t};var f=(t,o,r)=>(r=t!=null?dr(br(t)):{},yt(o||!t||!t.__esModule?C(r,"default",{value:t,enumerable:!0}):r,t)),Or=t=>yt(C({},"__esModule",{value:!0}),t);var As={};Br(As,{AppleButton:()=>S,AtlassianButton:()=>F,BitbucketButton:()=>H,DiscordButton:()=>I,DropboxButton:()=>N,Else:()=>T,FacebookButton:()=>U,GitHubButton:()=>K,GitLabButton:()=>V,GoogleButton:()=>Y,HubSpotButton:()=>q,HuggingFaceButton:()=>Q,If:()=>y,LinkedInButton:()=>tt,MetaMaskButton:()=>et,MicrosoftButton:()=>nt,NotionButton:()=>it,OKXButton:()=>ct,Primitive:()=>h,SalesforceButton:()=>ft,SlackButton:()=>dt,SnapchatButton:()=>ut,SpotifyButton:()=>gt,TikTokButton:()=>Bt,TwitchButton:()=>Rt,XButton:()=>Et});module.exports=Or(As);var Ct=require("@necto/constants"),ht=require("@necto/dom"),u=require("react"),Tt=require("@emotion/react/jsx-runtime"),Rr=ht.HTMLElements.Div,vt=({as:t,asChild:o,children:r,...s},n)=>{let i=t??Rr;if(o){let e=u.Children.only(r);return(0,u.isValidElement)(e)?(0,u.cloneElement)(e,{...s,ref:e.ref??n}):null}return(0,Tt.jsx)(i,{ref:n,...s,children:r})},h=Object.assign((0,u.forwardRef)(vt),Ct.DOM.HTML_TAGS.reduce((t,o)=>{let r=o,s=o[0].toUpperCase()+o.slice(1),n=(0,u.forwardRef)((i,e)=>vt({...i,as:o},e));return t[r]=n,t[s]=n,t},{}));var wt=require("react"),Lt=require("@emotion/react/jsx-runtime"),T=t=>{let{children:o}=t;return(0,Lt.jsx)(wt.Fragment,{children:typeof o=="function"?o():o})};var w=require("react"),xt=require("@emotion/react/jsx-runtime"),y=t=>{let{condition:o,keepAlive:r,children:s}=t;if(!s)return null;let n=!!(typeof o=="function"?o():o);return(0,xt.jsx)(w.Fragment,{children:w.Children.toArray(s).find(i=>i.type!==T!=!n)||null})};var St=f(require("clsx"),1),At=require("react"),Ft=f(require("@emotion/styled"),1),Mt=require("react-icons/fa");var k=require("@emotion/react"),kt=require("@necto/dom");var L=require("react");var R=require("@emotion/react/jsx-runtime"),_r=kt.HTMLElements.Button,p=(0,L.forwardRef)(function({as:o=_r,asChild:r=!1,children:s,icon:n,showIcon:i=!0,iconPosition:e="left",disabled:a,className:l,...c},O){let lr=(o?.toLowerCase?.()??"")==="button"?{disabled:a}:{role:"button",tabIndex:a?-1:0,"aria-disabled":!!a,onKeyDown:E=>{a||(E.key==="Enter"||E.key===" ")&&(c.onClick?.(E),E.preventDefault())}},v=n?(0,R.jsx)("span",{className:"_necto:BrandIcon",css:k.css`
         flex-shrink: 0;
         line-height: 0;
         display: inline-flex;
-      `,children:n}):null;return(0,u.jsx)(O,{as:t,ref:Yo,asChild:r,className:p,...jo,...c,children:(0,u.jsxs)(E.Fragment,{children:[(0,u.jsx)(b,{condition:!!g&&s&&e==="left",children:g}),i,(0,u.jsx)(b,{condition:!!g&&s&&e==="right",children:g})]})})});var _=require("@emotion/react/jsx-runtime"),eo="AppleButton",Q="#000000",pt="#1a1a1a",lt="#333333",ft="#ffffff",dt="rgba(0, 0, 0, 0.3)",mt=(0,oo.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+      `,children:n}):null,fr=k.css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 40px;
+    width: 100%;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    ${a&&`
+      opacity: 0.7;
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+  `;return(0,R.jsx)(h,{as:o,ref:O,asChild:r,className:l,css:fr,...lr,...(()=>{let{css:E,...pr}=c;return pr})(),children:(0,R.jsxs)(L.Fragment,{children:[(0,R.jsx)(y,{condition:!!v&&i&&e==="left",children:v}),s,(0,R.jsx)(y,{condition:!!v&&i&&e==="right",children:v})]})})});var $=require("@emotion/react/jsx-runtime"),Ht="AppleButton",$t="#000000",Er="#1a1a1a",yr="#333333",vr="#ffffff",Cr="rgba(0, 0, 0, 0.3)",hr=(0,Ft.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-apple-bg, ${Q});
-  color: var(--necto-apple-text, ${ft});
+  background-color: var(--necto-apple-bg, ${$t});
+  color: var(--necto-apple-text, ${vr});
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
   font-weight: 400;
   font-family: 'Roboto', system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
 
   &:hover {
-    background-color: var(--necto-apple-bg-hover, ${pt});
+    background-color: var(--necto-apple-bg-hover, ${Er});
   }
 
   &:active {
-    background-color: var(--necto-apple-bg-active, ${lt});
+    background-color: var(--necto-apple-bg-active, ${yr});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-apple-focus-shadow, ${dt});
+    box-shadow: 0 0 0 3px var(--necto-apple-focus-shadow, ${Cr});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
-
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-apple-bg, ${Q});
+      background-color: var(--necto-apple-bg, ${$t});
     }
   `}
-`,h=(0,j.forwardRef)(({as:o,asChild:t,children:r="Continue with Apple",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,_.jsx)(mt,{as:o,ref:c,asChild:t,icon:(0,_.jsx)(to.FaApple,{size:s}),showIcon:n,disabled:e,$disabled:e,iconPosition:i,className:(0,Y.default)(`_necto:${eo}`,a),...p,children:r}));h.displayName=eo;var no=l(require("clsx"),1),io=require("react"),so=l(require("@emotion/styled"),1);var ao=require("react-icons/fa"),v=require("@emotion/react/jsx-runtime"),co="AtlassianButton",ro="#0052cc",ut="#0747a6",bt="#003d99",gt="#ffffff",Bt="rgba(0, 82, 204, 0.3)",yt=(0,so.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,S=(0,At.forwardRef)(({as:t,asChild:o,children:r="Continue with Apple",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,$.jsx)(hr,{as:t,ref:c,asChild:o,icon:(0,$.jsx)(Mt.FaApple,{size:i}),showIcon:n,disabled:e,$disabled:e,iconPosition:s,className:(0,St.default)(`_necto:${Ht}`,a),...l,children:r}));S.displayName=Ht;var It=f(require("clsx"),1),Gt=require("react"),Nt=f(require("@emotion/styled"),1);var Dt=require("react-icons/fa"),A=require("@emotion/react/jsx-runtime"),Ut="AtlassianButton",Pt="#0052cc",Tr="#0747a6",wr="#003d99",Lr="#ffffff",xr="rgba(0, 82, 204, 0.3)",kr=(0,Nt.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-atlassian-bg, ${ro});
-  color: var(--necto-atlassian-text, ${gt});
+  background-color: var(--necto-atlassian-bg, ${Pt});
+  color: var(--necto-atlassian-text, ${Lr});
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
   font-weight: 500;
   font-family: system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s;
 
   &:hover {
-    background-color: var(--necto-atlassian-bg-hover, ${ut});
+    background-color: var(--necto-atlassian-bg-hover, ${Tr});
   }
 
   &:active {
-    background-color: var(--necto-atlassian-bg-active, ${bt});
+    background-color: var(--necto-atlassian-bg-active, ${wr});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-atlassian-focus-shadow, ${Bt});
+    box-shadow: 0 0 0 3px var(--necto-atlassian-focus-shadow, ${xr});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
-
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-atlassian-bg, ${ro});
+      background-color: var(--necto-atlassian-bg, ${Pt});
     }
   `}
-`,C=(0,io.forwardRef)(({as:o,asChild:t,children:r="Continue with Atlassian",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,v.jsx)(yt,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,v.jsx)(ao.FaAtlassian,{size:s}),className:(0,no.default)(`_necto:${co}`,a),...p,children:r}));C.displayName=co;var fo=l(require("clsx"),1),mo=require("react"),uo=l(require("@emotion/styled"),1);var d=require("react/jsx-runtime"),po=({size:o})=>(0,d.jsxs)("svg",{width:o,height:o,viewBox:"0 0 72 72",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,d.jsx)("title",{children:"Bitbucket"}),(0,d.jsx)("path",{d:"M58.8295 28.5831H43.8317L41.332 43.3331H30.9168L18.6685 57.9163C18.6685 57.9163 19.2517 58.4163 20.0849 58.4163H52.7472C53.4971 58.4163 54.1637 57.8331 54.3303 57.083L58.8295 28.5831Z",fill:"url(#paint0_linear_5907_10188)"}),(0,d.jsx)("path",{d:"M12.5863 13.5C11.5864 13.5 10.8366 14.4167 11.0033 15.3333L17.7524 56.6666C17.8357 57.1667 18.0857 57.6667 18.5023 58C18.5023 58 19.0855 58.5 19.9187 58.5L32.5838 43.3334H30.834L28.0843 28.5834H43.8323H58.8304L60.9967 15.3333C61.1635 14.3333 60.4135 13.5 59.4136 13.5H12.5863Z",fill:"white",style:{fill:"white",fillOpacity:1}}),(0,d.jsx)("defs",{children:(0,d.jsxs)("linearGradient",{id:"paint0_linear_5907_10188",x1:"60.8078",y1:"35.1603",x2:"37.2868",y2:"51.0791",gradientUnits:"userSpaceOnUse",children:[(0,d.jsx)("stop",{offset:"0.0718327","stop-color":"white","stop-opacity":"0.4",style:{stopColor:"white",stopOpacity:.4}}),(0,d.jsx)("stop",{offset:"1","stop-color":"white",style:{stopColor:"white",stopOpacity:1}})]})})]});var T=require("@emotion/react/jsx-runtime"),bo="BitbucketButton",lo="#0052cc",Ot="#0747a6",xt="#003d99",Rt="#ffffff",Et="rgba(0, 82, 204, 0.3)",_t=(0,uo.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,F=(0,Gt.forwardRef)(({as:t,asChild:o,children:r="Continue with Atlassian",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,A.jsx)(kr,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:(0,A.jsx)(Dt.FaAtlassian,{size:i}),className:(0,It.default)(`_necto:${Ut}`,a),...l,children:r}));F.displayName=Ut;var zt=f(require("clsx"),1),Vt=require("react"),Wt=f(require("@emotion/styled"),1);var m=require("@emotion/react/jsx-runtime"),Xt=({size:t})=>(0,m.jsxs)("svg",{width:t,height:t,viewBox:"0 0 72 72",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,m.jsx)("title",{children:"Bitbucket"}),(0,m.jsx)("path",{d:"M58.8295 28.5831H43.8317L41.332 43.3331H30.9168L18.6685 57.9163C18.6685 57.9163 19.2517 58.4163 20.0849 58.4163H52.7472C53.4971 58.4163 54.1637 57.8331 54.3303 57.083L58.8295 28.5831Z",fill:"url(#paint0_linear_5907_10188)"}),(0,m.jsx)("path",{d:"M12.5863 13.5C11.5864 13.5 10.8366 14.4167 11.0033 15.3333L17.7524 56.6666C17.8357 57.1667 18.0857 57.6667 18.5023 58C18.5023 58 19.0855 58.5 19.9187 58.5L32.5838 43.3334H30.834L28.0843 28.5834H43.8323H58.8304L60.9967 15.3333C61.1635 14.3333 60.4135 13.5 59.4136 13.5H12.5863Z",fill:"white",style:{fill:"white",fillOpacity:1}}),(0,m.jsx)("defs",{children:(0,m.jsxs)("linearGradient",{id:"paint0_linear_5907_10188",x1:"60.8078",y1:"35.1603",x2:"37.2868",y2:"51.0791",gradientUnits:"userSpaceOnUse",children:[(0,m.jsx)("stop",{offset:"0.0718327","stop-color":"white","stop-opacity":"0.4",style:{stopColor:"white",stopOpacity:.4}}),(0,m.jsx)("stop",{offset:"1","stop-color":"white",style:{stopColor:"white",stopOpacity:1}})]})})]});var M=require("@emotion/react/jsx-runtime"),Yt="BitbucketButton",Kt="#0052cc",$r="#0747a6",Sr="#003d99",Ar="#ffffff",Fr="rgba(0, 82, 204, 0.3)",Mr=(0,Wt.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-bitbucket-bg, ${lo});
-  color: var(--necto-bitbucket-text, ${Rt});
+  background-color: var(--necto-bitbucket-bg, ${Kt});
+  color: var(--necto-bitbucket-text, ${Ar});
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
   font-weight: 500;
   font-family: system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s;
 
   &:hover {
-    background-color: var(--necto-bitbucket-bg-hover, ${Ot});
+    background-color: var(--necto-bitbucket-bg-hover, ${$r});
   }
 
   &:active {
-    background-color: var(--necto-bitbucket-bg-active, ${xt});
+    background-color: var(--necto-bitbucket-bg-active, ${Sr});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-bitbucket-focus-shadow, ${Et});
+    box-shadow: 0 0 0 3px var(--necto-bitbucket-focus-shadow, ${Fr});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-bitbucket-bg, ${Kt});
+    }
+  `}
+`,H=(0,Vt.forwardRef)(({as:t,asChild:o,children:r="Continue with Bitbucket",iconPosition:s="left",showIcon:n=!0,iconSize:i=22,disabled:e,className:a,...l},c)=>(0,M.jsx)(Mr,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:(0,M.jsx)(Xt,{size:i}),className:(0,zt.default)(`_necto:${Yt}`,a),...l,children:r}));H.displayName=Yt;var qt=f(require("clsx"),1),Jt=require("react"),Qt=f(require("@emotion/styled"),1);var jt=require("react-icons/fa"),P=require("@emotion/react/jsx-runtime"),to="DiscordButton",Zt="#5865f2",Hr="#4752d9",Pr="#3c45c0",Ir="#ffffff",Gr="rgba(88, 101, 242, 0.3)",Nr=(0,Qt.default)(p)`
+  padding: 0 18px;
+  background-color: var(--necto-discord-bg, ${Zt});
+  color: var(--necto-discord-text, ${Ir});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-discord-bg-hover, ${Hr});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  &:active {
+    background-color: var(--necto-discord-bg-active, ${Pr});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-discord-focus-shadow, ${Gr});
+  }
 
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-bitbucket-bg, ${lo});
+      background-color: var(--necto-discord-bg, ${Zt});
     }
   `}
-`,w=(0,mo.forwardRef)(({as:o,asChild:t,children:r="Continue with Bitbucket",iconPosition:i="left",showIcon:n=!0,iconSize:s=22,disabled:e,className:a,...p},c)=>(0,T.jsx)(_t,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,T.jsx)(po,{size:s}),className:(0,fo.default)(`_necto:${bo}`,a),...p,children:r}));w.displayName=bo;var Bo=l(require("clsx"),1),yo=require("react"),Oo=l(require("@emotion/styled"),1);var xo=require("react-icons/fa"),L=require("@emotion/react/jsx-runtime"),Ro="DiscordButton",go="#5865f2",ht="#4752d9",vt="#3c45c0",Ct="#ffffff",Tt="rgba(88, 101, 242, 0.3)",wt=(0,Oo.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,I=(0,Jt.forwardRef)(({as:t,asChild:o,children:r="Continue with Discord",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,P.jsx)(Nr,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:(0,P.jsx)(jt.FaDiscord,{size:i}),className:(0,qt.default)(`_necto:${to}`,a),...l,children:r}));I.displayName=to;var eo=f(require("clsx"),1),ro=require("react"),no=f(require("@emotion/styled"),1);var so=require("react-icons/fa"),G=require("@emotion/react/jsx-runtime"),io="DropboxButton",oo="#0061ff",Dr="#0056e0",Ur="#004bc5",Xr="#ffffff",Kr="rgba(0, 97, 255, 0.3)",zr=(0,no.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-discord-bg, ${go});
-  color: var(--necto-discord-text, ${Ct});
+  background-color: var(--necto-dropbox-bg, ${oo});
+  color: var(--necto-dropbox-text, ${Xr});
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
   font-weight: 500;
   font-family: 'Roboto', system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
 
   &:hover {
-    background-color: var(--necto-discord-bg-hover, ${ht});
+    background-color: var(--necto-dropbox-bg-hover, ${Dr});
   }
 
   &:active {
-    background-color: var(--necto-discord-bg-active, ${vt});
+    background-color: var(--necto-dropbox-bg-active, ${Ur});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-discord-focus-shadow, ${Tt});
+    box-shadow: 0 0 0 3px var(--necto-dropbox-focus-shadow, ${Kr});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-dropbox-bg, ${oo});
+    }
+  `}
+`,N=(0,ro.forwardRef)(({as:t,asChild:o,children:r="Continue with Dropbox",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,G.jsx)(zr,{as:t,ref:c,asChild:o,icon:(0,G.jsx)(so.FaDropbox,{size:i}),showIcon:n,disabled:e,$disabled:e,iconPosition:s,className:(0,eo.default)(`_necto:${io}`,a),...l,children:r}));N.displayName=io;var co=f(require("clsx"),1),lo=require("react"),fo=f(require("@emotion/styled"),1);var po=require("react-icons/fa6"),D=require("@emotion/react/jsx-runtime"),mo="FacebookButton",ao="#1877f2",Vr="#166fe5",Wr="#1467d6",Yr="#ffffff",Zr="#1877f2",qr="rgba(24, 119, 242, 0.3)",Jr=(0,fo.default)(p)`
+  padding: 0 18px;
+  background-color: var(--necto-facebook-bg, ${ao});
+  color: var(--necto-facebook-text, ${Yr});
+  border: 1px solid var(--necto-facebook-border, ${Zr});
+  font-weight: 500;
+  font-family: system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-facebook-bg-hover, ${Vr});
+  }
 
+  &:active {
+    background-color: var(--necto-facebook-bg-active, ${Wr});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-facebook-focus-shadow, ${qr});
+  }
+
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-discord-bg, ${go});
+      background-color: var(--necto-facebook-bg, ${ao});
     }
   `}
-`,A=(0,yo.forwardRef)(({as:o,asChild:t,children:r="Continue with Discord",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,L.jsx)(wt,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,L.jsx)(xo.FaDiscord,{size:s}),className:(0,Bo.default)(`_necto:${Ro}`,a),...p,children:r}));A.displayName=Ro;var _o=l(require("clsx"),1),ho=require("react"),vo=l(require("@emotion/styled"),1);var Co=require("react-icons/fa"),P=require("@emotion/react/jsx-runtime"),To="DropboxButton",Eo="#0061ff",Lt="#0056e0",At="#004bc5",Pt="#ffffff",Gt="rgba(0, 97, 255, 0.3)",$t=(0,vo.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,U=(0,lo.forwardRef)(({as:t,asChild:o,children:r="Continue with Facebook",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,D.jsx)(Jr,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:(0,D.jsx)(po.FaFacebook,{size:i}),className:(0,co.default)(`_necto:${mo}`,a),...l,children:r}));U.displayName=mo;var bo=f(require("clsx"),1),go=require("react"),Bo=f(require("@emotion/styled"),1);var Oo=require("react-icons/fa"),X=require("@emotion/react/jsx-runtime"),Ro="GitHubButton",uo="#24292f",Qr="#2c3237",jr="#373e47",tn="#ffffff",on="#24292f",en="rgba(36, 41, 47, 0.3)",rn=(0,Bo.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-dropbox-bg, ${Eo});
-  color: var(--necto-dropbox-text, ${Pt});
+  background-color: var(--necto-github-bg, ${uo});
+  color: var(--necto-github-text, ${tn});
+  border: 1px solid var(--necto-github-border, ${on});
+  font-weight: 500;
+  font-family: system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-github-bg-hover, ${Qr});
+  }
+
+  &:active {
+    background-color: var(--necto-github-bg-active, ${jr});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-github-focus-shadow, ${en});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-github-bg, ${uo});
+    }
+  `}
+`,K=(0,go.forwardRef)(({as:t,asChild:o,children:r="Continue with GitHub",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,X.jsx)(rn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:(0,X.jsx)(Oo.FaGithub,{size:i}),className:(0,bo.default)(`_necto:${Ro}`,a),...l,children:r}));K.displayName=Ro;var yo=f(require("clsx"),1),vo=require("react"),Co=f(require("@emotion/styled"),1);var b=require("@emotion/react/jsx-runtime"),_o=({size:t,color:o})=>{let r=o==null;return(0,b.jsxs)("svg",{width:t,height:t,viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:[(0,b.jsx)("title",{children:"GitLab Icon"}),(0,b.jsx)("path",{fill:r?"#E24329":o??void 0,d:"M29.5 13.2v-.1l-3.8-9.9c-.1-.2-.2-.4-.4-.5c-.4-.2-.8-.2-1.2.1c-.1.1-.3.2-.3.4l-2.6 7.9H10.8L8.2 3.2c0-.2-.2-.3-.3-.5c-.4-.2-.8-.3-1.2 0c-.2.1-.3.2-.4.4L2.5 13v.1c-1.1 2.9-.2 6.3 2.3 8.2l5.8 4.3l2.9 2.2l1.7 1.3c.4.3 1 .3 1.4 0l1.7-1.3l2.9-2.2l5.8-4.4c2.7-1.7 3.7-5.1 2.5-8"}),(0,b.jsx)("path",{fill:r?"#FC6D26":o??void 0,d:"M29.5 13.2v-.1c-1.9.4-3.6 1.2-5.1 2.3L16 21.7c2.9 2.2 5.3 4 5.3 4l5.8-4.4c2.6-1.8 3.6-5.2 2.4-8.1"}),(0,b.jsx)("path",{fill:r?"#FCA326":o??void 0,d:"m10.7 25.8l2.9 2.2l1.7 1.3c.4.3 1 .3 1.4 0l1.7-1.3l2.9-2.2s-2.5-1.9-5.3-4c-2.9 2.1-5.3 4-5.3 4"}),(0,b.jsx)("path",{fill:r?"#FC6D26":o??void 0,d:"M7.6 15.4c-1.5-1.1-3.3-1.9-5.1-2.3v.1c-1.1 2.9-.2 6.3 2.3 8.2l5.8 4.3s2.5-1.9 5.3-4z"})]})};var z=require("@emotion/react/jsx-runtime"),ho="GitLabButton",Eo="#fc6d26",nn="#e24329",sn="#c73b1c",an="#ffffff",cn="rgba(252, 109, 38, 0.3)",ln=(0,Co.default)(p)`
+  padding: 0 18px;
+  background-color: var(--necto-gitlab-bg, ${Eo});
+  color: var(--necto-gitlab-text, ${an});
+  border: none;
+  font-weight: 500;
+  font-family: system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-gitlab-bg-hover, ${nn});
+  }
+
+  &:active {
+    background-color: var(--necto-gitlab-bg-active, ${sn});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-gitlab-focus-shadow, ${cn});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-gitlab-bg, ${Eo});
+    }
+  `}
+`,V=(0,vo.forwardRef)(({as:t,asChild:o,iconColor:r="#fff",children:s="Continue with GitLab",iconPosition:n="left",showIcon:i=!0,iconSize:e=20,disabled:a,className:l,...c},O)=>(0,z.jsx)(ln,{as:t,ref:O,asChild:o,showIcon:i,disabled:a,$disabled:a,iconPosition:n,icon:(0,z.jsx)(_o,{size:e,color:r}),className:(0,yo.default)(`_necto:${ho}`,l),...c,children:s}));V.displayName=ho;var wo=f(require("clsx"),1),Lo=require("react"),xo=f(require("@emotion/styled"),1);var ko=require("react-icons/fc"),W=require("@emotion/react/jsx-runtime"),$o="GoogleButton",To="#ffffff",fn="#f8f9fa",pn="#eceff1",dn="#1f1f1f",mn="#747775",un="rgba(66, 133, 244, 0.3)",bn=(0,xo.default)(p)`
+  padding: 0 12px 0 12px;
+  height: 40px;
+  background-color: var(--necto-google-bg, ${To});
+  color: var(--necto-google-text, ${dn});
+  border: 1px solid var(--necto-google-border, ${mn});
+  font-weight: 500;
+  font-family: 'Roboto Medium', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-google-bg-hover, ${fn});
+  }
+
+  &:active {
+    background-color: var(--necto-google-bg-active, ${pn});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-google-focus-shadow, ${un});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-google-bg, ${To});
+    }
+  `}
+`,Y=(0,Lo.forwardRef)(({as:t,asChild:o,children:r="Continue with Google",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,W.jsx)(bn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,wo.default)(`_necto:${$o}`,a),iconPosition:s,icon:(0,W.jsx)(ko.FcGoogle,{size:i}),...l,children:r}));Y.displayName=$o;var Ao=f(require("clsx"),1),Fo=require("react"),Mo=f(require("@emotion/styled"),1);var Ho=require("react-icons/si"),Z=require("@emotion/react/jsx-runtime"),Po="HubSpotButton",So="#ff7a59",gn="#ff6a47",Bn="#e55d3f",On="#ffffff",Rn="rgba(255, 122, 89, 0.3)",_n=(0,Mo.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-hubspot-bg, ${So});
+  color: var(--necto-hubspot-text, ${On});
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
   font-weight: 500;
   font-family: 'Roboto', system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
 
   &:hover {
-    background-color: var(--necto-dropbox-bg-hover, ${Lt});
+    background-color: var(--necto-hubspot-bg-hover, ${gn});
   }
 
   &:active {
-    background-color: var(--necto-dropbox-bg-active, ${At});
+    background-color: var(--necto-hubspot-bg-active, ${Bn});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-dropbox-focus-shadow, ${Gt});
+    box-shadow: 0 0 0 3px var(--necto-hubspot-focus-shadow, ${Rn});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-hubspot-bg, ${So});
+    }
+  `}
+`,q=(0,Fo.forwardRef)(({as:t,asChild:o,children:r="Continue with HubSpot",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,Z.jsx)(_n,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,Ao.default)(`_necto:${Po}`,a),iconPosition:s,icon:(0,Z.jsx)(Ho.SiHubspot,{size:i}),...l,children:r}));q.displayName=Po;var Go=f(require("clsx"),1),No=require("react"),Do=f(require("@emotion/styled"),1);var Uo=require("react-icons/si"),J=require("@emotion/react/jsx-runtime"),Xo="HuggingFaceButton",Io="#ffcc00",En="#e6b800",yn="#cca300",vn="#000000",Cn="rgba(255, 204, 0, 0.3)",hn=(0,Do.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-huggingface-bg, ${Io});
+  color: var(--necto-huggingface-text, ${vn});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-huggingface-bg-hover, ${En});
+  }
+
+  &:active {
+    background-color: var(--necto-huggingface-bg-active, ${yn});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-huggingface-focus-shadow, ${Cn});
+  }
 
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-dropbox-bg, ${Eo});
+      background-color: var(--necto-huggingface-bg, ${Io});
     }
   `}
-`,G=(0,ho.forwardRef)(({as:o,asChild:t,children:r="Continue with Dropbox",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,P.jsx)($t,{as:o,ref:c,asChild:t,icon:(0,P.jsx)(Co.FaDropbox,{size:s}),showIcon:n,disabled:e,$disabled:e,iconPosition:i,className:(0,_o.default)(`_necto:${To}`,a),...p,children:r}));G.displayName=To;var Lo=l(require("clsx"),1),Ao=require("react"),Po=l(require("@emotion/styled"),1);var Go=require("react-icons/fa6"),$=require("@emotion/react/jsx-runtime"),$o="FacebookButton",wo="#1877f2",kt="#166fe5",Ft="#1467d6",Ht="#ffffff",Dt="#1877f2",It="rgba(24, 119, 242, 0.3)",St=(0,Po.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-facebook-bg, ${wo});
-  color: var(--necto-facebook-text, ${Ht});
-  border: 1px solid var(--necto-facebook-border, ${Dt});
-  border-radius: 8px;
-  font-size: 14px;
+`,Q=(0,No.forwardRef)(({as:t,asChild:o,children:r="Continue with HuggingFace",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,J.jsx)(hn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,Go.default)(`_necto:${Xo}`,a),iconPosition:s,icon:(0,J.jsx)(Uo.SiHuggingface,{size:i}),...l,children:r}));Q.displayName=Xo;var zo=f(require("clsx"),1),Vo=require("react"),Wo=f(require("@emotion/styled"),1);var Yo=require("react-icons/fa"),j=require("@emotion/react/jsx-runtime"),Zo="LinkedInButton",Ko="#0a66c2",Tn="#004182",wn="#003366",Ln="#ffffff",xn="rgba(10, 102, 194, 0.3)",kn=(0,Wo.default)(p)`
+  padding: 0 12px;
+  background-color: var(--necto-linkedin-bg, ${Ko});
+  color: var(--necto-linkedin-text, ${Ln});
+  border: none;
   font-weight: 500;
   font-family: system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
 
   &:hover {
-    background-color: var(--necto-facebook-bg-hover, ${kt});
+    background-color: var(--necto-linkedin-bg-hover, ${Tn});
   }
 
   &:active {
-    background-color: var(--necto-facebook-bg-active, ${Ft});
+    background-color: var(--necto-linkedin-bg-active, ${wn});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-facebook-focus-shadow, ${It});
+    box-shadow: 0 0 0 3px var(--necto-linkedin-focus-shadow, ${xn});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-linkedin-bg, ${Ko});
+    }
+  `}
+`,tt=(0,Vo.forwardRef)(({as:t,asChild:o,children:r="Continue with LinkedIn",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,j.jsx)(kn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,zo.default)(`_necto:${Zo}`,a),iconPosition:s,icon:(0,j.jsx)(Yo.FaLinkedin,{size:i}),...l,children:r}));tt.displayName=Zo;var Qo=f(require("clsx"),1),jo=require("react"),te=f(require("@emotion/styled"),1);var d=require("@emotion/react/jsx-runtime"),qo=({size:t})=>(0,d.jsxs)("svg",{width:t,height:t,version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 142 136.878",xmlSpace:"preserve",children:[(0,d.jsx)("title",{children:"MetaMask logo"}),(0,d.jsx)("path",{fill:"#FF5C16",d:`M132.682,132.192l-30.583-9.106l-23.063,13.787l-16.092-0.007l-23.077-13.78l-30.569,9.106L0,100.801
+      l9.299-34.839L0,36.507L9.299,0l47.766,28.538h27.85L132.682,0l9.299,36.507l-9.299,29.455l9.299,34.839L132.682,132.192
+      L132.682,132.192z`}),(0,d.jsx)("path",{fill:"#FF5C16",d:`M9.305,0l47.767,28.558l-1.899,19.599L9.305,0z M39.875,100.814l21.017,16.01l-21.017,6.261
+      C39.875,123.085,39.875,100.814,39.875,100.814z M59.212,74.345l-4.039-26.174L29.317,65.97l-0.014-0.007v0.013l0.08,18.321
+      l10.485-9.951L59.212,74.345L59.212,74.345z M132.682,0L84.915,28.558l1.893,19.599L132.682,0z M102.113,100.814l-21.018,16.01
+      l21.018,6.261V100.814z M112.678,65.975h0.007H112.678v-0.013l-0.006,0.007L86.815,48.171l-4.039,26.174h19.336l10.492,9.95
+      C112.604,84.295,112.678,65.975,112.678,65.975z`}),(0,d.jsx)("path",{fill:"#E34807",d:`M39.868,123.085l-30.569,9.106L0,100.814h39.868C39.868,100.814,39.868,123.085,39.868,123.085z
+      M59.205,74.338l5.839,37.84l-8.093-21.04L29.37,84.295l10.491-9.956h19.344L59.205,74.338z M102.112,123.085l30.57,9.106
+      l9.299-31.378h-39.869C102.112,100.814,102.112,123.085,102.112,123.085z M82.776,74.338l-5.839,37.84l8.092-21.04l27.583-6.843
+      l-10.498-9.956H82.776V74.338z`}),(0,d.jsx)("path",{fill:"#FF8D5D",d:`M0,100.801l9.299-34.839h19.997l0.073,18.327l27.584,6.843l8.092,21.039l-4.16,4.633l-21.017-16.01H0
+      V100.801z M141.981,100.801l-9.299-34.839h-19.998l-0.073,18.327l-27.582,6.843l-8.093,21.039l4.159,4.633l21.018-16.01h39.868
+      V100.801z M84.915,28.538h-27.85l-1.891,19.599l9.872,64.013h11.891l9.878-64.013L84.915,28.538z`}),(0,d.jsx)("path",{fill:"#661800",d:`M9.299,0L0,36.507l9.299,29.455h19.997l25.87-17.804L9.299,0z M53.426,81.938h-9.059l-4.932,4.835
+      l17.524,4.344l-3.533-9.186V81.938z M132.682,0l9.299,36.507l-9.299,29.455h-19.998L86.815,48.158L132.682,0z M88.568,81.938h9.072
+      l4.932,4.841l-17.544,4.353l3.54-9.201V81.938z M79.029,124.385l2.067-7.567l-4.16-4.633h-11.9l-4.159,4.633l2.066,7.567`}),(0,d.jsx)("path",{fill:"#C0C4CD",d:"M79.029,124.384v12.495H62.945v-12.495L79.029,124.384L79.029,124.384z"}),(0,d.jsx)("path",{fill:"#E7EBF6",d:`M39.875,123.072l23.083,13.8v-12.495l-2.067-7.566C60.891,116.811,39.875,123.072,39.875,123.072z
+      M102.113,123.072l-23.084,13.8v-12.495l2.067-7.566C81.096,116.811,102.113,123.072,102.113,123.072z`})]});var ot=require("@emotion/react/jsx-runtime"),oe="MetaMaskButton",Jo="#f6851b",$n="#e2761a",Sn="#cd6a17",An="#ffffff",Fn="rgba(246, 133, 27, 0.3)",Mn=(0,te.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-metamask-bg, ${Jo});
+  color: var(--necto-metamask-text, ${An});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-metamask-bg-hover, ${$n});
+  }
+
+  &:active {
+    background-color: var(--necto-metamask-bg-active, ${Sn});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-metamask-focus-shadow, ${Fn});
+  }
 
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-facebook-bg, ${wo});
+      background-color: var(--necto-metamask-bg, ${Jo});
     }
   `}
-`,k=(0,Ao.forwardRef)(({as:o,asChild:t,children:r="Continue with Facebook",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,$.jsx)(St,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,$.jsx)(Go.FaFacebook,{size:s}),className:(0,Lo.default)(`_necto:${$o}`,a),...p,children:r}));k.displayName=$o;var Fo=l(require("clsx"),1),Ho=require("react"),Do=l(require("@emotion/styled"),1);var Io=require("react-icons/fa"),F=require("@emotion/react/jsx-runtime"),So="GitHubButton",ko="#24292f",Nt="#2c3237",Mt="#373e47",Ut="#ffffff",Vt="#24292f",zt="rgba(36, 41, 47, 0.3)",Kt=(0,Do.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,et=(0,jo.forwardRef)(({as:t,asChild:o,children:r="Continue with MetaMask",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,ot.jsx)(Mn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,Qo.default)(`_necto:${oe}`,a),iconPosition:s,icon:(0,ot.jsx)(qo,{size:i}),...l,children:r}));et.displayName=oe;var ne=f(require("clsx"),1),se=require("react"),ie=f(require("@emotion/styled"),1);var g=require("@emotion/react/jsx-runtime"),ee=({size:t})=>(0,g.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 256 256",children:[(0,g.jsx)("title",{children:"Microsoft"}),(0,g.jsx)("path",{fill:"#F1511B",d:"M121.666 121.666H0V0h121.666z"}),(0,g.jsx)("path",{fill:"#80CC28",d:"M256 121.666H134.335V0H256z"}),(0,g.jsx)("path",{fill:"#00ADEF",d:"M121.663 256.002H0V134.336h121.663z"}),(0,g.jsx)("path",{fill:"#FBBC09",d:"M256 256.002H134.335V134.336H256z"})]});var rt=require("@emotion/react/jsx-runtime"),ae="MicrosoftButton",re="#2f2f2f",Hn="#3d3d3d",Pn="#4a4a4a",In="#ffffff",Gn="#8c8c8c",Nn="rgba(47, 47, 47, 0.3)",Dn=(0,ie.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-github-bg, ${ko});
-  color: var(--necto-github-text, ${Ut});
-  border: 1px solid var(--necto-github-border, ${Vt});
-  border-radius: 8px;
-  font-size: 14px;
+  min-height: 41px;
+  background-color: var(--necto-microsoft-bg, ${re});
+  color: var(--necto-microsoft-text, ${In});
+  border: 1px solid var(--necto-microsoft-border, ${Gn});
+  font-size: 15px;
+  font-weight: 600;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-microsoft-bg-hover, ${Hn});
+  }
+
+  &:active {
+    background-color: var(--necto-microsoft-bg-active, ${Pn});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-microsoft-focus-shadow, ${Nn});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-microsoft-bg, ${re});
+    }
+  `}
+`,nt=(0,se.forwardRef)(({as:t,asChild:o,children:r="Sign in with Microsoft",iconPosition:s="left",showIcon:n=!0,iconSize:i=18,disabled:e,className:a,...l},c)=>(0,rt.jsx)(Dn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,ne.default)(`_necto:${ae}`,a),iconPosition:s,icon:(0,rt.jsx)(ee,{size:i}),...l,children:r}));nt.displayName=ae;var le=f(require("clsx"),1),fe=require("react"),pe=f(require("@emotion/styled"),1);var de=require("react-icons/si"),st=require("@emotion/react/jsx-runtime"),me="NotionButton",ce="#000000",Un="#1a1a1a",Xn="#333333",Kn="#ffffff",zn="rgba(0, 0, 0, 0.3)",Vn=(0,pe.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-notion-bg, ${ce});
+  color: var(--necto-notion-text, ${Kn});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-notion-bg-hover, ${Un});
+  }
+
+  &:active {
+    background-color: var(--necto-notion-bg-active, ${Xn});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-notion-focus-shadow, ${zn});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-notion-bg, ${ce});
+    }
+  `}
+`,it=(0,fe.forwardRef)(({as:t,asChild:o,children:r="Continue with Notion",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,st.jsx)(Vn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,le.default)(`_necto:${me}`,a),iconPosition:s,icon:(0,st.jsx)(de.SiNotion,{size:i}),...l,children:r}));it.displayName=me;var be=f(require("clsx"),1),ge=require("react"),Be=f(require("@emotion/styled"),1);var Oe=require("react-icons/si"),at=require("@emotion/react/jsx-runtime"),Re="OKXButton",ue="#000000",Wn="#1a1a1a",Yn="#333333",Zn="#ffffff",qn="rgba(0, 0, 0, 0.3)",Jn=(0,Be.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-okx-bg, ${ue});
+  color: var(--necto-okx-text, ${Zn});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-okx-bg-hover, ${Wn});
+  }
+
+  &:active {
+    background-color: var(--necto-okx-bg-active, ${Yn});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-okx-focus-shadow, ${qn});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-okx-bg, ${ue});
+    }
+  `}
+`,ct=(0,ge.forwardRef)(({as:t,asChild:o,children:r="Continue with OKX",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,at.jsx)(Jn,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,be.default)(`_necto:${Re}`,a),iconPosition:s,icon:(0,at.jsx)(Oe.SiOkx,{size:i}),...l,children:r}));ct.displayName=Re;var Ee=f(require("clsx"),1),ye=require("react"),ve=f(require("@emotion/styled"),1);var Ce=require("react-icons/fa"),lt=require("@emotion/react/jsx-runtime"),he="SalesforceButton",_e="#00a1e0",Qn="#0074a8",jn="#005c85",ts="#ffffff",os="rgba(0, 161, 224, 0.3)",es=(0,ve.default)(p)`
+  padding: 0 12px;
+  background-color: var(--necto-salesforce-bg, ${_e});
+  color: var(--necto-salesforce-text, ${ts});
+  border: none;
   font-weight: 500;
   font-family: system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
 
   &:hover {
-    background-color: var(--necto-github-bg-hover, ${Nt});
+    background-color: var(--necto-salesforce-bg-hover, ${Qn});
   }
 
   &:active {
-    background-color: var(--necto-github-bg-active, ${Mt});
+    background-color: var(--necto-salesforce-bg-active, ${jn});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-github-focus-shadow, ${zt});
+    box-shadow: 0 0 0 3px var(--necto-salesforce-focus-shadow, ${os});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-salesforce-bg, ${_e});
+    }
+  `}
+`,ft=(0,ye.forwardRef)(({as:t,asChild:o,children:r="Continue with Salesforce",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,lt.jsx)(es,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,Ee.default)(`_necto:${he}`,a),iconPosition:s,icon:(0,lt.jsx)(Ce.FaSalesforce,{size:i}),...l,children:r}));ft.displayName=he;var we=f(require("clsx"),1),Le=require("react"),xe=f(require("@emotion/styled"),1);var ke=require("react-icons/fa"),pt=require("@emotion/react/jsx-runtime"),$e="SlackButton",Te="#4a154b",rs="#3f1240",ns="#350f36",ss="#ffffff",is="rgba(74, 21, 75, 0.3)",as=(0,xe.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-slack-bg, ${Te});
+  color: var(--necto-slack-text, ${ss});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 
+  &:hover {
+    background-color: var(--necto-slack-bg-hover, ${rs});
+  }
+
+  &:active {
+    background-color: var(--necto-slack-bg-active, ${ns});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-slack-focus-shadow, ${is});
+  }
+
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-github-bg, ${ko});
+      background-color: var(--necto-slack-bg, ${Te});
     }
   `}
-`,H=(0,Ho.forwardRef)(({as:o,asChild:t,children:r="Continue with GitHub",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,F.jsx)(Kt,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,F.jsx)(Io.FaGithub,{size:s}),className:(0,Fo.default)(`_necto:${So}`,a),...p,children:r}));H.displayName=So;var Mo=l(require("clsx"),1),Uo=require("react"),Vo=l(require("@emotion/styled"),1);var zo=require("react-icons/fa6"),D=require("@emotion/react/jsx-runtime"),Ko="GitLabButton",No="#fc6d26",Xt="#e24329",Wt="#c73b1c",Zt="#ffffff",qt="rgba(252, 109, 38, 0.3)",Jt=(0,Vo.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,dt=(0,Le.forwardRef)(({as:t,asChild:o,children:r="Continue with Slack",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,pt.jsx)(as,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,we.default)(`_necto:${$e}`,a),iconPosition:s,icon:(0,pt.jsx)(ke.FaSlack,{size:i}),...l,children:r}));dt.displayName=$e;var Fe=f(require("clsx"),1),Me=require("react"),He=f(require("@emotion/styled"),1);var _=require("@emotion/react/jsx-runtime"),Se=({size:t,color:o})=>{let r=o==null;return(0,_.jsxs)("svg",{width:t,height:t,viewBox:"0 0 500 500",xmlns:"http://www.w3.org/2000/svg",children:[(0,_.jsx)("title",{children:"Snapchat Icon"}),(0,_.jsxs)("g",{children:[(0,_.jsx)("path",{fill:r?"white":o??void 0,d:"M417.93,340.71c-60.61-29.34-70.27-74.64-70.7-78-.52-4.07-1.11-7.27,3.38-11.41,4.33-4,23.54-15.89,28.87-19.61,8.81-6.16,12.69-12.31,9.83-19.87-2-5.23-6.87-7.2-12-7.2a22.3,22.3,0,0,0-4.81.54c-9.68,2.1-19.08,6.95-24.52,8.26a8.56,8.56,0,0,1-2,.27c-2.9,0-4-1.29-3.72-4.78.68-10.58,2.12-31.23.45-50.52-2.29-26.54-10.85-39.69-21-51.32C316.8,101.43,294,77.2,250,77.2S183.23,101.43,178.35,107c-10.18,11.63-18.73,24.78-21,51.32-1.67,19.29-.17,39.93.45,50.52.2,3.32-.82,4.78-3.72,4.78a8.64,8.64,0,0,1-2-.27c-5.43-1.31-14.83-6.16-24.51-8.26a22.3,22.3,0,0,0-4.81-.54c-5.15,0-10,2-12,7.2-2.86,7.56,1,13.71,9.84,19.87,5.33,3.72,24.54,15.6,28.87,19.61,4.48,4.14,3.9,7.34,3.38,11.41-.43,3.41-10.1,48.71-70.7,78-3.55,1.72-9.59,5.36,1.06,11.24,16.72,9.24,27.85,8.25,36.5,13.82,7.34,4.73,3,14.93,8.34,18.61,6.56,4.53,25.95-.32,51,7.95,21,6.92,33.76,26.47,71,26.47s50.37-19.64,71-26.47c25-8.27,44.43-3.42,51-7.95,5.33-3.68,1-13.88,8.34-18.61,8.65-5.57,19.77-4.58,36.5-13.82C427.52,346.07,421.48,342.43,417.93,340.71Z"}),(0,_.jsx)("path",{fill:r?"black":o??void 0,d:"M444.3,337.26c-2.72-7.4-7.9-11.36-13.8-14.64-1.11-.65-2.13-1.17-3-1.57-1.76-.91-3.56-1.79-5.35-2.72-18.39-9.75-32.75-22.05-42.71-36.63a83.06,83.06,0,0,1-7.33-13c-.85-2.43-.81-3.81-.2-5.07a8.25,8.25,0,0,1,2.35-2.45c3.16-2.09,6.42-4.21,8.63-5.64,3.94-2.55,7.06-4.57,9.07-6,7.55-5.28,12.83-10.89,16.13-17.16A34.17,34.17,0,0,0,409.78,204c-5-13.16-17.43-21.33-32.49-21.33a44.75,44.75,0,0,0-9.45,1c-.83.18-1.66.37-2.47.58.14-9-.06-18.5-.86-27.85-2.84-32.87-14.35-50.1-26.35-63.84A105,105,0,0,0,311.37,71C293.16,60.6,272.51,55.32,250,55.32S206.94,60.6,188.71,71a104.62,104.62,0,0,0-26.84,21.6c-12,13.74-23.51,31-26.35,63.84-.8,9.35-1,18.9-.87,27.85-.81-.21-1.63-.4-2.46-.58a44.75,44.75,0,0,0-9.45-1c-15.07,0-27.52,8.17-32.5,21.33a34.21,34.21,0,0,0,1.65,28.41c3.31,6.27,8.59,11.88,16.14,17.16,2,1.4,5.13,3.42,9.07,6,2.13,1.38,5.24,3.4,8.29,5.42a8.9,8.9,0,0,1,2.66,2.67c.64,1.31.66,2.72-.29,5.32a82.29,82.29,0,0,1-7.21,12.73c-9.74,14.25-23.68,26.33-41.48,36-9.43,5-19.23,8.34-23.37,19.59-3.12,8.49-1.08,18.15,6.85,26.29h0a39.63,39.63,0,0,0,10,7.57,108.35,108.35,0,0,0,24.47,9.79,16.16,16.16,0,0,1,4.94,2.21c2.89,2.53,2.48,6.34,6.33,11.92a27.8,27.8,0,0,0,7.24,7.36c8.08,5.58,17.16,5.93,26.78,6.3,8.69.33,18.54.71,29.79,4.42,4.66,1.54,9.5,4.52,15.11,8,13.47,8.28,31.91,19.61,62.77,19.61s49.43-11.39,63-19.7c5.57-3.42,10.38-6.37,14.91-7.87,11.25-3.72,21.1-4.09,29.79-4.42,9.62-.37,18.7-.72,26.78-6.3a27.89,27.89,0,0,0,8.24-9c2.77-4.71,2.7-8,5.3-10.3a15.32,15.32,0,0,1,4.64-2.12,108.76,108.76,0,0,0,24.8-9.88A39,39,0,0,0,437.94,363l.1-.12C445.48,354.92,447.35,345.54,444.3,337.26ZM416.87,352c-16.73,9.24-27.85,8.25-36.5,13.82-7.35,4.73-3,14.93-8.34,18.61-6.56,4.53-25.95-.32-51,7.95-20.66,6.83-33.84,26.47-71,26.47S200,399.25,179,392.33c-25-8.27-44.43-3.42-51-7.95-5.33-3.68-1-13.88-8.34-18.61C111,360.2,99.88,361.19,83.16,352c-10.65-5.88-4.61-9.52-1.06-11.24,60.6-29.34,70.27-74.64,70.7-78,.52-4.07,1.1-7.27-3.38-11.41-4.33-4-23.54-15.89-28.87-19.61-8.82-6.16-12.7-12.31-9.84-19.87,2-5.23,6.88-7.2,12-7.2a22.3,22.3,0,0,1,4.81.54c9.68,2.1,19.08,6.95,24.51,8.26a8.64,8.64,0,0,0,2,.27c2.9,0,3.92-1.46,3.72-4.78-.62-10.59-2.12-31.23-.45-50.52,2.29-26.54,10.84-39.69,21-51.32,4.88-5.59,27.81-29.82,71.66-29.82S316.8,101.43,321.68,107c10.17,11.63,18.73,24.78,21,51.32,1.67,19.29.23,39.94-.45,50.52-.23,3.49.82,4.78,3.72,4.78a8.56,8.56,0,0,0,2-.27c5.44-1.31,14.84-6.16,24.52-8.26a22.3,22.3,0,0,1,4.81-.54c5.15,0,10,2,12,7.2,2.86,7.56-1,13.71-9.83,19.87-5.33,3.72-24.54,15.6-28.87,19.61-4.49,4.14-3.9,7.34-3.38,11.41.43,3.41,10.09,48.71,70.7,78C421.48,342.43,427.52,346.07,416.87,352Z"})]})]})};var mt=require("@emotion/react/jsx-runtime"),Pe="SnapchatButton",Ae="#FFFC00",cs="#F7EC09",ls="#E8DD08",fs="#000000",ps="rgba(255, 252, 0, 0.3)",ds=(0,He.default)(p)`
   padding: 0 18px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-gitlab-bg, ${No});
-  color: var(--necto-gitlab-text, ${Zt});
+  background-color: var(--necto-snapchat-bg, ${Ae});
+  color: var(--necto-snapchat-text, ${fs});
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
   font-weight: 500;
-  font-family: system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 
   &:hover {
-    background-color: var(--necto-gitlab-bg-hover, ${Xt});
+    background-color: var(--necto-snapchat-bg-hover, ${cs});
   }
 
   &:active {
-    background-color: var(--necto-gitlab-bg-active, ${Wt});
+    background-color: var(--necto-snapchat-bg-active, ${ls});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-gitlab-focus-shadow, ${qt});
+    box-shadow: 0 0 0 3px var(--necto-snapchat-focus-shadow, ${ps});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-snapchat-bg, ${Ae});
+    }
+  `}
+`,ut=(0,Me.forwardRef)(({as:t,asChild:o,iconColor:r=null,children:s="Continue with Snapchat",iconPosition:n="left",showIcon:i=!0,iconSize:e=20,disabled:a,className:l,...c},O)=>(0,mt.jsx)(ds,{as:t,ref:O,asChild:o,showIcon:i,disabled:a,$disabled:a,iconPosition:n,icon:(0,mt.jsx)(Se,{size:e,color:r}),className:(0,Fe.default)(`_necto:${Pe}`,l),...c,children:s}));ut.displayName=Pe;var Ge=f(require("clsx"),1),Ne=require("react"),De=f(require("@emotion/styled"),1);var Ue=require("react-icons/fa"),bt=require("@emotion/react/jsx-runtime"),Xe="SpotifyButton",Ie="#1db954",ms="#1aa64b",us="#179443",bs="#ffffff",gs="rgba(29, 185, 84, 0.3)",Bs=(0,De.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-spotify-bg, ${Ie});
+  color: var(--necto-spotify-text, ${bs});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 
+  &:hover {
+    background-color: var(--necto-spotify-bg-hover, ${ms});
+  }
+
+  &:active {
+    background-color: var(--necto-spotify-bg-active, ${us});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-spotify-focus-shadow, ${gs});
+  }
+
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-gitlab-bg, ${No});
+      background-color: var(--necto-spotify-bg, ${Ie});
     }
   `}
-`,I=(0,Uo.forwardRef)(({as:o,asChild:t,children:r="Continue with GitLab",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,D.jsx)(Jt,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,D.jsx)(zo.FaGitlab,{size:s}),className:(0,Mo.default)(`_necto:${Ko}`,a),...p,children:r}));I.displayName=Ko;var Wo=l(require("clsx"),1),Zo=require("react"),qo=l(require("@emotion/styled"),1);var Jo=require("react-icons/fc"),S=require("@emotion/react/jsx-runtime"),Qo="GoogleButton",Xo="#ffffff",Qt="#f8f9fa",Yt="#eceff1",jt="#1f1f1f",oe="#747775",te="rgba(66, 133, 244, 0.3)",ee=(0,qo.default)(f)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,gt=(0,Ne.forwardRef)(({as:t,asChild:o,children:r="Continue with Spotify",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,bt.jsx)(Bs,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,Ge.default)(`_necto:${Xe}`,a),iconPosition:s,icon:(0,bt.jsx)(Ue.FaSpotify,{size:i}),...l,children:r}));gt.displayName=Xe;var Ve=f(require("clsx"),1),We=require("react"),Ye=f(require("@emotion/styled"),1);var B=require("@emotion/react/jsx-runtime"),Ke=({size:t})=>(0,B.jsxs)("svg",{width:t,height:t,viewBox:"0 0 256 290",xmlns:"http://www.w3.org/2000/svg",children:[(0,B.jsx)("title",{children:"TikTok Icon"}),(0,B.jsxs)("g",{children:[(0,B.jsx)("path",{fill:"#FF004F",d:"M189.72 104.421c18.678 13.345 41.56 21.197 66.273 21.197v-47.53a67 67 0 0 1-13.918-1.456v37.413c-24.711 0-47.59-7.851-66.272-21.195v96.996c0 48.523-39.356 87.855-87.9 87.855c-18.113 0-34.949-5.473-48.934-14.86c15.962 16.313 38.222 26.432 62.848 26.432c48.548 0 87.905-39.332 87.905-87.857v-96.995zm17.17-47.952c-9.546-10.423-15.814-23.893-17.17-38.785v-6.113h-13.189c3.32 18.927 14.644 35.097 30.358 44.898M69.673 225.607a40 40 0 0 1-8.203-24.33c0-22.192 18.001-40.186 40.21-40.186a40.3 40.3 0 0 1 12.197 1.883v-48.593c-4.61-.631-9.262-.9-13.912-.801v37.822a40.3 40.3 0 0 0-12.203-1.882c-22.208 0-40.208 17.992-40.208 40.187c0 15.694 8.997 29.281 22.119 35.9"}),(0,B.jsx)("path",{fill:"#000000",d:"M175.803 92.849c18.683 13.344 41.56 21.195 66.272 21.195V76.631c-13.794-2.937-26.005-10.141-35.186-20.162c-15.715-9.802-27.038-25.972-30.358-44.898h-34.643v189.843c-.079 22.132-18.049 40.052-40.21 40.052c-13.058 0-24.66-6.221-32.007-15.86c-13.12-6.618-22.118-20.206-22.118-35.898c0-22.193 18-40.187 40.208-40.187c4.255 0 8.356.662 12.203 1.882v-37.822c-47.692.985-86.047 39.933-86.047 87.834c0 23.912 9.551 45.589 25.053 61.428c13.985 9.385 30.82 14.86 48.934 14.86c48.545 0 87.9-39.335 87.9-87.857z"}),(0,B.jsx)("path",{fill:"#00F2EA",d:"M242.075 76.63V66.516a66.3 66.3 0 0 1-35.186-10.047a66.47 66.47 0 0 0 35.186 20.163M176.53 11.57a68 68 0 0 1-.728-5.457V0h-47.834v189.845c-.076 22.13-18.046 40.05-40.208 40.05a40.06 40.06 0 0 1-18.09-4.287c7.347 9.637 18.949 15.857 32.007 15.857c22.16 0 40.132-17.918 40.21-40.05V11.571zM99.966 113.58v-10.769a89 89 0 0 0-12.061-.818C39.355 101.993 0 141.327 0 189.845c0 30.419 15.467 57.227 38.971 72.996c-15.502-15.838-25.053-37.516-25.053-61.427c0-47.9 38.354-86.848 86.048-87.833"})]})]});var Ze=require("react-icons/fa"),x=require("@emotion/react/jsx-runtime"),qe="TikTokButton",ze="#000000",Os="#1a1a1a",Rs="#333333",_s="#ffffff",Es="rgba(0, 0, 0, 0.3)",ys=(0,Ye.default)(p)`
   padding: 0 12px 0 12px;
-  min-height: 40px;
-  width: 100%;
-  background-color: var(--necto-google-bg, ${Xo});
-  color: var(--necto-google-text, ${jt});
-  border: 1px solid var(--necto-google-border, ${oe});
-  border-radius: 8px;
-  font-size: 14px;
+  background-color: var(--necto-tiktok-bg, ${ze});
+  color: var(--necto-tiktok-text, ${_s});
+  border: none;
   font-weight: 500;
-  font-family: 'Roboto Medium', system-ui, -apple-system, sans-serif;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-tiktok-bg-hover, ${Os});
+  }
+
+  &:active {
+    background-color: var(--necto-tiktok-bg-active, ${Rs});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-tiktok-focus-shadow, ${Es});
+  }
+
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-tiktok-bg, ${ze});
+    }
+  `}
+`,Bt=(0,We.forwardRef)(({as:t,asChild:o,iconColor:r=null,children:s="Continue with TikTok",iconPosition:n="left",showIcon:i=!0,iconSize:e=20,disabled:a,className:l,...c},O)=>(0,x.jsx)(ys,{as:t,ref:O,asChild:o,showIcon:i,disabled:a,$disabled:a,className:(0,Ve.default)(`_necto:${qe}`,l),iconPosition:n,icon:r?(0,x.jsx)(Ze.FaTiktok,{size:e,color:r}):(0,x.jsx)(Ke,{size:e}),...c,children:s}));Bt.displayName=qe;var Qe=f(require("clsx"),1),je=require("react"),tr=f(require("@emotion/styled"),1);var or=require("react-icons/fa"),Ot=require("@emotion/react/jsx-runtime"),er="TwitchButton",Je="#9146ff",vs="#823ee6",Cs="#7337cc",hs="#ffffff",Ts="rgba(145, 70, 255, 0.3)",ws=(0,tr.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-twitch-bg, ${Je});
+  color: var(--necto-twitch-text, ${hs});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 
   &:hover {
-    background-color: var(--necto-google-bg-hover, ${Qt});
+    background-color: var(--necto-twitch-bg-hover, ${vs});
   }
 
   &:active {
-    background-color: var(--necto-google-bg-active, ${Yt});
+    background-color: var(--necto-twitch-bg-active, ${Cs});
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--necto-google-focus-shadow, ${te});
+    box-shadow: 0 0 0 3px var(--necto-twitch-focus-shadow, ${Ts});
   }
 
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
+    &:hover,
+    &:active {
+      background-color: var(--necto-twitch-bg, ${Je});
+    }
+  `}
+`,Rt=(0,je.forwardRef)(({as:t,asChild:o,children:r="Continue with Twitch",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,Ot.jsx)(ws,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,Qe.default)(`_necto:${er}`,a),iconPosition:s,icon:(0,Ot.jsx)(or.FaTwitch,{size:i}),...l,children:r}));Rt.displayName=er;var nr=f(require("clsx"),1),sr=require("react"),ir=f(require("@emotion/styled"),1);var ar=require("react-icons/fa6"),_t=require("@emotion/react/jsx-runtime"),cr="XButton",rr="#000000",Ls="#1a1a1a",xs="#333333",ks="#ffffff",$s="rgba(0, 0, 0, 0.3)",Ss=(0,ir.default)(p)`
+  padding: 0 12px 0 12px;
+  background-color: var(--necto-x-bg, ${rr});
+  color: var(--necto-x-text, ${ks});
+  border: none;
+  font-weight: 500;
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  &:hover {
+    background-color: var(--necto-x-bg-hover, ${Ls});
+  }
+
+  &:active {
+    background-color: var(--necto-x-bg-active, ${xs});
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--necto-x-focus-shadow, ${$s});
+  }
 
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: var(--necto-google-bg, ${Xo});
+      background-color: var(--necto-x-bg, ${rr});
     }
   `}
-`,N=(0,Zo.forwardRef)(({as:o,asChild:t,children:r="Continue with Google",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...p},c)=>(0,S.jsx)(ee,{as:o,ref:c,asChild:t,showIcon:n,disabled:e,$disabled:e,className:(0,Wo.default)(`_necto:${Qo}`,a),iconPosition:i,icon:(0,S.jsx)(Jo.FcGoogle,{size:s}),...p,children:r}));N.displayName=Qo;0&&(module.exports={AppleButton,AtlassianButton,BitbucketButton,DiscordButton,DropboxButton,Else,FacebookButton,GitHubButton,GitLabButton,GoogleButton,If,Primitive});
+`,Et=(0,sr.forwardRef)(({as:t,asChild:o,children:r="Continue with X",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...l},c)=>(0,_t.jsx)(Ss,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:(0,nr.default)(`_necto:${cr}`,a),iconPosition:s,icon:(0,_t.jsx)(ar.FaXTwitter,{size:i}),...l,children:r}));Et.displayName=cr;0&&(module.exports={AppleButton,AtlassianButton,BitbucketButton,DiscordButton,DropboxButton,Else,FacebookButton,GitHubButton,GitLabButton,GoogleButton,HubSpotButton,HuggingFaceButton,If,LinkedInButton,MetaMaskButton,MicrosoftButton,NotionButton,OKXButton,Primitive,SalesforceButton,SlackButton,SnapchatButton,SpotifyButton,TikTokButton,TwitchButton,XButton});
 //# sourceMappingURL=index.cjs.map