@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
  1. package/dist/index.cjs +105 -229
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +13 -9
  4. package/dist/index.d.ts +13 -9
  5. package/dist/index.js +105 -229
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,389 +1,265 @@
1
- import{DOM as Q}from"@necto/constants";import{HTMLElements as W}from"@necto/dom";import{forwardRef as B,isValidElement as Y,cloneElement as j,Children as oo}from"react";import{jsx as eo}from"react/jsx-runtime";var to=W.Div,g=({as:o,asChild:t,children:s,...n},r)=>{let i=o??to;if(t){let e=oo.only(s);return Y(e)?j(e,{...n,ref:e.ref??r}):null}return eo(i,{ref:r,...n,children:s})},y=Object.assign(B(g),Q.HTML_TAGS.reduce((o,t)=>{let s=t,n=t[0].toUpperCase()+t.slice(1),r=B((i,e)=>g({...i,as:t},e));return o[s]=r,o[n]=r,o},{}));import{Fragment as ro}from"react";import{jsx as no}from"react/jsx-runtime";var x=o=>{let{children:t}=o;return no(ro,{children:typeof t=="function"?t():t})};import{Fragment as io,Children as so}from"react";import{jsx as ao}from"react/jsx-runtime";var u=o=>{let{condition:t,keepAlive:s,children:n}=o;if(!n)return null;let r=!!(typeof t=="function"?t():t);return ao(io,{children:so.toArray(n).find(i=>i.type!==x!=!r)||null})};import uo from"clsx";import{forwardRef as bo}from"react";import yo from"@emotion/styled";import{FaApple as xo}from"react-icons/fa";import{HTMLElements as po}from"@necto/dom";import{forwardRef as lo,Fragment as co}from"react";import{jsx as b,jsxs as mo}from"react/jsx-runtime";var fo=po.Button,c=lo(function({as:t=fo,asChild:s=!1,children:n,icon:r,showIcon:i=!0,iconPosition:e="left",disabled:a,className:l,...p},q){let J=(t?.toLowerCase?.()??"")==="button"?{disabled:a}:{role:"button",tabIndex:a?-1:0,"aria-disabled":!!a,onKeyDown:d=>{a||(d.key==="Enter"||d.key===" ")&&(p.onClick?.(d),d.preventDefault())}},m=r?b("span",{className:"_necto:brand-icon",style:{flexShrink:0,lineHeight:0,display:"inline-flex"},children:r}):null;return b(y,{as:t,ref:q,asChild:s,className:l,...J,...p,children:mo(co,{children:[b(u,{condition:!!m&&i&&e==="left",children:m}),n,b(u,{condition:!!m&&i&&e==="right",children:m})]})})});import{jsx as E}from"react/jsx-runtime";var h="AppleButton",Bo=yo(c)`
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- gap: 10px;
1
+ import{DOM as ft}from"@necto/constants";import{HTMLElements as mt}from"@necto/dom";import{forwardRef as y,isValidElement as dt,cloneElement as ut,Children as bt}from"react";import{jsx as gt}from"@emotion/react/jsx-runtime";var Bt=mt.Div,E=({as:t,asChild:o,children:r,...s},n)=>{let i=t??Bt;if(o){let e=bt.only(r);return dt(e)?ut(e,{...s,ref:e.ref??n}):null}return gt(i,{ref:n,...s,children:r})},O=Object.assign(y(E),ft.HTML_TAGS.reduce((t,o)=>{let r=o,s=o[0].toUpperCase()+o.slice(1),n=y((i,e)=>E({...i,as:o},e));return t[r]=n,t[s]=n,t},{}));import{Fragment as Ot}from"react";import{jsx as Rt}from"@emotion/react/jsx-runtime";var R=t=>{let{children:o}=t;return Rt(Ot,{children:typeof o=="function"?o():o})};import{Fragment as yt,Children as Et}from"react";import{jsx as _t}from"@emotion/react/jsx-runtime";var b=t=>{let{condition:o,keepAlive:r,children:s}=t;if(!s)return null;let n=!!(typeof o=="function"?o():o);return _t(yt,{children:Et.toArray(s).find(i=>i.type!==R!=!n)||null})};import ht from"clsx";import{forwardRef as At}from"react";import wt from"@emotion/styled";import{FaApple as Gt}from"react-icons/fa";import{css as _}from"@emotion/react";import{HTMLElements as vt}from"@necto/dom";import{forwardRef as Ct,Fragment as Lt}from"react";import{jsx as B,jsxs as xt}from"@emotion/react/jsx-runtime";var Tt=vt.Button,l=Ct(function({as:o=Tt,asChild:r=!1,children:s,icon:n,showIcon:i=!0,iconPosition:e="left",disabled:a,className:p,...c},g){let ct=(o?.toLowerCase?.()??"")==="button"?{disabled:a}:{role:"button",tabIndex:a?-1:0,"aria-disabled":!!a,onKeyDown:m=>{a||(m.key==="Enter"||m.key===" ")&&(c.onClick?.(m),m.preventDefault())}},u=n?B("span",{className:"_necto:BrandIcon",css:_`
2
+ flex-shrink: 0;
3
+ line-height: 0;
4
+ display: inline-flex;
5
+ `,children:n}):null,pt=_`
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ gap: 10px;
10
+ min-height: 40px;
11
+ width: 100%;
12
+ border-radius: 8px;
13
+ font-size: 14px;
14
+ line-height: 20px;
15
+ cursor: pointer;
16
+ user-select: none;
17
+ text-decoration: none;
18
+ transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
19
+
20
+ &:focus-visible {
21
+ outline: none;
22
+ }
23
+
24
+ ${a&&`
25
+ opacity: 0.7;
26
+ cursor: not-allowed;
27
+ pointer-events: none;
28
+ `}
29
+ `;return B(O,{as:o,ref:g,asChild:r,className:p,css:pt,...ct,...(()=>{let{css:m,...lt}=c;return lt})(),children:xt(Lt,{children:[B(b,{condition:!!u&&i&&e==="left",children:u}),s,B(b,{condition:!!u&&i&&e==="right",children:u})]})})});import{jsx as C}from"@emotion/react/jsx-runtime";var L="AppleButton",v="#000000",Pt="#1a1a1a",$t="#333333",Ft="#ffffff",kt="rgba(0, 0, 0, 0.3)",Ht=wt(l)`
6
30
  padding: 0 18px;
7
- min-height: 40px;
8
- background-color: #000000;
9
- color: #ffffff;
31
+ background-color: var(--necto-apple-bg, ${v});
32
+ color: var(--necto-apple-text, ${Ft});
10
33
  border: none;
11
- border-radius: 8px;
12
- font-size: 14px;
13
34
  font-weight: 400;
14
35
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
15
- line-height: 20px;
16
- cursor: pointer;
17
- user-select: none;
18
- text-decoration: none;
19
- transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
20
36
 
21
37
  &:hover {
22
- background-color: #1a1a1a;
38
+ background-color: var(--necto-apple-bg-hover, ${Pt});
23
39
  }
24
40
 
25
41
  &:active {
26
- background-color: #333333;
42
+ background-color: var(--necto-apple-bg-active, ${$t});
27
43
  }
28
44
 
29
45
  &:focus-visible {
30
- outline: none;
31
- box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
46
+ box-shadow: 0 0 0 3px var(--necto-apple-focus-shadow, ${kt});
32
47
  }
33
48
 
34
- ${o=>o.$disabled&&`
35
- opacity: 0.7;
36
- cursor: not-allowed;
37
- pointer-events: none;
38
-
49
+ ${t=>t.$disabled&&`
39
50
  &:hover,
40
51
  &:active {
41
- background-color: #000000;
52
+ background-color: var(--necto-apple-bg, ${v});
42
53
  }
43
54
  `}
44
- `,w=bo(({as:o,asChild:t,children:s="Continue with Apple",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>E(Bo,{as:o,ref:p,asChild:t,icon:E(xo,{size:i}),showIcon:r,disabled:e,$disabled:e,iconPosition:n,className:uo(a,`_necto:${h}`),...l,children:s}));w.displayName=h;import go from"clsx";import{forwardRef as Eo}from"react";import ho from"@emotion/styled";import{FaAtlassian as wo}from"react-icons/fa";import{jsx as R}from"react/jsx-runtime";var P="AtlassianButton",Ro=ho(c)`
45
- display: inline-flex;
46
- align-items: center;
47
- justify-content: center;
48
- gap: 10px;
55
+ `,T=At(({as:t,asChild:o,children:r="Continue with Apple",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>C(Ht,{as:t,ref:c,asChild:o,icon:C(Gt,{size:i}),showIcon:n,disabled:e,$disabled:e,iconPosition:s,className:ht(`_necto:${L}`,a),...p,children:r}));T.displayName=L;import Dt from"clsx";import{forwardRef as It}from"react";import St from"@emotion/styled";import{FaAtlassian as Mt}from"react-icons/fa";import{jsx as h}from"@emotion/react/jsx-runtime";var A="AtlassianButton",x="#0052cc",Nt="#0747a6",Ut="#003d99",Vt="#ffffff",Kt="rgba(0, 82, 204, 0.3)",zt=St(l)`
49
56
  padding: 0 18px;
50
- min-height: 40px;
51
- background-color: #0052cc;
52
- color: #ffffff;
57
+ background-color: var(--necto-atlassian-bg, ${x});
58
+ color: var(--necto-atlassian-text, ${Vt});
53
59
  border: none;
54
- border-radius: 8px;
55
- font-size: 14px;
56
60
  font-weight: 500;
57
61
  font-family: system-ui, -apple-system, sans-serif;
58
- line-height: 20px;
59
- cursor: pointer;
60
- user-select: none;
61
- text-decoration: none;
62
- transition: background-color 0.2s, box-shadow 0.2s;
63
62
 
64
63
  &:hover {
65
- background-color: #0747a6;
64
+ background-color: var(--necto-atlassian-bg-hover, ${Nt});
66
65
  }
67
66
 
68
67
  &:active {
69
- background-color: #003d99;
68
+ background-color: var(--necto-atlassian-bg-active, ${Ut});
70
69
  }
71
70
 
72
71
  &:focus-visible {
73
- outline: none;
74
- box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
72
+ box-shadow: 0 0 0 3px var(--necto-atlassian-focus-shadow, ${Kt});
75
73
  }
76
74
 
77
- ${o=>o.$disabled&&`
78
- opacity: 0.7;
79
- cursor: not-allowed;
80
- pointer-events: none;
81
-
75
+ ${t=>t.$disabled&&`
82
76
  &:hover,
83
77
  &:active {
84
- background-color: #0052cc;
78
+ background-color: var(--necto-atlassian-bg, ${x});
85
79
  }
86
80
  `}
87
- `,k=Eo(({as:o,asChild:t,children:s="Continue with Atlassian",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>R(Ro,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,iconPosition:n,icon:R(wo,{size:i}),className:go(a,`_necto:${P}`),...l,children:s}));k.displayName=P;import Po from"clsx";import{forwardRef as ko}from"react";import To from"@emotion/styled";import{jsx as f,jsxs as T}from"react/jsx-runtime";var v=({size:o})=>T("svg",{width:o,height:o,viewBox:"0 0 72 72",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[f("title",{children:"Bitbucket"}),f("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)"}),f("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}}),f("defs",{children:T("linearGradient",{id:"paint0_linear_5907_10188",x1:"60.8078",y1:"35.1603",x2:"37.2868",y2:"51.0791",gradientUnits:"userSpaceOnUse",children:[f("stop",{offset:"0.0718327","stop-color":"white","stop-opacity":"0.4",style:{stopColor:"white",stopOpacity:.4}}),f("stop",{offset:"1","stop-color":"white",style:{stopColor:"white",stopOpacity:1}})]})})]});import{jsx as F}from"react/jsx-runtime";var A="BitbucketButton",vo=To(c)`
88
- display: inline-flex;
89
- align-items: center;
90
- justify-content: center;
91
- gap: 10px;
81
+ `,w=It(({as:t,asChild:o,children:r="Continue with Atlassian",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>h(zt,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:h(Mt,{size:i}),className:Dt(`_necto:${A}`,a),...p,children:r}));w.displayName=A;import Xt from"clsx";import{forwardRef as Wt}from"react";import Zt from"@emotion/styled";import{jsx as f,jsxs as G}from"@emotion/react/jsx-runtime";var P=({size:t})=>G("svg",{width:t,height:t,viewBox:"0 0 72 72",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[f("title",{children:"Bitbucket"}),f("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)"}),f("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}}),f("defs",{children:G("linearGradient",{id:"paint0_linear_5907_10188",x1:"60.8078",y1:"35.1603",x2:"37.2868",y2:"51.0791",gradientUnits:"userSpaceOnUse",children:[f("stop",{offset:"0.0718327","stop-color":"white","stop-opacity":"0.4",style:{stopColor:"white",stopOpacity:.4}}),f("stop",{offset:"1","stop-color":"white",style:{stopColor:"white",stopOpacity:1}})]})})]});import{jsx as F}from"@emotion/react/jsx-runtime";var k="BitbucketButton",$="#0052cc",qt="#0747a6",Jt="#003d99",Qt="#ffffff",Yt="rgba(0, 82, 204, 0.3)",jt=Zt(l)`
92
82
  padding: 0 18px;
93
- min-height: 40px;
94
- background-color: #0052cc;
95
- color: #ffffff;
83
+ background-color: var(--necto-bitbucket-bg, ${$});
84
+ color: var(--necto-bitbucket-text, ${Qt});
96
85
  border: none;
97
- border-radius: 8px;
98
- font-size: 14px;
99
86
  font-weight: 500;
100
87
  font-family: system-ui, -apple-system, sans-serif;
101
- line-height: 20px;
102
- cursor: pointer;
103
- user-select: none;
104
- text-decoration: none;
105
- transition: background-color 0.2s, box-shadow 0.2s;
106
88
 
107
89
  &:hover {
108
- background-color: #0747a6;
90
+ background-color: var(--necto-bitbucket-bg-hover, ${qt});
109
91
  }
110
92
 
111
93
  &:active {
112
- background-color: #003d99;
94
+ background-color: var(--necto-bitbucket-bg-active, ${Jt});
113
95
  }
114
96
 
115
97
  &:focus-visible {
116
- outline: none;
117
- box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
98
+ box-shadow: 0 0 0 3px var(--necto-bitbucket-focus-shadow, ${Yt});
118
99
  }
119
100
 
120
- ${o=>o.$disabled&&`
121
- opacity: 0.7;
122
- cursor: not-allowed;
123
- pointer-events: none;
124
-
101
+ ${t=>t.$disabled&&`
125
102
  &:hover,
126
103
  &:active {
127
- background-color: #0052cc;
104
+ background-color: var(--necto-bitbucket-bg, ${$});
128
105
  }
129
106
  `}
130
- `,L=ko(({as:o,asChild:t,children:s="Continue with Bitbucket",iconPosition:n="left",showIcon:r=!0,iconSize:i=22,disabled:e,className:a,...l},p)=>F(vo,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,iconPosition:n,icon:F(v,{size:i}),className:Po(a,`_necto:${A}`),...l,children:s}));L.displayName=A;import Fo from"clsx";import{forwardRef as Ao}from"react";import Lo from"@emotion/styled";import{FaDiscord as Co}from"react-icons/fa";import{jsx as C}from"react/jsx-runtime";var H="DiscordButton",Ho=Lo(c)`
131
- display: inline-flex;
132
- align-items: center;
133
- justify-content: center;
134
- gap: 10px;
107
+ `,H=Wt(({as:t,asChild:o,children:r="Continue with Bitbucket",iconPosition:s="left",showIcon:n=!0,iconSize:i=22,disabled:e,className:a,...p},c)=>F(jt,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:F(P,{size:i}),className:Xt(`_necto:${k}`,a),...p,children:r}));H.displayName=k;import to from"clsx";import{forwardRef as oo}from"react";import eo from"@emotion/styled";import{FaDiscord as ro}from"react-icons/fa";import{jsx as I}from"@emotion/react/jsx-runtime";var S="DiscordButton",D="#5865f2",no="#4752d9",so="#3c45c0",io="#ffffff",ao="rgba(88, 101, 242, 0.3)",co=eo(l)`
135
108
  padding: 0 18px;
136
- min-height: 40px;
137
- background-color: #5865f2;
138
- color: #ffffff;
109
+ background-color: var(--necto-discord-bg, ${D});
110
+ color: var(--necto-discord-text, ${io});
139
111
  border: none;
140
- border-radius: 8px;
141
- font-size: 14px;
142
112
  font-weight: 500;
143
113
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
144
- line-height: 20px;
145
- cursor: pointer;
146
- user-select: none;
147
- text-decoration: none;
148
- transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
149
114
 
150
115
  &:hover {
151
- background-color: #4752d9;
116
+ background-color: var(--necto-discord-bg-hover, ${no});
152
117
  }
153
118
 
154
119
  &:active {
155
- background-color: #3c45c0;
120
+ background-color: var(--necto-discord-bg-active, ${so});
156
121
  }
157
122
 
158
123
  &:focus-visible {
159
- outline: none;
160
- box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.3);
124
+ box-shadow: 0 0 0 3px var(--necto-discord-focus-shadow, ${ao});
161
125
  }
162
126
 
163
- ${o=>o.$disabled&&`
164
- opacity: 0.7;
165
- cursor: not-allowed;
166
- pointer-events: none;
167
-
127
+ ${t=>t.$disabled&&`
168
128
  &:hover,
169
129
  &:active {
170
- background-color: #5865f2;
130
+ background-color: var(--necto-discord-bg, ${D});
171
131
  }
172
132
  `}
173
- `,G=Ao(({as:o,asChild:t,children:s="Continue with Discord",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>C(Ho,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,iconPosition:n,icon:C(Co,{size:i}),className:Fo(a,`_necto:${H}`),...l,children:s}));G.displayName=H;import Go from"clsx";import{forwardRef as Mo}from"react";import No from"@emotion/styled";import{FaDropbox as $o}from"react-icons/fa";import{jsx as M}from"react/jsx-runtime";var N="DropboxButton",Do=No(c)`
174
- display: inline-flex;
175
- align-items: center;
176
- justify-content: center;
177
- gap: 10px;
133
+ `,M=oo(({as:t,asChild:o,children:r="Continue with Discord",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>I(co,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:I(ro,{size:i}),className:to(`_necto:${S}`,a),...p,children:r}));M.displayName=S;import po from"clsx";import{forwardRef as lo}from"react";import fo from"@emotion/styled";import{FaDropbox as mo}from"react-icons/fa";import{jsx as U}from"@emotion/react/jsx-runtime";var V="DropboxButton",N="#0061ff",uo="#0056e0",bo="#004bc5",Bo="#ffffff",go="rgba(0, 97, 255, 0.3)",Oo=fo(l)`
178
134
  padding: 0 18px;
179
- min-height: 40px;
180
- background-color: #0061ff;
181
- color: #ffffff;
135
+ background-color: var(--necto-dropbox-bg, ${N});
136
+ color: var(--necto-dropbox-text, ${Bo});
182
137
  border: none;
183
- border-radius: 8px;
184
- font-size: 14px;
185
138
  font-weight: 500;
186
139
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
187
- line-height: 20px;
188
- cursor: pointer;
189
- user-select: none;
190
- text-decoration: none;
191
- transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
192
140
 
193
141
  &:hover {
194
- background-color: #0056e0;
142
+ background-color: var(--necto-dropbox-bg-hover, ${uo});
195
143
  }
196
144
 
197
145
  &:active {
198
- background-color: #004bc5;
146
+ background-color: var(--necto-dropbox-bg-active, ${bo});
199
147
  }
200
148
 
201
149
  &:focus-visible {
202
- outline: none;
203
- box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.3);
150
+ box-shadow: 0 0 0 3px var(--necto-dropbox-focus-shadow, ${go});
204
151
  }
205
152
 
206
- ${o=>o.$disabled&&`
207
- opacity: 0.7;
208
- cursor: not-allowed;
209
- pointer-events: none;
210
-
153
+ ${t=>t.$disabled&&`
211
154
  &:hover,
212
155
  &:active {
213
- background-color: #0061ff;
156
+ background-color: var(--necto-dropbox-bg, ${N});
214
157
  }
215
158
  `}
216
- `,$=Mo(({as:o,asChild:t,children:s="Continue with Dropbox",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>M(Do,{as:o,ref:p,asChild:t,icon:M($o,{size:i}),showIcon:r,disabled:e,$disabled:e,iconPosition:n,className:Go(a,`_necto:${N}`),...l,children:s}));$.displayName=N;import _o from"clsx";import{forwardRef as Oo}from"react";import Io from"@emotion/styled";import{FaFacebook as So}from"react-icons/fa6";import{jsx as D}from"react/jsx-runtime";var _="FacebookButton",zo=Io(c)`
217
- display: inline-flex;
218
- align-items: center;
219
- justify-content: center;
220
- gap: 10px;
159
+ `,K=lo(({as:t,asChild:o,children:r="Continue with Dropbox",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>U(Oo,{as:t,ref:c,asChild:o,icon:U(mo,{size:i}),showIcon:n,disabled:e,$disabled:e,iconPosition:s,className:po(`_necto:${V}`,a),...p,children:r}));K.displayName=V;import Ro from"clsx";import{forwardRef as yo}from"react";import Eo from"@emotion/styled";import{FaFacebook as _o}from"react-icons/fa6";import{jsx as X}from"@emotion/react/jsx-runtime";var W="FacebookButton",z="#1877f2",vo="#166fe5",Co="#1467d6",Lo="#ffffff",To="#1877f2",xo="rgba(24, 119, 242, 0.3)",ho=Eo(l)`
221
160
  padding: 0 18px;
222
- min-height: 40px;
223
- background-color: #1877f2;
224
- color: #ffffff;
225
- border: 1px solid #1877f2;
226
- border-radius: 8px;
227
- font-size: 14px;
161
+ background-color: var(--necto-facebook-bg, ${z});
162
+ color: var(--necto-facebook-text, ${Lo});
163
+ border: 1px solid var(--necto-facebook-border, ${To});
228
164
  font-weight: 500;
229
165
  font-family: system-ui, -apple-system, sans-serif;
230
- line-height: 20px;
231
- cursor: pointer;
232
- user-select: none;
233
- text-decoration: none;
234
- transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
235
166
 
236
167
  &:hover {
237
- background-color: #166fe5;
168
+ background-color: var(--necto-facebook-bg-hover, ${vo});
238
169
  }
239
170
 
240
171
  &:active {
241
- background-color: #1467d6;
172
+ background-color: var(--necto-facebook-bg-active, ${Co});
242
173
  }
243
174
 
244
175
  &:focus-visible {
245
- outline: none;
246
- box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.3);
176
+ box-shadow: 0 0 0 3px var(--necto-facebook-focus-shadow, ${xo});
247
177
  }
248
178
 
249
- ${o=>o.$disabled&&`
250
- opacity: 0.7;
251
- cursor: not-allowed;
252
- pointer-events: none;
253
-
179
+ ${t=>t.$disabled&&`
254
180
  &:hover,
255
181
  &:active {
256
- background-color: #1877f2;
182
+ background-color: var(--necto-facebook-bg, ${z});
257
183
  }
258
184
  `}
259
- `,O=Oo(({as:o,asChild:t,children:s="Continue with Facebook",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>D(zo,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,iconPosition:n,icon:D(So,{size:i}),className:_o(a,`_necto:${_}`),...l,children:s}));O.displayName=_;import Uo from"clsx";import{forwardRef as Ko}from"react";import Vo from"@emotion/styled";import{FaGithub as Zo}from"react-icons/fa";import{jsx as I}from"react/jsx-runtime";var S="GitHubButton",Xo=Vo(c)`
260
- display: inline-flex;
261
- align-items: center;
262
- justify-content: center;
263
- gap: 10px;
185
+ `,Z=yo(({as:t,asChild:o,children:r="Continue with Facebook",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>X(ho,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:X(_o,{size:i}),className:Ro(`_necto:${W}`,a),...p,children:r}));Z.displayName=W;import Ao from"clsx";import{forwardRef as wo}from"react";import Go from"@emotion/styled";import{FaGithub as Po}from"react-icons/fa";import{jsx as J}from"@emotion/react/jsx-runtime";var Q="GitHubButton",q="#24292f",$o="#2c3237",Fo="#373e47",ko="#ffffff",Ho="#24292f",Do="rgba(36, 41, 47, 0.3)",Io=Go(l)`
264
186
  padding: 0 18px;
265
- min-height: 40px;
266
- background-color: #24292f;
267
- color: #ffffff;
268
- border: 1px solid #24292f;
269
- border-radius: 8px;
270
- font-size: 14px;
187
+ background-color: var(--necto-github-bg, ${q});
188
+ color: var(--necto-github-text, ${ko});
189
+ border: 1px solid var(--necto-github-border, ${Ho});
271
190
  font-weight: 500;
272
191
  font-family: system-ui, -apple-system, sans-serif;
273
- line-height: 20px;
274
- cursor: pointer;
275
- user-select: none;
276
- text-decoration: none;
277
- transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
278
192
 
279
193
  &:hover {
280
- background-color: #2c3237;
194
+ background-color: var(--necto-github-bg-hover, ${$o});
281
195
  }
282
196
 
283
197
  &:active {
284
- background-color: #373e47;
198
+ background-color: var(--necto-github-bg-active, ${Fo});
285
199
  }
286
200
 
287
201
  &:focus-visible {
288
- outline: none;
289
- box-shadow: 0 0 0 3px rgba(36, 41, 47, 0.3);
202
+ box-shadow: 0 0 0 3px var(--necto-github-focus-shadow, ${Do});
290
203
  }
291
204
 
292
- ${o=>o.$disabled&&`
293
- opacity: 0.7;
294
- cursor: not-allowed;
295
- pointer-events: none;
296
-
205
+ ${t=>t.$disabled&&`
297
206
  &:hover,
298
207
  &:active {
299
- background-color: #24292f;
208
+ background-color: var(--necto-github-bg, ${q});
300
209
  }
301
210
  `}
302
- `,z=Ko(({as:o,asChild:t,children:s="Continue with GitHub",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>I(Xo,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,iconPosition:n,icon:I(Zo,{size:i}),className:Uo(a,`_necto:${S}`),...l,children:s}));z.displayName=S;import qo from"clsx";import{forwardRef as Jo}from"react";import Qo from"@emotion/styled";import{FaGitlab as Wo}from"react-icons/fa6";import{jsx as U}from"react/jsx-runtime";var K="GitLabButton",Yo=Qo(c)`
303
- display: inline-flex;
304
- align-items: center;
305
- justify-content: center;
306
- gap: 10px;
211
+ `,Y=wo(({as:t,asChild:o,children:r="Continue with GitHub",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>J(Io,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,iconPosition:s,icon:J(Po,{size:i}),className:Ao(`_necto:${Q}`,a),...p,children:r}));Y.displayName=Q;import Mo from"clsx";import{forwardRef as No}from"react";import Uo from"@emotion/styled";import{jsx as d,jsxs as So}from"@emotion/react/jsx-runtime";var j=({size:t,color:o})=>{let r=o==null;return So("svg",{width:t,height:t,viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:[d("title",{children:"GitLab Icon"}),d("path",{fill:r?"#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"}),d("path",{fill:r?"#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"}),d("path",{fill:r?"#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"}),d("path",{fill:r?"#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"})]})};import{jsx as ot}from"@emotion/react/jsx-runtime";var et="GitLabButton",tt="#fc6d26",Vo="#e24329",Ko="#c73b1c",zo="#ffffff",Xo="rgba(252, 109, 38, 0.3)",Wo=Uo(l)`
307
212
  padding: 0 18px;
308
- min-height: 40px;
309
- background-color: #fc6d26;
310
- color: #ffffff;
213
+ background-color: var(--necto-gitlab-bg, ${tt});
214
+ color: var(--necto-gitlab-text, ${zo});
311
215
  border: none;
312
- border-radius: 8px;
313
- font-size: 14px;
314
216
  font-weight: 500;
315
217
  font-family: system-ui, -apple-system, sans-serif;
316
- line-height: 20px;
317
- cursor: pointer;
318
- user-select: none;
319
- text-decoration: none;
320
- transition: background-color 0.2s, box-shadow 0.2s;
321
218
 
322
219
  &:hover {
323
- background-color: #e24329;
220
+ background-color: var(--necto-gitlab-bg-hover, ${Vo});
324
221
  }
325
222
 
326
223
  &:active {
327
- background-color: #c73b1c;
224
+ background-color: var(--necto-gitlab-bg-active, ${Ko});
328
225
  }
329
226
 
330
227
  &:focus-visible {
331
- outline: none;
332
- box-shadow: 0 0 0 3px rgba(252, 109, 38, 0.3);
228
+ box-shadow: 0 0 0 3px var(--necto-gitlab-focus-shadow, ${Xo});
333
229
  }
334
230
 
335
- ${o=>o.$disabled&&`
336
- opacity: 0.7;
337
- cursor: not-allowed;
338
- pointer-events: none;
339
-
231
+ ${t=>t.$disabled&&`
340
232
  &:hover,
341
233
  &:active {
342
- background-color: #fc6d26;
234
+ background-color: var(--necto-gitlab-bg, ${tt});
343
235
  }
344
236
  `}
345
- `,V=Jo(({as:o,asChild:t,children:s="Continue with GitLab",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>U(Yo,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,iconPosition:n,icon:U(Wo,{size:i}),className:qo(a,`_necto:${K}`),...l,children:s}));V.displayName=K;import{forwardRef as jo}from"react";import ot from"@emotion/styled";import{FcGoogle as tt}from"react-icons/fc";import{jsx as Z}from"react/jsx-runtime";var et="GoogleButton",rt=ot(c)`
346
- display: inline-flex;
347
- align-items: center;
348
- justify-content: center;
349
- gap: 10px;
237
+ `,rt=No(({as:t,asChild:o,iconColor:r="#fff",children:s="Continue with GitLab",iconPosition:n="left",showIcon:i=!0,iconSize:e=20,disabled:a,className:p,...c},g)=>ot(Wo,{as:t,ref:g,asChild:o,showIcon:i,disabled:a,$disabled:a,iconPosition:n,icon:ot(j,{size:e,color:r}),className:Mo(`_necto:${et}`,p),...c,children:s}));rt.displayName=et;import Zo from"clsx";import{forwardRef as qo}from"react";import Jo from"@emotion/styled";import{FcGoogle as Qo}from"react-icons/fc";import{jsx as st}from"@emotion/react/jsx-runtime";var it="GoogleButton",nt="#ffffff",Yo="#f8f9fa",jo="#eceff1",te="#1f1f1f",oe="#747775",ee="rgba(66, 133, 244, 0.3)",re=Jo(l)`
350
238
  padding: 0 12px 0 12px;
351
- min-height: 40px;
352
- background-color: #ffffff;
353
- color: #1f1f1f;
354
- border: 1px solid #747775;
355
- border-radius: 8px;
356
- font-size: 14px;
239
+ height: 40px;
240
+ background-color: var(--necto-google-bg, ${nt});
241
+ color: var(--necto-google-text, ${te});
242
+ border: 1px solid var(--necto-google-border, ${oe});
357
243
  font-weight: 500;
358
244
  font-family: 'Roboto Medium', system-ui, -apple-system, sans-serif;
359
- line-height: 20px;
360
- cursor: pointer;
361
- user-select: none;
362
- text-decoration: none;
363
- transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
364
245
 
365
246
  &:hover {
366
- background-color: #f8f9fa;
247
+ background-color: var(--necto-google-bg-hover, ${Yo});
367
248
  }
368
249
 
369
250
  &:active {
370
- background-color: #eceff1;
251
+ background-color: var(--necto-google-bg-active, ${jo});
371
252
  }
372
253
 
373
254
  &:focus-visible {
374
- outline: none;
375
- box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
255
+ box-shadow: 0 0 0 3px var(--necto-google-focus-shadow, ${ee});
376
256
  }
377
257
 
378
- ${o=>o.$disabled&&`
379
- opacity: 0.7;
380
- cursor: not-allowed;
381
- pointer-events: none;
382
-
258
+ ${t=>t.$disabled&&`
383
259
  &:hover,
384
260
  &:active {
385
- background-color: #ffffff;
261
+ background-color: var(--necto-google-bg, ${nt});
386
262
  }
387
263
  `}
388
- `,X=jo(({as:o,asChild:t,children:s="Continue with Google",iconPosition:n="left",showIcon:r=!0,iconSize:i=20,disabled:e,className:a,...l},p)=>Z(rt,{as:o,ref:p,asChild:t,showIcon:r,disabled:e,$disabled:e,className:a,iconPosition:n,icon:Z(tt,{size:i}),...l,children:s}));X.displayName=et;export{w as AppleButton,k as AtlassianButton,L as BitbucketButton,G as DiscordButton,$ as DropboxButton,x as Else,O as FacebookButton,z as GitHubButton,V as GitLabButton,X as GoogleButton,u as If,y as Primitive};
264
+ `,at=qo(({as:t,asChild:o,children:r="Continue with Google",iconPosition:s="left",showIcon:n=!0,iconSize:i=20,disabled:e,className:a,...p},c)=>st(re,{as:t,ref:c,asChild:o,showIcon:n,disabled:e,$disabled:e,className:Zo(`_necto:${it}`,a),iconPosition:s,icon:st(Qo,{size:i}),...p,children:r}));at.displayName=it;export{T as AppleButton,w as AtlassianButton,H as BitbucketButton,M as DiscordButton,K as DropboxButton,R as Else,Z as FacebookButton,Y as GitHubButton,rt as GitLabButton,at as GoogleButton,b as If,O as Primitive};
389
265
  //# sourceMappingURL=index.js.map