@necto-react/components 1.2.11 → 1.2.12

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