npm - @necto-react/components - Versions diffs - 1.2.11 → 1.2.13 - Mend

@necto-react/components 1.2.11 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -1,389 +1,265 @@
-"use strict";var zo=Object.create;var B=Object.defineProperty;var Uo=Object.getOwnPropertyDescriptor;var Ko=Object.getOwnPropertyNames;var Vo=Object.getPrototypeOf,Zo=Object.prototype.hasOwnProperty;var Xo=(o,t)=>{for(var r in t)B(o,r,{get:t[r],enumerable:!0})},S=(o,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Ko(t))!Zo.call(o,n)&&n!==r&&B(o,n,{get:()=>t[n],enumerable:!(i=Uo(t,n))||i.enumerable});return o};var f=(o,t,r)=>(r=o!=null?zo(Vo(o)):{},S(t||!o||!o.__esModule?B(r,"default",{value:o,enumerable:!0}):r,o)),qo=o=>S(B({},"__esModule",{value:!0}),o);var at={};Xo(at,{AppleButton:()=>P,AtlassianButton:()=>T,BitbucketButton:()=>F,DiscordButton:()=>L,DropboxButton:()=>H,Else:()=>E,FacebookButton:()=>M,GitHubButton:()=>$,GitLabButton:()=>_,GoogleButton:()=>I,If:()=>b,Primitive:()=>g});module.exports=qo(at);var U=require("@necto/constants"),K=require("@necto/dom"),d=require("react"),V=require("react/jsx-runtime"),Jo=K.HTMLElements.Div,z=({as:o,asChild:t,children:r,...i},n)=>{let s=o??Jo;if(t){let e=d.Children.only(r);return(0,d.isValidElement)(e)?(0,d.cloneElement)(e,{...i,ref:e.ref??n}):null}return(0,V.jsx)(s,{ref:n,...i,children:r})},g=Object.assign((0,d.forwardRef)(z),U.DOM.HTML_TAGS.reduce((o,t)=>{let r=t,i=t[0].toUpperCase()+t.slice(1),n=(0,d.forwardRef)((s,e)=>z({...s,as:t},e));return o[r]=n,o[i]=n,o},{}));var Z=require("react"),X=require("react/jsx-runtime"),E=o=>{let{children:t}=o;return(0,X.jsx)(Z.Fragment,{children:typeof t=="function"?t():t})};var h=require("react"),q=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,q.jsx)(h.Fragment,{children:h.Children.toArray(i).find(s=>s.type!==E!=!n)||null})};var Q=f(require("clsx"),1),W=require("react"),Y=f(require("@emotion/styled"),1),j=require("react-icons/fa");var J=require("@necto/dom");var w=require("react");var u=require("react/jsx-runtime"),Qo=J.HTMLElements.Button,c=(0,w.forwardRef)(function({as:t=Qo,asChild:r=!1,children:i,icon:n,showIcon:s=!0,iconPosition:e="left",disabled:a,className:l,...p},Io){let So=(t?.toLowerCase?.()??"")==="button"?{disabled:a}:{role:"button",tabIndex:a?-1:0,"aria-disabled":!!a,onKeyDown:x=>{a||(x.key==="Enter"||x.key===" ")&&(p.onClick?.(x),x.preventDefault())}},y=n?(0,u.jsx)("span",{className:"_necto:brand-icon",style:{flexShrink:0,lineHeight:0,display:"inline-flex"},children:n}):null;return(0,u.jsx)(g,{as:t,ref:Io,asChild:r,className:l,...So,...p,children:(0,u.jsxs)(w.Fragment,{children:[(0,u.jsx)(b,{condition:!!y&&s&&e==="left",children:y}),i,(0,u.jsx)(b,{condition:!!y&&s&&e==="right",children:y})]})})});var R=require("react/jsx-runtime"),oo="AppleButton",Wo=(0,Y.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+"use strict";var eo=Object.create;var R=Object.defineProperty;var ro=Object.getOwnPropertyDescriptor;var no=Object.getOwnPropertyNames;var so=Object.getPrototypeOf,io=Object.prototype.hasOwnProperty;var ao=(t,o)=>{for(var e in o)R(t,e,{get:o[e],enumerable:!0})},K=(t,o,e,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of no(o))!io.call(t,r)&&r!==e&&R(t,r,{get:()=>o[r],enumerable:!(s=ro(o,r))||s.enumerable});return t};var l=(t,o,e)=>(e=t!=null?eo(so(t)):{},K(o||!t||!t.__esModule?R(e,"default",{value:t,enumerable:!0}):e,t)),co=t=>K(R({},"__esModule",{value:!0}),t);var ie={};ao(ie,{AppleButton:()=>x,AtlassianButton:()=>A,BitbucketButton:()=>G,DiscordButton:()=>$,DropboxButton:()=>k,Else:()=>E,FacebookButton:()=>D,GitHubButton:()=>S,GitLabButton:()=>N,GoogleButton:()=>V,If:()=>g,Primitive:()=>y});module.exports=co(ie);var X=require("@necto/constants"),W=require("@necto/dom"),d=require("react"),Z=require("@emotion/react/jsx-runtime"),po=W.HTMLElements.Div,z=({as:t,asChild:o,children:e,...s},r)=>{let i=t??po;if(o){let n=d.Children.only(e);return(0,d.isValidElement)(n)?(0,d.cloneElement)(n,{...s,ref:n.ref??r}):null}return(0,Z.jsx)(i,{ref:r,...s,children:e})},y=Object.assign((0,d.forwardRef)(z),X.DOM.HTML_TAGS.reduce((t,o)=>{let e=o,s=o[0].toUpperCase()+o.slice(1),r=(0,d.forwardRef)((i,n)=>z({...i,as:o},n));return t[e]=r,t[s]=r,t},{}));var q=require("react"),J=require("@emotion/react/jsx-runtime"),E=t=>{let{children:o}=t;return(0,J.jsx)(q.Fragment,{children:typeof o=="function"?o():o})};var _=require("react"),Q=require("@emotion/react/jsx-runtime"),g=t=>{let{condition:o,keepAlive:e,children:s}=t;if(!s)return null;let r=!!(typeof o=="function"?o():o);return(0,Q.jsx)(_.Fragment,{children:_.Children.toArray(s).find(i=>i.type!==E!=!r)||null})};var tt=l(require("clsx"),1),ot=require("react"),et=l(require("@emotion/styled"),1),rt=require("react-icons/fa");var L=require("@emotion/react"),Y=require("@necto/dom");var v=require("react");var b=require("@emotion/react/jsx-runtime"),lo=Y.HTMLElements.Button,f=(0,v.forwardRef)(function({as:o=lo,asChild:e=!1,children:s,icon:r,showIcon:i=!0,iconPosition:n="left",disabled:a,className:p,...c},C){let jt=(o?.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())}},O=r?(0,b.jsx)("span",{className:"_necto:BrandIcon",css:L.css`
+        flex-shrink: 0;
+        line-height: 0;
+        display: inline-flex;
+      `,children:r}):null,to=L.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,b.jsx)(y,{as:o,ref:C,asChild:e,className:p,css:to,...jt,...(()=>{let{css:B,...oo}=c;return oo})(),children:(0,b.jsxs)(v.Fragment,{children:[(0,b.jsx)(g,{condition:!!O&&i&&n==="left",children:O}),s,(0,b.jsx)(g,{condition:!!O&&i&&n==="right",children:O})]})})});var T=require("@emotion/react/jsx-runtime"),nt="AppleButton",j="#000000",fo="#1a1a1a",mo="#333333",uo="#ffffff",bo="rgba(0, 0, 0, 0.3)",Bo=(0,et.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #000000;
-  color: #ffffff;
+  background-color: var(--necto-apple-bg, ${j});
+  color: var(--necto-apple-text, ${uo});
   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: #1a1a1a;
+    background-color: var(--necto-apple-bg-hover, ${fo});
   }
   &:active {
-    background-color: #333333;
+    background-color: var(--necto-apple-bg-active, ${mo});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-apple-focus-shadow, ${bo});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #000000;
+      background-color: var(--necto-apple-bg, ${j});
     }
   `}
-`,P=(0,W.forwardRef)(({as:o,asChild:t,children:r="Continue with Apple",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,R.jsx)(Wo,{as:o,ref:p,asChild:t,icon:(0,R.jsx)(j.FaApple,{size:s}),showIcon:n,disabled:e,$disabled:e,iconPosition:i,className:(0,Q.default)(a,`_necto:${oo}`),...l,children:r}));P.displayName=oo;var to=f(require("clsx"),1),eo=require("react"),ro=f(require("@emotion/styled"),1);var no=require("react-icons/fa"),k=require("react/jsx-runtime"),io="AtlassianButton",Yo=(0,ro.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,x=(0,ot.forwardRef)(({as:t,asChild:o,children:e="Continue with Apple",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,T.jsx)(Bo,{as:t,ref:c,asChild:o,icon:(0,T.jsx)(rt.FaApple,{size:i}),showIcon:r,disabled:n,$disabled:n,iconPosition:s,className:(0,tt.default)(`_necto:${nt}`,a),...p,children:e}));x.displayName=nt;var it=l(require("clsx"),1),at=require("react"),ct=l(require("@emotion/styled"),1);var pt=require("react-icons/fa"),h=require("@emotion/react/jsx-runtime"),lt="AtlassianButton",st="#0052cc",go="#0747a6",Oo="#003d99",Ro="#ffffff",yo="rgba(0, 82, 204, 0.3)",Eo=(0,ct.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #0052cc;
-  color: #ffffff;
+  background-color: var(--necto-atlassian-bg, ${st});
+  color: var(--necto-atlassian-text, ${Ro});
   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: #0747a6;
+    background-color: var(--necto-atlassian-bg-hover, ${go});
   }
   &:active {
-    background-color: #003d99;
+    background-color: var(--necto-atlassian-bg-active, ${Oo});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-atlassian-focus-shadow, ${yo});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #0052cc;
+      background-color: var(--necto-atlassian-bg, ${st});
     }
   `}
-`,T=(0,eo.forwardRef)(({as:o,asChild:t,children:r="Continue with Atlassian",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,k.jsx)(Yo,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,k.jsx)(no.FaAtlassian,{size:s}),className:(0,to.default)(a,`_necto:${io}`),...l,children:r}));T.displayName=io;var ao=f(require("clsx"),1),po=require("react"),lo=f(require("@emotion/styled"),1);var m=require("react/jsx-runtime"),so=({size:o})=>(0,m.jsxs)("svg",{width:o,height:o,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 v=require("react/jsx-runtime"),co="BitbucketButton",jo=(0,lo.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,A=(0,at.forwardRef)(({as:t,asChild:o,children:e="Continue with Atlassian",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,h.jsx)(Eo,{as:t,ref:c,asChild:o,showIcon:r,disabled:n,$disabled:n,iconPosition:s,icon:(0,h.jsx)(pt.FaAtlassian,{size:i}),className:(0,it.default)(`_necto:${lt}`,a),...p,children:e}));A.displayName=lt;var dt=l(require("clsx"),1),ut=require("react"),bt=l(require("@emotion/styled"),1);var m=require("@emotion/react/jsx-runtime"),ft=({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 w=require("@emotion/react/jsx-runtime"),Bt="BitbucketButton",mt="#0052cc",_o="#0747a6",vo="#003d99",Co="#ffffff",Lo="rgba(0, 82, 204, 0.3)",To=(0,bt.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #0052cc;
-  color: #ffffff;
+  background-color: var(--necto-bitbucket-bg, ${mt});
+  color: var(--necto-bitbucket-text, ${Co});
   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: #0747a6;
+    background-color: var(--necto-bitbucket-bg-hover, ${_o});
   }
   &:active {
-    background-color: #003d99;
+    background-color: var(--necto-bitbucket-bg-active, ${vo});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-bitbucket-focus-shadow, ${Lo});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #0052cc;
+      background-color: var(--necto-bitbucket-bg, ${mt});
     }
   `}
-`,F=(0,po.forwardRef)(({as:o,asChild:t,children:r="Continue with Bitbucket",iconPosition:i="left",showIcon:n=!0,iconSize:s=22,disabled:e,className:a,...l},p)=>(0,v.jsx)(jo,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,v.jsx)(so,{size:s}),className:(0,ao.default)(a,`_necto:${co}`),...l,children:r}));F.displayName=co;var fo=f(require("clsx"),1),mo=require("react"),uo=f(require("@emotion/styled"),1);var bo=require("react-icons/fa"),A=require("react/jsx-runtime"),yo="DiscordButton",ot=(0,uo.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,G=(0,ut.forwardRef)(({as:t,asChild:o,children:e="Continue with Bitbucket",iconPosition:s="left",showIcon:r=!0,iconSize:i=22,disabled:n,className:a,...p},c)=>(0,w.jsx)(To,{as:t,ref:c,asChild:o,showIcon:r,disabled:n,$disabled:n,iconPosition:s,icon:(0,w.jsx)(ft,{size:i}),className:(0,dt.default)(`_necto:${Bt}`,a),...p,children:e}));G.displayName=Bt;var Ot=l(require("clsx"),1),Rt=require("react"),yt=l(require("@emotion/styled"),1);var Et=require("react-icons/fa"),P=require("@emotion/react/jsx-runtime"),_t="DiscordButton",gt="#5865f2",xo="#4752d9",ho="#3c45c0",Ao="#ffffff",wo="rgba(88, 101, 242, 0.3)",Go=(0,yt.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #5865f2;
-  color: #ffffff;
+  background-color: var(--necto-discord-bg, ${gt});
+  color: var(--necto-discord-text, ${Ao});
   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: #4752d9;
+    background-color: var(--necto-discord-bg-hover, ${xo});
   }
   &:active {
-    background-color: #3c45c0;
+    background-color: var(--necto-discord-bg-active, ${ho});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-discord-focus-shadow, ${wo});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #5865f2;
+      background-color: var(--necto-discord-bg, ${gt});
     }
   `}
-`,L=(0,mo.forwardRef)(({as:o,asChild:t,children:r="Continue with Discord",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,A.jsx)(ot,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,A.jsx)(bo.FaDiscord,{size:s}),className:(0,fo.default)(a,`_necto:${yo}`),...l,children:r}));L.displayName=yo;var xo=f(require("clsx"),1),Bo=require("react"),go=f(require("@emotion/styled"),1);var Eo=require("react-icons/fa"),C=require("react/jsx-runtime"),ho="DropboxButton",tt=(0,go.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,$=(0,Rt.forwardRef)(({as:t,asChild:o,children:e="Continue with Discord",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,P.jsx)(Go,{as:t,ref:c,asChild:o,showIcon:r,disabled:n,$disabled:n,iconPosition:s,icon:(0,P.jsx)(Et.FaDiscord,{size:i}),className:(0,Ot.default)(`_necto:${_t}`,a),...p,children:e}));$.displayName=_t;var Ct=l(require("clsx"),1),Lt=require("react"),Tt=l(require("@emotion/styled"),1);var xt=require("react-icons/fa"),F=require("@emotion/react/jsx-runtime"),ht="DropboxButton",vt="#0061ff",Po="#0056e0",$o="#004bc5",Fo="#ffffff",ko="rgba(0, 97, 255, 0.3)",Ho=(0,Tt.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #0061ff;
-  color: #ffffff;
+  background-color: var(--necto-dropbox-bg, ${vt});
+  color: var(--necto-dropbox-text, ${Fo});
   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: #0056e0;
+    background-color: var(--necto-dropbox-bg-hover, ${Po});
   }
   &:active {
-    background-color: #004bc5;
+    background-color: var(--necto-dropbox-bg-active, ${$o});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-dropbox-focus-shadow, ${ko});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #0061ff;
+      background-color: var(--necto-dropbox-bg, ${vt});
     }
   `}
-`,H=(0,Bo.forwardRef)(({as:o,asChild:t,children:r="Continue with Dropbox",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,C.jsx)(tt,{as:o,ref:p,asChild:t,icon:(0,C.jsx)(Eo.FaDropbox,{size:s}),showIcon:n,disabled:e,$disabled:e,iconPosition:i,className:(0,xo.default)(a,`_necto:${ho}`),...l,children:r}));H.displayName=ho;var wo=f(require("clsx"),1),Ro=require("react"),Po=f(require("@emotion/styled"),1);var ko=require("react-icons/fa6"),G=require("react/jsx-runtime"),To="FacebookButton",et=(0,Po.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,k=(0,Lt.forwardRef)(({as:t,asChild:o,children:e="Continue with Dropbox",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,F.jsx)(Ho,{as:t,ref:c,asChild:o,icon:(0,F.jsx)(xt.FaDropbox,{size:i}),showIcon:r,disabled:n,$disabled:n,iconPosition:s,className:(0,Ct.default)(`_necto:${ht}`,a),...p,children:e}));k.displayName=ht;var wt=l(require("clsx"),1),Gt=require("react"),Pt=l(require("@emotion/styled"),1);var $t=require("react-icons/fa6"),H=require("@emotion/react/jsx-runtime"),Ft="FacebookButton",At="#1877f2",Do="#166fe5",Io="#1467d6",So="#ffffff",Mo="#1877f2",No="rgba(24, 119, 242, 0.3)",Uo=(0,Pt.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #1877f2;
-  color: #ffffff;
-  border: 1px solid #1877f2;
-  border-radius: 8px;
-  font-size: 14px;
+  background-color: var(--necto-facebook-bg, ${At});
+  color: var(--necto-facebook-text, ${So});
+  border: 1px solid var(--necto-facebook-border, ${Mo});
   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: #166fe5;
+    background-color: var(--necto-facebook-bg-hover, ${Do});
   }
   &:active {
-    background-color: #1467d6;
+    background-color: var(--necto-facebook-bg-active, ${Io});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-facebook-focus-shadow, ${No});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #1877f2;
+      background-color: var(--necto-facebook-bg, ${At});
     }
   `}
-`,M=(0,Ro.forwardRef)(({as:o,asChild:t,children:r="Continue with Facebook",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,G.jsx)(et,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,G.jsx)(ko.FaFacebook,{size:s}),className:(0,wo.default)(a,`_necto:${To}`),...l,children:r}));M.displayName=To;var vo=f(require("clsx"),1),Fo=require("react"),Ao=f(require("@emotion/styled"),1);var Lo=require("react-icons/fa"),N=require("react/jsx-runtime"),Co="GitHubButton",rt=(0,Ao.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,D=(0,Gt.forwardRef)(({as:t,asChild:o,children:e="Continue with Facebook",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,H.jsx)(Uo,{as:t,ref:c,asChild:o,showIcon:r,disabled:n,$disabled:n,iconPosition:s,icon:(0,H.jsx)($t.FaFacebook,{size:i}),className:(0,wt.default)(`_necto:${Ft}`,a),...p,children:e}));D.displayName=Ft;var Ht=l(require("clsx"),1),Dt=require("react"),It=l(require("@emotion/styled"),1);var St=require("react-icons/fa"),I=require("@emotion/react/jsx-runtime"),Mt="GitHubButton",kt="#24292f",Vo="#2c3237",Ko="#373e47",zo="#ffffff",Xo="#24292f",Wo="rgba(36, 41, 47, 0.3)",Zo=(0,It.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #24292f;
-  color: #ffffff;
-  border: 1px solid #24292f;
-  border-radius: 8px;
-  font-size: 14px;
+  background-color: var(--necto-github-bg, ${kt});
+  color: var(--necto-github-text, ${zo});
+  border: 1px solid var(--necto-github-border, ${Xo});
   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: #2c3237;
+    background-color: var(--necto-github-bg-hover, ${Vo});
   }
   &:active {
-    background-color: #373e47;
+    background-color: var(--necto-github-bg-active, ${Ko});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(36, 41, 47, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-github-focus-shadow, ${Wo});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #24292f;
+      background-color: var(--necto-github-bg, ${kt});
     }
   `}
-`,$=(0,Fo.forwardRef)(({as:o,asChild:t,children:r="Continue with GitHub",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,N.jsx)(rt,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,N.jsx)(Lo.FaGithub,{size:s}),className:(0,vo.default)(a,`_necto:${Co}`),...l,children:r}));$.displayName=Co;var Ho=f(require("clsx"),1),Go=require("react"),Mo=f(require("@emotion/styled"),1);var No=require("react-icons/fa6"),D=require("react/jsx-runtime"),$o="GitLabButton",nt=(0,Mo.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,S=(0,Dt.forwardRef)(({as:t,asChild:o,children:e="Continue with GitHub",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,I.jsx)(Zo,{as:t,ref:c,asChild:o,showIcon:r,disabled:n,$disabled:n,iconPosition:s,icon:(0,I.jsx)(St.FaGithub,{size:i}),className:(0,Ht.default)(`_necto:${Mt}`,a),...p,children:e}));S.displayName=Mt;var Vt=l(require("clsx"),1),Kt=require("react"),zt=l(require("@emotion/styled"),1);var u=require("@emotion/react/jsx-runtime"),Nt=({size:t,color:o})=>{let e=o==null;return(0,u.jsxs)("svg",{width:t,height:t,viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:[(0,u.jsx)("title",{children:"GitLab Icon"}),(0,u.jsx)("path",{fill:e?"#E24329":o,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,u.jsx)("path",{fill:e?"#FC6D26":o,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,u.jsx)("path",{fill:e?"#FCA326":o,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,u.jsx)("path",{fill:e?"#FC6D26":o,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 M=require("@emotion/react/jsx-runtime"),Xt="GitLabButton",Ut="#fc6d26",qo="#e24329",Jo="#c73b1c",Qo="#ffffff",Yo="rgba(252, 109, 38, 0.3)",jo=(0,zt.default)(f)`
   padding: 0 18px;
-  min-height: 40px;
-  background-color: #fc6d26;
-  color: #ffffff;
+  background-color: var(--necto-gitlab-bg, ${Ut});
+  color: var(--necto-gitlab-text, ${Qo});
   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: #e24329;
+    background-color: var(--necto-gitlab-bg-hover, ${qo});
   }
   &:active {
-    background-color: #c73b1c;
+    background-color: var(--necto-gitlab-bg-active, ${Jo});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(252, 109, 38, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-gitlab-focus-shadow, ${Yo});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #fc6d26;
+      background-color: var(--necto-gitlab-bg, ${Ut});
     }
   `}
-`,_=(0,Go.forwardRef)(({as:o,asChild:t,children:r="Continue with GitLab",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,D.jsx)(nt,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,iconPosition:i,icon:(0,D.jsx)(No.FaGitlab,{size:s}),className:(0,Ho.default)(a,`_necto:${$o}`),...l,children:r}));_.displayName=$o;var Do=require("react"),_o=f(require("@emotion/styled"),1);var Oo=require("react-icons/fc"),O=require("react/jsx-runtime"),it="GoogleButton",st=(0,_o.default)(c)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+`,N=(0,Kt.forwardRef)(({as:t,asChild:o,iconColor:e="#fff",children:s="Continue with GitLab",iconPosition:r="left",showIcon:i=!0,iconSize:n=20,disabled:a,className:p,...c},C)=>(0,M.jsx)(jo,{as:t,ref:C,asChild:o,showIcon:i,disabled:a,$disabled:a,iconPosition:r,icon:(0,M.jsx)(Nt,{size:n,color:e}),className:(0,Vt.default)(`_necto:${Xt}`,p),...c,children:s}));N.displayName=Xt;var Zt=l(require("clsx"),1),qt=require("react"),Jt=l(require("@emotion/styled"),1);var Qt=require("react-icons/fc"),U=require("@emotion/react/jsx-runtime"),Yt="GoogleButton",Wt="#ffffff",te="#f8f9fa",oe="#eceff1",ee="#1f1f1f",re="#747775",ne="rgba(66, 133, 244, 0.3)",se=(0,Jt.default)(f)`
   padding: 0 12px 0 12px;
-  min-height: 40px;
-  background-color: #ffffff;
-  color: #1f1f1f;
-  border: 1px solid #747775;
-  border-radius: 8px;
-  font-size: 14px;
+  height: 40px;
+  background-color: var(--necto-google-bg, ${Wt});
+  color: var(--necto-google-text, ${ee});
+  border: 1px solid var(--necto-google-border, ${re});
   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;
   &:hover {
-    background-color: #f8f9fa;
+    background-color: var(--necto-google-bg-hover, ${te});
   }
   &:active {
-    background-color: #eceff1;
+    background-color: var(--necto-google-bg-active, ${oe});
   }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
+    box-shadow: 0 0 0 3px var(--necto-google-focus-shadow, ${ne});
   }
-  ${o=>o.$disabled&&`
-    opacity: 0.7;
-    cursor: not-allowed;
-    pointer-events: none;
+  ${t=>t.$disabled&&`
     &:hover,
     &:active {
-      background-color: #ffffff;
+      background-color: var(--necto-google-bg, ${Wt});
     }
   `}
-`,I=(0,Do.forwardRef)(({as:o,asChild:t,children:r="Continue with Google",iconPosition:i="left",showIcon:n=!0,iconSize:s=20,disabled:e,className:a,...l},p)=>(0,O.jsx)(st,{as:o,ref:p,asChild:t,showIcon:n,disabled:e,$disabled:e,className:a,iconPosition:i,icon:(0,O.jsx)(Oo.FcGoogle,{size:s}),...l,children:r}));I.displayName=it;0&&(module.exports={AppleButton,AtlassianButton,BitbucketButton,DiscordButton,DropboxButton,Else,FacebookButton,GitHubButton,GitLabButton,GoogleButton,If,Primitive});
+`,V=(0,qt.forwardRef)(({as:t,asChild:o,children:e="Continue with Google",iconPosition:s="left",showIcon:r=!0,iconSize:i=20,disabled:n,className:a,...p},c)=>(0,U.jsx)(se,{as:t,ref:c,asChild:o,showIcon:r,disabled:n,$disabled:n,className:(0,Zt.default)(`_necto:${Yt}`,a),iconPosition:s,icon:(0,U.jsx)(Qt.FcGoogle,{size:i}),...p,children:e}));V.displayName=Yt;0&&(module.exports={AppleButton,AtlassianButton,BitbucketButton,DiscordButton,DropboxButton,Else,FacebookButton,GitHubButton,GitLabButton,GoogleButton,If,Primitive});
 //# sourceMappingURL=index.cjs.map