@saas-support/react 0.4.0 → 0.6.0
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.
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +25 -0
- package/dist/index.js +258 -249
- package/dist/react.cjs +1337 -127
- package/dist/react.d.ts +53 -4
- package/dist/react.js +3289 -1487
- package/package.json +1 -1
package/dist/react.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),U=require("./index.cjs"),vs=require("react-dom"),J=t.createContext(null);function E(){const a=t.useContext(J);if(!a)throw new Error("useSaaSContext must be used within a <SaaSProvider>");return a}function js({publishableKey:a,apiKey:r,baseUrl:e,appearance:o,children:n}){const[u]=t.useState(()=>new U.SaaSSupport({publishableKey:a,apiKey:r,baseUrl:e})),[l,c]=t.useState(null),[d,i]=t.useState(!1),[x,p]=t.useState(null);return t.useEffect(()=>{let g=!1;u.load().then(async()=>{if(g)return;const v=await u.auth.getUser(),b=await u.auth.getSettings();c(v),p(b),i(!0)});const m=u.auth.onAuthStateChange(v=>{g||c(v)});return()=>{g=!0,m(),u.destroy()}},[u]),s.jsx(J.Provider,{value:{client:u,user:l,isLoaded:d,appearance:o,settings:x},children:n})}const ws={colorPrimary:"#6366f1",colorPrimaryHover:"#4f46e5",colorBackground:"#ffffff",colorText:"#1a1a2e",colorTextSecondary:"#6b7280",colorInputBackground:"#f9fafb",colorInputBorder:"#d1d5db",colorError:"#ef4444",colorSuccess:"#22c55e",colorWarning:"#f59e0b",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',borderRadius:"8px",authPrimary:"#4648d4",authPrimaryContainer:"#6063ee",authOnPrimary:"#ffffff",authPrimaryFixed:"#e1e0ff",authSurface:"#fcf8ff",authSurfaceContainerLowest:"#ffffff",authSurfaceContainerLow:"#f5f2ff",authSurfaceContainer:"#efecff",authSurfaceContainerHigh:"#e8e5ff",authSurfaceContainerHighest:"#e2e0fc",authOnSurface:"#1a1a2e",authOnSurfaceVariant:"#464554",authOutline:"#767586",authOutlineVariant:"#c7c4d7",authError:"#ba1a1a",authErrorContainer:"#ffdad6",authSuccess:"#22c55e",authFontHeadline:"'Manrope', sans-serif",authFontBody:"'Inter', sans-serif"},Ss={colorPrimary:"#818cf8",colorPrimaryHover:"#6366f1",colorBackground:"#1e1e2e",colorText:"#e2e8f0",colorTextSecondary:"#94a3b8",colorInputBackground:"#2a2a3e",colorInputBorder:"#3f3f5e",colorError:"#f87171",colorSuccess:"#4ade80",colorWarning:"#fbbf24",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',borderRadius:"8px",authPrimary:"#818cf8",authPrimaryContainer:"#6063ee",authOnPrimary:"#ffffff",authPrimaryFixed:"#2a2a3e",authSurface:"#1e1e2e",authSurfaceContainerLowest:"#161623",authSurfaceContainerLow:"#27273a",authSurfaceContainer:"#2d2d44",authSurfaceContainerHigh:"#363654",authSurfaceContainerHighest:"#3f3f61",authOnSurface:"#e2e8f0",authOnSurfaceVariant:"#94a3b8",authOutline:"#464554",authOutlineVariant:"#44445a",authError:"#f87171",authErrorContainer:"#93000a",authSuccess:"#4ade80",authFontHeadline:"'Manrope', sans-serif",authFontBody:"'Inter', sans-serif"};function Y(a){const r=(a==null?void 0:a.baseTheme)==="dark"?Ss:ws,e=a==null?void 0:a.variables,o=(e==null?void 0:e.colorPrimary)??r.authPrimary;return{colorPrimary:(e==null?void 0:e.colorPrimary)??r.colorPrimary,colorPrimaryHover:e!=null&&e.colorPrimary?Ns(e.colorPrimary,10):r.colorPrimaryHover,colorBackground:(e==null?void 0:e.colorBackground)??r.colorBackground,colorText:(e==null?void 0:e.colorText)??r.colorText,colorTextSecondary:r.colorTextSecondary,colorInputBackground:(e==null?void 0:e.colorInputBackground)??r.colorInputBackground,colorInputBorder:(e==null?void 0:e.colorInputBorder)??r.colorInputBorder,colorError:(e==null?void 0:e.colorError)??r.colorError,colorSuccess:(e==null?void 0:e.colorSuccess)??r.colorSuccess,colorWarning:(e==null?void 0:e.colorWarning)??r.colorWarning,fontFamily:(e==null?void 0:e.fontFamily)??r.fontFamily,borderRadius:(e==null?void 0:e.borderRadius)??r.borderRadius,authPrimary:o,authPrimaryContainer:e!=null&&e.colorPrimary?ks(o,15):r.authPrimaryContainer,authOnPrimary:r.authOnPrimary,authPrimaryFixed:r.authPrimaryFixed,authSurface:(e==null?void 0:e.colorBackground)??r.authSurface,authSurfaceContainerLowest:r.authSurfaceContainerLowest,authSurfaceContainerLow:(e==null?void 0:e.colorInputBackground)??r.authSurfaceContainerLow,authSurfaceContainer:r.authSurfaceContainer,authSurfaceContainerHigh:r.authSurfaceContainerHigh,authSurfaceContainerHighest:r.authSurfaceContainerHighest,authOnSurface:(e==null?void 0:e.colorText)??r.authOnSurface,authOnSurfaceVariant:r.authOnSurfaceVariant,authOutline:r.authOutline,authOutlineVariant:(e==null?void 0:e.colorInputBorder)??r.authOutlineVariant,authError:(e==null?void 0:e.colorError)??r.authError,authErrorContainer:r.authErrorContainer,authSuccess:(e==null?void 0:e.colorSuccess)??r.authSuccess,authFontHeadline:(e==null?void 0:e.fontFamily)??r.authFontHeadline,authFontBody:(e==null?void 0:e.fontFamily)??r.authFontBody}}function Ns(a,r){const e=parseInt(a.replace("#",""),16),o=Math.max(0,(e>>16)-Math.round(2.55*r)),n=Math.max(0,(e>>8&255)-Math.round(2.55*r)),u=Math.max(0,(e&255)-Math.round(2.55*r));return`#${(o<<16|n<<8|u).toString(16).padStart(6,"0")}`}function ks(a,r){const e=parseInt(a.replace("#",""),16),o=Math.min(255,(e>>16)+Math.round(2.55*r)),n=Math.min(255,(e>>8&255)+Math.round(2.55*r)),u=Math.min(255,(e&255)+Math.round(2.55*r));return`#${(o<<16|n<<8|u).toString(16).padStart(6,"0")}`}function Q(a){return`
|
|
2
2
|
:host {
|
|
3
3
|
all: initial;
|
|
4
|
-
font-family: ${
|
|
5
|
-
color: ${
|
|
4
|
+
font-family: ${a.fontFamily};
|
|
5
|
+
color: ${a.colorText};
|
|
6
6
|
line-height: 1.5;
|
|
7
7
|
-webkit-font-smoothing: antialiased;
|
|
8
8
|
}
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
11
11
|
|
|
12
12
|
.ss-card {
|
|
13
|
-
background: ${
|
|
14
|
-
border-radius: ${
|
|
13
|
+
background: ${a.colorBackground};
|
|
14
|
+
border-radius: ${a.borderRadius};
|
|
15
15
|
padding: 32px;
|
|
16
16
|
width: 100%;
|
|
17
|
-
max-width:
|
|
17
|
+
max-width: 480px;
|
|
18
18
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
19
|
-
border: 1px solid ${
|
|
19
|
+
border: 1px solid ${a.colorInputBorder};
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.ss-card-wide { max-width: 640px; }
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
.ss-title {
|
|
25
25
|
font-size: 22px;
|
|
26
26
|
font-weight: 700;
|
|
27
|
-
color: ${
|
|
27
|
+
color: ${a.colorText};
|
|
28
28
|
text-align: center;
|
|
29
29
|
margin-bottom: 24px;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.ss-subtitle {
|
|
33
33
|
font-size: 14px;
|
|
34
|
-
color: ${
|
|
34
|
+
color: ${a.colorTextSecondary};
|
|
35
35
|
text-align: center;
|
|
36
36
|
margin-top: -16px;
|
|
37
37
|
margin-bottom: 24px;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
display: block;
|
|
44
44
|
font-size: 14px;
|
|
45
45
|
font-weight: 500;
|
|
46
|
-
color: ${
|
|
46
|
+
color: ${a.colorText};
|
|
47
47
|
margin-bottom: 6px;
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -52,20 +52,20 @@
|
|
|
52
52
|
padding: 10px 12px;
|
|
53
53
|
font-size: 14px;
|
|
54
54
|
font-family: inherit;
|
|
55
|
-
border: 1px solid ${
|
|
56
|
-
border-radius: calc(${
|
|
57
|
-
background: ${
|
|
58
|
-
color: ${
|
|
55
|
+
border: 1px solid ${a.colorInputBorder};
|
|
56
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
57
|
+
background: ${a.colorInputBackground};
|
|
58
|
+
color: ${a.colorText};
|
|
59
59
|
outline: none;
|
|
60
60
|
transition: border-color 0.15s;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.ss-input:focus {
|
|
64
|
-
border-color: ${
|
|
65
|
-
box-shadow: 0 0 0 3px ${
|
|
64
|
+
border-color: ${a.colorPrimary};
|
|
65
|
+
box-shadow: 0 0 0 3px ${a.colorPrimary}22;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.ss-input.ss-input-error { border-color: ${
|
|
68
|
+
.ss-input.ss-input-error { border-color: ${a.colorError}; }
|
|
69
69
|
|
|
70
70
|
.ss-query-textarea {
|
|
71
71
|
resize: vertical;
|
|
@@ -75,16 +75,16 @@
|
|
|
75
75
|
|
|
76
76
|
.ss-error {
|
|
77
77
|
font-size: 13px;
|
|
78
|
-
color: ${
|
|
78
|
+
color: ${a.colorError};
|
|
79
79
|
margin-top: 4px;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.ss-global-error {
|
|
83
83
|
font-size: 13px;
|
|
84
|
-
color: ${
|
|
85
|
-
background: ${
|
|
86
|
-
border: 1px solid ${
|
|
87
|
-
border-radius: calc(${
|
|
84
|
+
color: ${a.colorError};
|
|
85
|
+
background: ${a.colorError}11;
|
|
86
|
+
border: 1px solid ${a.colorError}33;
|
|
87
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
88
88
|
padding: 10px 12px;
|
|
89
89
|
margin-bottom: 16px;
|
|
90
90
|
text-align: center;
|
|
@@ -92,10 +92,10 @@
|
|
|
92
92
|
|
|
93
93
|
.ss-success-msg {
|
|
94
94
|
font-size: 13px;
|
|
95
|
-
color: ${
|
|
96
|
-
background: ${
|
|
97
|
-
border: 1px solid ${
|
|
98
|
-
border-radius: calc(${
|
|
95
|
+
color: ${a.colorSuccess};
|
|
96
|
+
background: ${a.colorSuccess}11;
|
|
97
|
+
border: 1px solid ${a.colorSuccess}33;
|
|
98
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
99
99
|
padding: 10px 12px;
|
|
100
100
|
margin-bottom: 16px;
|
|
101
101
|
text-align: center;
|
|
@@ -104,14 +104,14 @@
|
|
|
104
104
|
.ss-loading {
|
|
105
105
|
text-align: center;
|
|
106
106
|
padding: 24px;
|
|
107
|
-
color: ${
|
|
107
|
+
color: ${a.colorTextSecondary};
|
|
108
108
|
font-size: 14px;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.ss-empty {
|
|
112
112
|
text-align: center;
|
|
113
113
|
padding: 24px;
|
|
114
|
-
color: ${
|
|
114
|
+
color: ${a.colorTextSecondary};
|
|
115
115
|
font-size: 14px;
|
|
116
116
|
}
|
|
117
117
|
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
font-weight: 600;
|
|
125
125
|
font-family: inherit;
|
|
126
126
|
border: none;
|
|
127
|
-
border-radius: calc(${
|
|
127
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
128
128
|
cursor: pointer;
|
|
129
129
|
transition: background 0.15s, opacity 0.15s;
|
|
130
130
|
}
|
|
@@ -132,23 +132,23 @@
|
|
|
132
132
|
.ss-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
133
133
|
|
|
134
134
|
.ss-btn-primary {
|
|
135
|
-
background: ${
|
|
135
|
+
background: ${a.colorPrimary};
|
|
136
136
|
color: #fff;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
-
.ss-btn-primary:hover:not(:disabled) { background: ${
|
|
139
|
+
.ss-btn-primary:hover:not(:disabled) { background: ${a.colorPrimaryHover}; }
|
|
140
140
|
|
|
141
141
|
.ss-btn-danger {
|
|
142
|
-
background: ${
|
|
142
|
+
background: ${a.colorError};
|
|
143
143
|
color: #fff;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
.ss-btn-danger:hover:not(:disabled) { opacity: 0.9; }
|
|
147
147
|
|
|
148
148
|
.ss-btn-current {
|
|
149
|
-
background: ${
|
|
150
|
-
color: ${
|
|
151
|
-
border: 1px solid ${
|
|
149
|
+
background: ${a.colorInputBackground};
|
|
150
|
+
color: ${a.colorTextSecondary};
|
|
151
|
+
border: 1px solid ${a.colorInputBorder};
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
.ss-btn-sm {
|
|
@@ -169,13 +169,13 @@
|
|
|
169
169
|
display: flex;
|
|
170
170
|
align-items: center;
|
|
171
171
|
gap: 8px;
|
|
172
|
-
background: ${
|
|
173
|
-
border: 1px solid ${
|
|
174
|
-
color: ${
|
|
172
|
+
background: ${a.colorInputBackground};
|
|
173
|
+
border: 1px solid ${a.colorInputBorder};
|
|
174
|
+
color: ${a.colorText};
|
|
175
175
|
padding: 8px 12px;
|
|
176
176
|
font-size: 14px;
|
|
177
177
|
font-family: inherit;
|
|
178
|
-
border-radius: calc(${
|
|
178
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
179
179
|
cursor: pointer;
|
|
180
180
|
width: auto;
|
|
181
181
|
}
|
|
@@ -192,16 +192,16 @@
|
|
|
192
192
|
font-size: 14px;
|
|
193
193
|
font-weight: 500;
|
|
194
194
|
font-family: inherit;
|
|
195
|
-
border: 1px solid ${
|
|
196
|
-
border-radius: calc(${
|
|
197
|
-
background: ${
|
|
198
|
-
color: ${
|
|
195
|
+
border: 1px solid ${a.colorInputBorder};
|
|
196
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
197
|
+
background: ${a.colorInputBackground};
|
|
198
|
+
color: ${a.colorText};
|
|
199
199
|
cursor: pointer;
|
|
200
200
|
transition: background 0.15s;
|
|
201
201
|
margin-bottom: 8px;
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
-
.ss-btn-social:hover:not(:disabled) { background: ${
|
|
204
|
+
.ss-btn-social:hover:not(:disabled) { background: ${a.colorInputBorder}; }
|
|
205
205
|
.ss-btn-social:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
206
206
|
.ss-btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }
|
|
207
207
|
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
align-items: center;
|
|
211
211
|
gap: 12px;
|
|
212
212
|
margin: 20px 0;
|
|
213
|
-
color: ${
|
|
213
|
+
color: ${a.colorTextSecondary};
|
|
214
214
|
font-size: 13px;
|
|
215
215
|
}
|
|
216
216
|
|
|
@@ -219,18 +219,18 @@
|
|
|
219
219
|
content: '';
|
|
220
220
|
flex: 1;
|
|
221
221
|
height: 1px;
|
|
222
|
-
background: ${
|
|
222
|
+
background: ${a.colorInputBorder};
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
.ss-footer {
|
|
226
226
|
text-align: center;
|
|
227
227
|
margin-top: 20px;
|
|
228
228
|
font-size: 14px;
|
|
229
|
-
color: ${
|
|
229
|
+
color: ${a.colorTextSecondary};
|
|
230
230
|
}
|
|
231
231
|
|
|
232
232
|
.ss-link {
|
|
233
|
-
color: ${
|
|
233
|
+
color: ${a.colorPrimary};
|
|
234
234
|
text-decoration: none;
|
|
235
235
|
cursor: pointer;
|
|
236
236
|
font-weight: 500;
|
|
@@ -260,7 +260,7 @@
|
|
|
260
260
|
width: 36px;
|
|
261
261
|
height: 36px;
|
|
262
262
|
border-radius: 50%;
|
|
263
|
-
background: ${
|
|
263
|
+
background: ${a.colorPrimary};
|
|
264
264
|
color: #fff;
|
|
265
265
|
display: flex;
|
|
266
266
|
align-items: center;
|
|
@@ -273,15 +273,15 @@
|
|
|
273
273
|
transition: box-shadow 0.15s;
|
|
274
274
|
}
|
|
275
275
|
|
|
276
|
-
.ss-avatar:hover { box-shadow: 0 0 0 3px ${
|
|
276
|
+
.ss-avatar:hover { box-shadow: 0 0 0 3px ${a.colorPrimary}33; }
|
|
277
277
|
|
|
278
278
|
.ss-dropdown {
|
|
279
279
|
position: absolute;
|
|
280
280
|
top: calc(100% + 8px);
|
|
281
281
|
right: 0;
|
|
282
|
-
background: ${
|
|
283
|
-
border: 1px solid ${
|
|
284
|
-
border-radius: ${
|
|
282
|
+
background: ${a.colorBackground};
|
|
283
|
+
border: 1px solid ${a.colorInputBorder};
|
|
284
|
+
border-radius: ${a.borderRadius};
|
|
285
285
|
padding: 8px 0;
|
|
286
286
|
min-width: 200px;
|
|
287
287
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
@@ -292,13 +292,13 @@
|
|
|
292
292
|
|
|
293
293
|
.ss-dropdown-header {
|
|
294
294
|
padding: 8px 16px 12px;
|
|
295
|
-
border-bottom: 1px solid ${
|
|
295
|
+
border-bottom: 1px solid ${a.colorInputBorder};
|
|
296
296
|
margin-bottom: 4px;
|
|
297
297
|
}
|
|
298
298
|
|
|
299
299
|
.ss-dropdown-email {
|
|
300
300
|
font-size: 13px;
|
|
301
|
-
color: ${
|
|
301
|
+
color: ${a.colorTextSecondary};
|
|
302
302
|
word-break: break-all;
|
|
303
303
|
}
|
|
304
304
|
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
padding: 8px 16px;
|
|
309
309
|
font-size: 14px;
|
|
310
310
|
font-family: inherit;
|
|
311
|
-
color: ${
|
|
311
|
+
color: ${a.colorText};
|
|
312
312
|
background: none;
|
|
313
313
|
border: none;
|
|
314
314
|
text-align: left;
|
|
@@ -316,9 +316,29 @@
|
|
|
316
316
|
transition: background 0.1s;
|
|
317
317
|
}
|
|
318
318
|
|
|
319
|
-
.ss-dropdown-item:hover { background: ${
|
|
320
|
-
.ss-dropdown-item-danger { color: ${
|
|
321
|
-
.ss-dropdown-item-active { font-weight: 600; color: ${
|
|
319
|
+
.ss-dropdown-item:hover { background: ${a.colorInputBackground}; }
|
|
320
|
+
.ss-dropdown-item-danger { color: ${a.colorError}; }
|
|
321
|
+
.ss-dropdown-item-active { font-weight: 600; color: ${a.colorPrimary}; }
|
|
322
|
+
|
|
323
|
+
.ss-dropdown-section-title {
|
|
324
|
+
padding: 8px 16px 4px;
|
|
325
|
+
font-size: 11px;
|
|
326
|
+
font-weight: 600;
|
|
327
|
+
text-transform: uppercase;
|
|
328
|
+
letter-spacing: 0.5px;
|
|
329
|
+
color: ${a.colorTextSecondary};
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.ss-org-check {
|
|
333
|
+
margin-right: 6px;
|
|
334
|
+
font-size: 12px;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.ss-danger-zone {
|
|
338
|
+
padding-top: 20px;
|
|
339
|
+
margin-top: 20px;
|
|
340
|
+
border-top: 2px solid ${a.colorError}33;
|
|
341
|
+
}
|
|
322
342
|
|
|
323
343
|
/* Badges */
|
|
324
344
|
|
|
@@ -330,21 +350,21 @@
|
|
|
330
350
|
border-radius: 999px;
|
|
331
351
|
text-transform: uppercase;
|
|
332
352
|
letter-spacing: 0.3px;
|
|
333
|
-
background: ${
|
|
334
|
-
color: ${
|
|
353
|
+
background: ${a.colorInputBackground};
|
|
354
|
+
color: ${a.colorTextSecondary};
|
|
335
355
|
}
|
|
336
356
|
|
|
337
|
-
.ss-badge-active { background: ${
|
|
338
|
-
.ss-badge-trialing { background: ${
|
|
339
|
-
.ss-badge-past-due { background: ${
|
|
340
|
-
.ss-badge-paused { background: ${
|
|
341
|
-
.ss-badge-canceled { background: ${
|
|
357
|
+
.ss-badge-active { background: ${a.colorSuccess}22; color: ${a.colorSuccess}; }
|
|
358
|
+
.ss-badge-trialing { background: ${a.colorPrimary}22; color: ${a.colorPrimary}; }
|
|
359
|
+
.ss-badge-past-due { background: ${a.colorError}22; color: ${a.colorError}; }
|
|
360
|
+
.ss-badge-paused { background: ${a.colorWarning}22; color: ${a.colorWarning}; }
|
|
361
|
+
.ss-badge-canceled { background: ${a.colorTextSecondary}22; color: ${a.colorTextSecondary}; }
|
|
342
362
|
|
|
343
363
|
/* Tabs */
|
|
344
364
|
|
|
345
365
|
.ss-tab-group {
|
|
346
366
|
display: flex;
|
|
347
|
-
border-bottom: 1px solid ${
|
|
367
|
+
border-bottom: 1px solid ${a.colorInputBorder};
|
|
348
368
|
margin-bottom: 24px;
|
|
349
369
|
}
|
|
350
370
|
|
|
@@ -355,7 +375,7 @@
|
|
|
355
375
|
font-size: 14px;
|
|
356
376
|
font-weight: 500;
|
|
357
377
|
font-family: inherit;
|
|
358
|
-
color: ${
|
|
378
|
+
color: ${a.colorTextSecondary};
|
|
359
379
|
background: none;
|
|
360
380
|
border: none;
|
|
361
381
|
border-bottom: 2px solid transparent;
|
|
@@ -363,11 +383,11 @@
|
|
|
363
383
|
transition: color 0.15s, border-color 0.15s;
|
|
364
384
|
}
|
|
365
385
|
|
|
366
|
-
.ss-tab:hover { color: ${
|
|
386
|
+
.ss-tab:hover { color: ${a.colorText}; }
|
|
367
387
|
|
|
368
388
|
.ss-tab-active {
|
|
369
|
-
color: ${
|
|
370
|
-
border-bottom-color: ${
|
|
389
|
+
color: ${a.colorPrimary};
|
|
390
|
+
border-bottom-color: ${a.colorPrimary};
|
|
371
391
|
}
|
|
372
392
|
|
|
373
393
|
.ss-tab-content .ss-card { box-shadow: none; border: none; padding: 0; }
|
|
@@ -386,30 +406,30 @@
|
|
|
386
406
|
text-align: left;
|
|
387
407
|
padding: 10px 12px;
|
|
388
408
|
font-weight: 600;
|
|
389
|
-
color: ${
|
|
390
|
-
border-bottom: 2px solid ${
|
|
409
|
+
color: ${a.colorTextSecondary};
|
|
410
|
+
border-bottom: 2px solid ${a.colorInputBorder};
|
|
391
411
|
white-space: nowrap;
|
|
392
412
|
}
|
|
393
413
|
|
|
394
414
|
.ss-th-sortable { cursor: pointer; user-select: none; }
|
|
395
|
-
.ss-th-sortable:hover { color: ${
|
|
415
|
+
.ss-th-sortable:hover { color: ${a.colorText}; }
|
|
396
416
|
|
|
397
417
|
.ss-sort-indicator { font-size: 10px; }
|
|
398
|
-
.ss-sorted-asc, .ss-sorted-desc { color: ${
|
|
418
|
+
.ss-sorted-asc, .ss-sorted-desc { color: ${a.colorPrimary}; }
|
|
399
419
|
|
|
400
420
|
.ss-td {
|
|
401
421
|
padding: 10px 12px;
|
|
402
|
-
border-bottom: 1px solid ${
|
|
403
|
-
color: ${
|
|
422
|
+
border-bottom: 1px solid ${a.colorInputBorder};
|
|
423
|
+
color: ${a.colorText};
|
|
404
424
|
}
|
|
405
425
|
|
|
406
|
-
.ss-tr:hover .ss-td { background: ${
|
|
426
|
+
.ss-tr:hover .ss-td { background: ${a.colorInputBackground}; }
|
|
407
427
|
|
|
408
428
|
.ss-table-footer {
|
|
409
429
|
text-align: center;
|
|
410
430
|
padding: 8px;
|
|
411
431
|
font-size: 12px;
|
|
412
|
-
color: ${
|
|
432
|
+
color: ${a.colorTextSecondary};
|
|
413
433
|
}
|
|
414
434
|
|
|
415
435
|
/* Pricing */
|
|
@@ -421,15 +441,15 @@
|
|
|
421
441
|
}
|
|
422
442
|
|
|
423
443
|
.ss-pricing-card {
|
|
424
|
-
background: ${
|
|
425
|
-
border: 1px solid ${
|
|
426
|
-
border-radius: ${
|
|
444
|
+
background: ${a.colorBackground};
|
|
445
|
+
border: 1px solid ${a.colorInputBorder};
|
|
446
|
+
border-radius: ${a.borderRadius};
|
|
427
447
|
padding: 24px;
|
|
428
448
|
display: flex;
|
|
429
449
|
flex-direction: column;
|
|
430
450
|
}
|
|
431
451
|
|
|
432
|
-
.ss-pricing-card-current { border-color: ${
|
|
452
|
+
.ss-pricing-card-current { border-color: ${a.colorPrimary}; }
|
|
433
453
|
|
|
434
454
|
.ss-pricing-header {
|
|
435
455
|
display: flex;
|
|
@@ -441,7 +461,7 @@
|
|
|
441
461
|
.ss-pricing-name {
|
|
442
462
|
font-size: 18px;
|
|
443
463
|
font-weight: 600;
|
|
444
|
-
color: ${
|
|
464
|
+
color: ${a.colorText};
|
|
445
465
|
}
|
|
446
466
|
|
|
447
467
|
.ss-pricing-price { margin-bottom: 12px; }
|
|
@@ -449,17 +469,17 @@
|
|
|
449
469
|
.ss-pricing-amount {
|
|
450
470
|
font-size: 32px;
|
|
451
471
|
font-weight: 700;
|
|
452
|
-
color: ${
|
|
472
|
+
color: ${a.colorText};
|
|
453
473
|
}
|
|
454
474
|
|
|
455
475
|
.ss-pricing-interval {
|
|
456
476
|
font-size: 14px;
|
|
457
|
-
color: ${
|
|
477
|
+
color: ${a.colorTextSecondary};
|
|
458
478
|
}
|
|
459
479
|
|
|
460
480
|
.ss-pricing-desc {
|
|
461
481
|
font-size: 14px;
|
|
462
|
-
color: ${
|
|
482
|
+
color: ${a.colorTextSecondary};
|
|
463
483
|
margin-bottom: 16px;
|
|
464
484
|
}
|
|
465
485
|
|
|
@@ -471,11 +491,11 @@
|
|
|
471
491
|
|
|
472
492
|
.ss-pricing-feature {
|
|
473
493
|
font-size: 14px;
|
|
474
|
-
color: ${
|
|
494
|
+
color: ${a.colorText};
|
|
475
495
|
padding: 4px 0;
|
|
476
496
|
}
|
|
477
497
|
|
|
478
|
-
.ss-check { color: ${
|
|
498
|
+
.ss-check { color: ${a.colorSuccess}; margin-right: 6px; }
|
|
479
499
|
|
|
480
500
|
/* Usage / Progress */
|
|
481
501
|
|
|
@@ -490,30 +510,30 @@
|
|
|
490
510
|
.ss-usage-metric {
|
|
491
511
|
font-size: 14px;
|
|
492
512
|
font-weight: 500;
|
|
493
|
-
color: ${
|
|
513
|
+
color: ${a.colorText};
|
|
494
514
|
}
|
|
495
515
|
|
|
496
516
|
.ss-usage-value {
|
|
497
517
|
font-size: 14px;
|
|
498
|
-
color: ${
|
|
518
|
+
color: ${a.colorTextSecondary};
|
|
499
519
|
}
|
|
500
520
|
|
|
501
521
|
.ss-progress-bar {
|
|
502
522
|
width: 100%;
|
|
503
523
|
height: 8px;
|
|
504
|
-
background: ${
|
|
524
|
+
background: ${a.colorInputBackground};
|
|
505
525
|
border-radius: 4px;
|
|
506
526
|
overflow: hidden;
|
|
507
527
|
}
|
|
508
528
|
|
|
509
529
|
.ss-progress-fill {
|
|
510
530
|
height: 100%;
|
|
511
|
-
background: ${
|
|
531
|
+
background: ${a.colorPrimary};
|
|
512
532
|
border-radius: 4px;
|
|
513
533
|
transition: width 0.3s;
|
|
514
534
|
}
|
|
515
535
|
|
|
516
|
-
.ss-progress-danger { background: ${
|
|
536
|
+
.ss-progress-danger { background: ${a.colorError}; }
|
|
517
537
|
|
|
518
538
|
/* Chart */
|
|
519
539
|
|
|
@@ -522,7 +542,7 @@
|
|
|
522
542
|
.ss-chart-title {
|
|
523
543
|
font-size: 16px;
|
|
524
544
|
font-weight: 600;
|
|
525
|
-
color: ${
|
|
545
|
+
color: ${a.colorText};
|
|
526
546
|
margin-bottom: 12px;
|
|
527
547
|
}
|
|
528
548
|
|
|
@@ -535,16 +555,16 @@
|
|
|
535
555
|
}
|
|
536
556
|
|
|
537
557
|
.ss-widget {
|
|
538
|
-
background: ${
|
|
539
|
-
border: 1px solid ${
|
|
540
|
-
border-radius: ${
|
|
558
|
+
background: ${a.colorBackground};
|
|
559
|
+
border: 1px solid ${a.colorInputBorder};
|
|
560
|
+
border-radius: ${a.borderRadius};
|
|
541
561
|
padding: 16px;
|
|
542
562
|
}
|
|
543
563
|
|
|
544
564
|
.ss-widget-header {
|
|
545
565
|
font-size: 14px;
|
|
546
566
|
font-weight: 600;
|
|
547
|
-
color: ${
|
|
567
|
+
color: ${a.colorText};
|
|
548
568
|
margin-bottom: 12px;
|
|
549
569
|
}
|
|
550
570
|
|
|
@@ -552,14 +572,14 @@
|
|
|
552
572
|
|
|
553
573
|
.ss-saved-query-card {
|
|
554
574
|
padding: 12px 16px;
|
|
555
|
-
border: 1px solid ${
|
|
556
|
-
border-radius: calc(${
|
|
575
|
+
border: 1px solid ${a.colorInputBorder};
|
|
576
|
+
border-radius: calc(${a.borderRadius} - 2px);
|
|
557
577
|
margin-bottom: 8px;
|
|
558
578
|
cursor: pointer;
|
|
559
579
|
transition: border-color 0.15s;
|
|
560
580
|
}
|
|
561
581
|
|
|
562
|
-
.ss-saved-query-card:hover { border-color: ${
|
|
582
|
+
.ss-saved-query-card:hover { border-color: ${a.colorPrimary}; }
|
|
563
583
|
|
|
564
584
|
.ss-saved-query-header {
|
|
565
585
|
display: flex;
|
|
@@ -571,12 +591,12 @@
|
|
|
571
591
|
.ss-saved-query-name {
|
|
572
592
|
font-size: 14px;
|
|
573
593
|
font-weight: 600;
|
|
574
|
-
color: ${
|
|
594
|
+
color: ${a.colorText};
|
|
575
595
|
}
|
|
576
596
|
|
|
577
597
|
.ss-saved-query-desc {
|
|
578
598
|
font-size: 13px;
|
|
579
|
-
color: ${
|
|
599
|
+
color: ${a.colorTextSecondary};
|
|
580
600
|
margin-bottom: 8px;
|
|
581
601
|
}
|
|
582
602
|
|
|
@@ -588,7 +608,7 @@
|
|
|
588
608
|
|
|
589
609
|
.ss-saved-query-date {
|
|
590
610
|
font-size: 12px;
|
|
591
|
-
color: ${
|
|
611
|
+
color: ${a.colorTextSecondary};
|
|
592
612
|
}
|
|
593
613
|
|
|
594
614
|
/* Modal Overlay */
|
|
@@ -613,15 +633,15 @@
|
|
|
613
633
|
}
|
|
614
634
|
|
|
615
635
|
.ss-modal {
|
|
616
|
-
background: ${
|
|
617
|
-
border-radius: ${
|
|
636
|
+
background: ${a.colorBackground};
|
|
637
|
+
border-radius: ${a.borderRadius};
|
|
618
638
|
padding: 32px;
|
|
619
639
|
width: 90%;
|
|
620
640
|
max-width: 480px;
|
|
621
641
|
max-height: 90vh;
|
|
622
642
|
overflow-y: auto;
|
|
623
643
|
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
|
|
624
|
-
border: 1px solid ${
|
|
644
|
+
border: 1px solid ${a.colorInputBorder};
|
|
625
645
|
animation: ss-scale-in 0.15s ease-out;
|
|
626
646
|
}
|
|
627
647
|
|
|
@@ -640,14 +660,14 @@
|
|
|
640
660
|
.ss-modal-title {
|
|
641
661
|
font-size: 18px;
|
|
642
662
|
font-weight: 700;
|
|
643
|
-
color: ${
|
|
663
|
+
color: ${a.colorText};
|
|
644
664
|
}
|
|
645
665
|
|
|
646
666
|
.ss-modal-close {
|
|
647
667
|
background: none;
|
|
648
668
|
border: none;
|
|
649
669
|
font-size: 20px;
|
|
650
|
-
color: ${
|
|
670
|
+
color: ${a.colorTextSecondary};
|
|
651
671
|
cursor: pointer;
|
|
652
672
|
padding: 4px;
|
|
653
673
|
line-height: 1;
|
|
@@ -657,20 +677,20 @@
|
|
|
657
677
|
}
|
|
658
678
|
|
|
659
679
|
.ss-modal-close:hover {
|
|
660
|
-
background: ${
|
|
661
|
-
color: ${
|
|
680
|
+
background: ${a.colorInputBackground};
|
|
681
|
+
color: ${a.colorText};
|
|
662
682
|
}
|
|
663
683
|
|
|
664
684
|
.ss-modal-section {
|
|
665
685
|
padding-top: 20px;
|
|
666
686
|
margin-top: 20px;
|
|
667
|
-
border-top: 1px solid ${
|
|
687
|
+
border-top: 1px solid ${a.colorInputBorder};
|
|
668
688
|
}
|
|
669
689
|
|
|
670
690
|
.ss-modal-section-title {
|
|
671
691
|
font-size: 15px;
|
|
672
692
|
font-weight: 600;
|
|
673
|
-
color: ${
|
|
693
|
+
color: ${a.colorText};
|
|
674
694
|
margin-bottom: 16px;
|
|
675
695
|
}
|
|
676
696
|
|
|
@@ -678,7 +698,7 @@
|
|
|
678
698
|
width: 64px;
|
|
679
699
|
height: 64px;
|
|
680
700
|
border-radius: 50%;
|
|
681
|
-
background: ${
|
|
701
|
+
background: ${a.colorPrimary};
|
|
682
702
|
color: #fff;
|
|
683
703
|
display: flex;
|
|
684
704
|
align-items: center;
|
|
@@ -728,7 +748,7 @@
|
|
|
728
748
|
}
|
|
729
749
|
|
|
730
750
|
.ss-avatar-canvas {
|
|
731
|
-
border-radius: ${
|
|
751
|
+
border-radius: ${a.borderRadius};
|
|
732
752
|
background: #111;
|
|
733
753
|
touch-action: none;
|
|
734
754
|
max-width: 100%;
|
|
@@ -743,7 +763,7 @@
|
|
|
743
763
|
|
|
744
764
|
.ss-avatar-zoom-label {
|
|
745
765
|
font-size: 13px;
|
|
746
|
-
color: ${
|
|
766
|
+
color: ${a.colorTextSecondary};
|
|
747
767
|
flex-shrink: 0;
|
|
748
768
|
}
|
|
749
769
|
|
|
@@ -752,7 +772,7 @@
|
|
|
752
772
|
height: 4px;
|
|
753
773
|
-webkit-appearance: none;
|
|
754
774
|
appearance: none;
|
|
755
|
-
background: ${
|
|
775
|
+
background: ${a.colorInputBorder};
|
|
756
776
|
border-radius: 2px;
|
|
757
777
|
outline: none;
|
|
758
778
|
}
|
|
@@ -762,7 +782,7 @@
|
|
|
762
782
|
width: 16px;
|
|
763
783
|
height: 16px;
|
|
764
784
|
border-radius: 50%;
|
|
765
|
-
background: ${
|
|
785
|
+
background: ${a.colorPrimary};
|
|
766
786
|
cursor: pointer;
|
|
767
787
|
}
|
|
768
788
|
|
|
@@ -770,20 +790,20 @@
|
|
|
770
790
|
width: 16px;
|
|
771
791
|
height: 16px;
|
|
772
792
|
border-radius: 50%;
|
|
773
|
-
background: ${
|
|
793
|
+
background: ${a.colorPrimary};
|
|
774
794
|
cursor: pointer;
|
|
775
795
|
border: none;
|
|
776
796
|
}
|
|
777
797
|
|
|
778
798
|
/* Dropzone */
|
|
779
799
|
.ss-avatar-dropzone {
|
|
780
|
-
border: 2px dashed ${
|
|
781
|
-
border-radius: ${
|
|
800
|
+
border: 2px dashed ${a.colorInputBorder};
|
|
801
|
+
border-radius: ${a.borderRadius};
|
|
782
802
|
padding: 40px 24px;
|
|
783
803
|
text-align: center;
|
|
784
804
|
cursor: pointer;
|
|
785
805
|
transition: border-color 0.15s, background 0.15s;
|
|
786
|
-
color: ${
|
|
806
|
+
color: ${a.colorTextSecondary};
|
|
787
807
|
display: flex;
|
|
788
808
|
flex-direction: column;
|
|
789
809
|
align-items: center;
|
|
@@ -792,8 +812,8 @@
|
|
|
792
812
|
|
|
793
813
|
.ss-avatar-dropzone:hover,
|
|
794
814
|
.ss-avatar-dropzone-active {
|
|
795
|
-
border-color: ${
|
|
796
|
-
background: ${
|
|
815
|
+
border-color: ${a.colorPrimary};
|
|
816
|
+
background: ${a.colorPrimary}08;
|
|
797
817
|
}
|
|
798
818
|
|
|
799
819
|
.ss-avatar-dropzone svg {
|
|
@@ -809,7 +829,7 @@
|
|
|
809
829
|
|
|
810
830
|
.ss-dropdown-divider {
|
|
811
831
|
height: 1px;
|
|
812
|
-
background: ${
|
|
832
|
+
background: ${a.colorInputBorder};
|
|
813
833
|
margin: 4px 0;
|
|
814
834
|
}
|
|
815
835
|
|
|
@@ -830,4 +850,1194 @@
|
|
|
830
850
|
font-size: 13px;
|
|
831
851
|
padding: 6px 12px;
|
|
832
852
|
}
|
|
833
|
-
`}function z({children:e,appearance:t}){const r=a.useRef(null),[i,n]=a.useState(null);a.useEffect(()=>{var x;if(!r.current||r.current.shadowRoot){n(((x=r.current)==null?void 0:x.shadowRoot)??null);return}const d=r.current.attachShadow({mode:"open"}),u=F(t),l=document.createElement("style");l.textContent=R(u),d.appendChild(l);const o=document.createElement("div");d.appendChild(o),n(d)},[]),a.useEffect(()=>{if(!i)return;const d=i.querySelector("style");if(d){const u=F(t);d.textContent=R(u)}},[t,i]);const c=(i==null?void 0:i.querySelector("div"))??null;return s.jsx("div",{ref:r,style:{display:"contents"},children:c&&cs.createPortal(e,c)})}function W(){const{client:e,user:t,isLoaded:r}=C();return{isLoaded:r,isSignedIn:!!t,user:t,signOut:a.useCallback(()=>e.auth.signOut(),[e]),getToken:a.useCallback(()=>e.auth.getToken(),[e])}}function xs(){const{user:e,isLoaded:t}=C();return{user:e,isLoaded:t}}function H(){const{client:e}=C(),[t,r]=a.useState(!1),[i,n]=a.useState(null),c=a.useCallback(async(l,o)=>{r(!0),n(null);try{return await e.auth.signIn(l,o)}catch(x){return n(x instanceof Error?x.message:"Sign in failed"),null}finally{r(!1)}},[e]),d=a.useCallback(async l=>{r(!0),n(null);try{return await e.auth.signInWithOAuth(l)}catch(o){return n(o instanceof Error?o.message:"OAuth sign in failed"),null}finally{r(!1)}},[e]),u=a.useCallback(async(l,o)=>{r(!0),n(null);try{return await e.auth.submitMfaCode(l,o)}catch(x){return n(x instanceof Error?x.message:"MFA verification failed"),null}finally{r(!1)}},[e]);return{signIn:c,signInWithOAuth:d,submitMfaCode:u,isLoading:t,error:i,setError:n}}function Q(){const{client:e}=C(),[t,r]=a.useState(!1),[i,n]=a.useState(null);return{signUp:a.useCallback(async(d,u)=>{r(!0),n(null);try{return await e.auth.signUp(d,u)}catch(l){return n(l instanceof Error?l.message:"Sign up failed"),null}finally{r(!1)}},[e]),isLoading:t,error:i,setError:n}}function G(){const{client:e}=C(),[t,r]=a.useState([]),[i,n]=a.useState(null),[c,d]=a.useState([]),[u,l]=a.useState(!1),[o,x]=a.useState(null),p=a.useCallback(async()=>{l(!0),x(null);try{const f=await e.auth.listOrgs();r(f)}catch(f){x(f instanceof Error?f.message:"Failed to load organizations")}finally{l(!1)}},[e]);a.useEffect(()=>{p()},[p]);const g=a.useCallback(async f=>{try{const b=await e.auth.getOrg(f);n(b);const v=await e.auth.listMembers(f);d(v)}catch(b){x(b instanceof Error?b.message:"Failed to load organization")}},[e]),h=a.useCallback(async(f,b)=>{try{const v=await e.auth.createOrg(f,b);return r(y=>[...y,v]),v}catch(v){return x(v instanceof Error?v.message:"Failed to create organization"),null}},[e]);return{orgs:t,selectedOrg:i,members:c,isLoading:u,error:o,refresh:p,selectOrg:g,createOrg:h}}function _(){const{client:e,user:t}=C(),[r,i]=a.useState(!1),[n,c]=a.useState(null),[d,u]=a.useState(null),l=a.useCallback(async p=>{i(!0),c(null),u(null);try{const g=await e.auth.updateProfile(p);return u("Profile updated"),g}catch(g){return c(g instanceof Error?g.message:"Failed to update profile"),null}finally{i(!1)}},[e]),o=a.useCallback(async(p,g)=>{i(!0),c(null),u(null);try{return await e.auth.changePassword(p,g),u("Password changed successfully"),!0}catch(h){return c(h instanceof Error?h.message:"Failed to change password"),!1}finally{i(!1)}},[e]),x=a.useCallback(async p=>{i(!0),c(null),u(null);try{const g=await e.auth.uploadAvatar(p);return u("Avatar updated"),g}catch(g){return c(g instanceof Error?g.message:"Failed to upload avatar"),null}finally{i(!1)}},[e]);return{user:t,updateProfile:l,uploadAvatar:x,changePassword:o,isLoading:r,error:n,success:d,setError:c,setSuccess:u}}const J='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>',Y='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor"/></svg>';function ms({appearance:e,signUpUrl:t,onSignUp:r}){const{appearance:i,settings:n}=C(),{signIn:c,signInWithOAuth:d,submitMfaCode:u,isLoading:l,error:o,setError:x}=H(),p=e??i,[g,h]=a.useState(""),[f,b]=a.useState(""),[v,y]=a.useState(!1),[m,j]=a.useState(""),[N,w]=a.useState(""),P=a.useCallback(async E=>{if(E.preventDefault(),v){await u(m,N);return}const S=await c(g,f);S&&M.isMfaRequired(S)&&(j(S.mfaToken),y(!0),x(null))},[g,f,v,m,N,c,u,x]),k=a.useCallback(async E=>{await d(E)},[d]),T=(n==null?void 0:n.googleEnabled)||(n==null?void 0:n.githubEnabled);return s.jsx(z,{appearance:p,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Sign in"}),!v&&s.jsxs(s.Fragment,{children:[(n==null?void 0:n.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>k("google"),disabled:l,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:J}}),"Continue with Google"]}),(n==null?void 0:n.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>k("github"),disabled:l,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:Y}}),"Continue with GitHub"]}),T&&s.jsx("div",{className:"ss-divider",children:"or"})]}),o&&s.jsx("div",{className:"ss-global-error",children:o}),s.jsxs("form",{onSubmit:P,children:[v?s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-mfa-code",children:"Authentication code"}),s.jsx("input",{id:"ss-mfa-code",className:"ss-input",type:"text",inputMode:"numeric",autoComplete:"one-time-code",placeholder:"Enter 6-digit code",value:N,onChange:E=>w(E.target.value),autoFocus:!0})]}):s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-email",children:"Email"}),s.jsx("input",{id:"ss-email",className:"ss-input",type:"email",autoComplete:"email",placeholder:"you@example.com",value:g,onChange:E=>h(E.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-password",children:"Password"}),s.jsx("input",{id:"ss-password",className:"ss-input",type:"password",autoComplete:"current-password",placeholder:"Enter your password",value:f,onChange:E=>b(E.target.value),required:!0})]})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:l,children:[l&&s.jsx("span",{className:"ss-spinner"}),v?"Verify":"Continue"]})]}),v&&s.jsx("div",{className:"ss-footer",children:s.jsx("span",{className:"ss-link",onClick:()=>{y(!1),w(""),x(null)},children:"Back to sign in"})}),!v&&s.jsxs("div",{className:"ss-footer",children:["Don't have an account?"," ",r?s.jsx("span",{className:"ss-link",onClick:r,children:"Sign up"}):t?s.jsx("a",{className:"ss-link",href:t,children:"Sign up"}):s.jsx("span",{className:"ss-link",children:"Sign up"})]})]})})}function gs({appearance:e,signInUrl:t,onSignIn:r}){const{appearance:i,settings:n}=C(),{signUp:c,isLoading:d,error:u,setError:l}=Q(),{signInWithOAuth:o}=H(),x=e??i,[p,g]=a.useState(""),[h,f]=a.useState(""),[b,v]=a.useState(""),[y,m]=a.useState(null),j=a.useCallback(async k=>{if(k.preventDefault(),m(null),h!==b){m("Passwords do not match");return}const T=(n==null?void 0:n.passwordMinLength)??8;if(h.length<T){m(`Password must be at least ${T} characters`);return}await c(p,h)},[p,h,b,n,c]),N=a.useCallback(async k=>{await o(k)},[o]),w=(n==null?void 0:n.googleEnabled)||(n==null?void 0:n.githubEnabled),P=y||u;return s.jsx(z,{appearance:x,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Create account"}),(n==null?void 0:n.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>N("google"),disabled:d,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:J}}),"Continue with Google"]}),(n==null?void 0:n.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>N("github"),disabled:d,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:Y}}),"Continue with GitHub"]}),w&&s.jsx("div",{className:"ss-divider",children:"or"}),P&&s.jsx("div",{className:"ss-global-error",children:P}),s.jsxs("form",{onSubmit:j,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-signup-email",children:"Email"}),s.jsx("input",{id:"ss-signup-email",className:"ss-input",type:"email",autoComplete:"email",placeholder:"you@example.com",value:p,onChange:k=>g(k.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-signup-password",children:"Password"}),s.jsx("input",{id:"ss-signup-password",className:"ss-input",type:"password",autoComplete:"new-password",placeholder:"Create a password",value:h,onChange:k=>{f(k.target.value),m(null)},required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-signup-confirm",children:"Confirm password"}),s.jsx("input",{id:"ss-signup-confirm",className:"ss-input",type:"password",autoComplete:"new-password",placeholder:"Confirm your password",value:b,onChange:k=>{v(k.target.value),m(null)},required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:d,children:[d&&s.jsx("span",{className:"ss-spinner"}),"Create account"]})]}),s.jsxs("div",{className:"ss-footer",children:["Already have an account?"," ",r?s.jsx("span",{className:"ss-link",onClick:r,children:"Sign in"}):t?s.jsx("a",{className:"ss-link",href:t,children:"Sign in"}):s.jsx("span",{className:"ss-link",children:"Sign in"})]})]})})}const $=256,D=112;function hs({file:e,onCrop:t,onCancel:r}){const i=a.useRef(null),n=a.useRef(null),[c,d]=a.useState(1),[u,l]=a.useState({x:0,y:0}),[o,x]=a.useState(!1),p=a.useRef({x:0,y:0,ox:0,oy:0}),[g,h]=a.useState(!1);a.useEffect(()=>{const m=new Image,j=URL.createObjectURL(e);return m.onload=()=>{n.current=m,h(!0),l({x:0,y:0}),d(1)},m.src=j,()=>URL.revokeObjectURL(j)},[e]),a.useEffect(()=>{if(!g||!n.current||!i.current)return;const m=i.current.getContext("2d");if(!m)return;const j=n.current;m.clearRect(0,0,$,$),m.fillStyle="#111",m.fillRect(0,0,$,$);const N=Math.max($/j.width,$/j.height)*c,w=j.width*N,P=j.height*N,k=($-w)/2+u.x,T=($-P)/2+u.y;m.save(),m.beginPath(),m.arc($/2,$/2,D,0,Math.PI*2),m.clip(),m.drawImage(j,k,T,w,P),m.restore(),m.save(),m.fillStyle="rgba(0, 0, 0, 0.6)",m.fillRect(0,0,$,$),m.globalCompositeOperation="destination-out",m.beginPath(),m.arc($/2,$/2,D,0,Math.PI*2),m.fill(),m.restore(),m.save(),m.beginPath(),m.arc($/2,$/2,D,0,Math.PI*2),m.clip(),m.drawImage(j,k,T,w,P),m.restore(),m.strokeStyle="rgba(255, 255, 255, 0.6)",m.lineWidth=2,m.beginPath(),m.arc($/2,$/2,D,0,Math.PI*2),m.stroke()},[c,u,g]);const f=a.useCallback(m=>{x(!0),p.current={x:m.clientX,y:m.clientY,ox:u.x,oy:u.y},m.target.setPointerCapture(m.pointerId)},[u]),b=a.useCallback(m=>{o&&l({x:p.current.ox+(m.clientX-p.current.x),y:p.current.oy+(m.clientY-p.current.y)})},[o]),v=a.useCallback(()=>x(!1),[]),y=a.useCallback(()=>{if(!n.current)return;const m=document.createElement("canvas"),j=D*2;m.width=j,m.height=j;const N=m.getContext("2d");if(!N)return;const w=n.current,P=Math.max($/w.width,$/w.height)*c,k=w.width*P,T=w.height*P,E=($-k)/2+u.x-($/2-D),S=($-T)/2+u.y-($/2-D);N.beginPath(),N.arc(D,D,D,0,Math.PI*2),N.clip(),N.drawImage(w,E,S,k,T),m.toBlob(L=>{L&&t(L)},"image/png")},[c,u,t]);return s.jsxs("div",{className:"ss-avatar-cropper",children:[s.jsx("canvas",{ref:i,width:$,height:$,className:"ss-avatar-canvas",onPointerDown:f,onPointerMove:b,onPointerUp:v,style:{cursor:o?"grabbing":"grab"}}),s.jsxs("div",{className:"ss-avatar-zoom",children:[s.jsx("span",{className:"ss-avatar-zoom-label",children:"Zoom"}),s.jsx("input",{type:"range",min:"1",max:"3",step:"0.01",value:c,onChange:m=>d(parseFloat(m.target.value)),className:"ss-avatar-zoom-slider"})]}),s.jsxs("div",{className:"ss-btn-group",children:[s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger ss-btn-sm",onClick:r,children:"Cancel"}),s.jsx("button",{type:"button",className:"ss-btn ss-btn-primary ss-btn-sm",onClick:y,children:"Save"})]})]})}function Z({onUpload:e,onClose:t,isLoading:r}){const[i,n]=a.useState(null),[c,d]=a.useState(!1),[u,l]=a.useState(null),o=a.useRef(null),x=a.useCallback(h=>{if(!h.type.startsWith("image/")){l("Please select an image file");return}if(h.size>5*1024*1024){l("Image must be smaller than 5 MB");return}l(null),n(h)},[]),p=a.useCallback(h=>{h.preventDefault(),d(!1);const f=h.dataTransfer.files[0];f&&x(f)},[x]),g=a.useCallback(async h=>{await e(h)},[e]);return s.jsx("div",{className:"ss-modal-overlay",onClick:h=>{h.target===h.currentTarget&&t()},children:s.jsxs("div",{className:"ss-modal",children:[s.jsxs("div",{className:"ss-modal-header",children:[s.jsx("span",{className:"ss-modal-title",children:"Upload Avatar"}),s.jsx("button",{type:"button",className:"ss-modal-close",onClick:t,children:"✕"})]}),u&&s.jsx("div",{className:"ss-global-error",children:u}),i?s.jsx(hs,{file:i,onCrop:g,onCancel:()=>n(null)}):s.jsxs("div",{className:`ss-avatar-dropzone${c?" ss-avatar-dropzone-active":""}`,onDragOver:h=>{h.preventDefault(),d(!0)},onDragLeave:()=>d(!1),onDrop:p,onClick:()=>{var h;return(h=o.current)==null?void 0:h.click()},children:[s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:[s.jsx("path",{d:"M12 16a4 4 0 100-8 4 4 0 000 8z"}),s.jsx("path",{d:"M3 16.8V9.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 6 5.08 6 6.2 6h.382c.246 0 .37 0 .482-.022a1 1 0 00.513-.29c.08-.082.148-.186.284-.392l.079-.118C8.08 4.968 8.15 4.863 8.234 4.77a2 2 0 01.965-.61C9.346 4.1 9.508 4.1 9.834 4.1h4.332c.326 0 .488 0 .636.06a2 2 0 01.965.61c.083.094.153.198.293.408l.079.118c.136.206.204.31.284.392a1 1 0 00.513.29c.112.022.236.022.482.022h.382c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 7.52 21 8.08 21 9.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 20 18.92 20 17.8 20H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 18.48 3 17.92 3 16.8z"})]}),s.jsx("span",{children:"Drop image here or click to browse"}),s.jsx("input",{ref:o,type:"file",accept:"image/*",style:{display:"none"},onChange:h=>{var f;(f=h.target.files)!=null&&f[0]&&x(h.target.files[0])}})]}),r&&s.jsx("div",{className:"ss-loading",children:"Uploading..."})]})})}function bs({appearance:e}){const{appearance:t}=C(),{user:r,signOut:i}=W(),n=e??t,[c,d]=a.useState(!1),[u,l]=a.useState(!1),o=a.useRef(null),x=a.useCallback(g=>{o.current&&!g.composedPath().includes(o.current)&&d(!1)},[]);if(a.useEffect(()=>{if(c){const g=setTimeout(()=>{document.addEventListener("click",x)},0);return()=>{clearTimeout(g),document.removeEventListener("click",x)}}},[c,x]),!r)return null;const p=(r.name||r.email).charAt(0).toUpperCase();return s.jsx(z,{appearance:n,children:s.jsxs("div",{className:"ss-user-btn",ref:o,children:[s.jsx("button",{type:"button",className:"ss-avatar",onClick:()=>d(!c),"aria-label":"User menu",children:r.avatarUrl?s.jsx("img",{src:r.avatarUrl,alt:"",style:{width:"100%",height:"100%",borderRadius:"50%",objectFit:"cover"}}):p}),c&&s.jsxs("div",{className:"ss-dropdown",children:[s.jsxs("div",{className:"ss-dropdown-header",children:[r.name&&s.jsx("div",{style:{fontWeight:600,fontSize:"14px",color:"inherit"},children:r.name}),s.jsx("div",{className:"ss-dropdown-email",children:r.email})]}),s.jsx("button",{type:"button",className:"ss-dropdown-item",onClick:()=>{d(!1),l(!0)},children:"Profile"}),s.jsx("button",{type:"button",className:"ss-dropdown-item ss-dropdown-item-danger",onClick:async()=>{d(!1),await i()},children:"Sign out"})]}),u&&s.jsx(fs,{onClose:()=>l(!1)})]})})}function fs({onClose:e}){const{user:t,updateProfile:r,uploadAvatar:i,changePassword:n,isLoading:c,error:d,success:u,setError:l,setSuccess:o}=_(),[x,p]=a.useState((t==null?void 0:t.name)??""),[g,h]=a.useState((t==null?void 0:t.avatarUrl)??""),[f,b]=a.useState(!1),[v,y]=a.useState(""),[m,j]=a.useState(""),[N,w]=a.useState(""),[P,k]=a.useState(null),T=a.useCallback(async I=>{I.preventDefault(),l(null),o(null),await r({name:x,avatarUrl:g||void 0})},[x,g,r,l,o]),E=a.useCallback(async I=>{const A=await i(I);A&&(h(A.avatarUrl),b(!1))},[i]),S=a.useCallback(async I=>{if(I.preventDefault(),k(null),l(null),o(null),m!==N){k("Passwords do not match");return}if(m.length<8){k("Password must be at least 8 characters");return}await n(v,m)&&(y(""),j(""),w(""))},[v,m,N,n,l,o]),L=(t==null?void 0:t.provider)==="email";return s.jsx("div",{className:"ss-modal-overlay",onClick:I=>{I.target===I.currentTarget&&e()},children:s.jsxs("div",{className:"ss-modal",children:[s.jsxs("div",{className:"ss-modal-header",children:[s.jsx("span",{className:"ss-modal-title",children:"Profile"}),s.jsx("button",{type:"button",className:"ss-modal-close",onClick:e,children:"✕"})]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),u&&s.jsx("div",{className:"ss-success-msg",children:u}),s.jsxs("div",{className:"ss-avatar-preview ss-avatar-hoverable",onClick:()=>b(!0),title:"Click to change avatar",children:[g?s.jsx("img",{src:g,alt:""}):(x||(t==null?void 0:t.email)||"?").charAt(0).toUpperCase(),s.jsx("div",{className:"ss-avatar-overlay",children:s.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[s.jsx("path",{d:"M12 16a4 4 0 100-8 4 4 0 000 8z"}),s.jsx("path",{d:"M3 16.8V9.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 6 5.08 6 6.2 6h.382c.246 0 .37 0 .482-.022a1 1 0 00.513-.29c.08-.082.148-.186.284-.392l.079-.118C8.08 4.968 8.15 4.863 8.234 4.77a2 2 0 01.965-.61C9.346 4.1 9.508 4.1 9.834 4.1h4.332c.326 0 .488 0 .636.06a2 2 0 01.965.61c.083.094.153.198.293.408l.079.118c.136.206.204.31.284.392a1 1 0 00.513.29c.112.022.236.022.482.022h.382c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 7.52 21 8.08 21 9.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 20 18.92 20 17.8 20H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 18.48 3 17.92 3 16.8z"})]})})]}),s.jsxs("form",{onSubmit:T,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Name"}),s.jsx("input",{className:"ss-input",type:"text",placeholder:"Your name",value:x,onChange:I=>p(I.target.value)})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Email"}),s.jsx("input",{className:"ss-input ss-input-readonly",type:"email",value:(t==null?void 0:t.email)??"",disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Provider"}),s.jsx("input",{className:"ss-input ss-input-readonly",type:"text",value:(t==null?void 0:t.provider)??"",disabled:!0,readOnly:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:c,children:[c&&s.jsx("span",{className:"ss-spinner"}),"Save changes"]})]}),L&&s.jsxs("div",{className:"ss-modal-section",children:[s.jsx("div",{className:"ss-modal-section-title",children:"Change password"}),P&&s.jsx("div",{className:"ss-global-error",children:P}),s.jsxs("form",{onSubmit:S,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Current password"}),s.jsx("input",{className:"ss-input",type:"password",value:v,onChange:I=>y(I.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"New password"}),s.jsx("input",{className:"ss-input",type:"password",value:m,onChange:I=>j(I.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Confirm new password"}),s.jsx("input",{className:"ss-input",type:"password",value:N,onChange:I=>w(I.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:c,children:[c&&s.jsx("span",{className:"ss-spinner"}),"Update password"]})]})]}),f&&s.jsx(Z,{onUpload:E,onClose:()=>b(!1),isLoading:c})]})})}function ys({appearance:e}){const{appearance:t}=C(),{user:r,signOut:i}=W(),{updateProfile:n,uploadAvatar:c,changePassword:d,isLoading:u,error:l,success:o,setError:x,setSuccess:p}=_(),g=e??t,[h,f]=a.useState((r==null?void 0:r.name)??""),[b,v]=a.useState((r==null?void 0:r.avatarUrl)??""),[y,m]=a.useState(!1),[j,N]=a.useState(""),[w,P]=a.useState(""),[k,T]=a.useState(""),[E,S]=a.useState(null),L=a.useCallback(async B=>{B.preventDefault(),x(null),p(null),await n({name:h,avatarUrl:b||void 0})},[h,b,n,x,p]),I=a.useCallback(async B=>{const q=await c(B);q&&(v(q.avatarUrl),m(!1))},[c]),A=a.useCallback(async B=>{if(B.preventDefault(),S(null),x(null),p(null),w!==k){S("Passwords do not match");return}if(w.length<8){S("Password must be at least 8 characters");return}await d(j,w)&&(N(""),P(""),T(""))},[j,w,k,d,x,p]);if(!r)return null;const ls=r.provider==="email";return s.jsx(z,{appearance:g,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Profile"}),l&&s.jsx("div",{className:"ss-global-error",children:l}),o&&s.jsx("div",{className:"ss-success-msg",children:o}),s.jsxs("div",{className:"ss-avatar-preview ss-avatar-hoverable",style:{margin:"0 auto 16px"},onClick:()=>m(!0),title:"Click to change avatar",children:[b?s.jsx("img",{src:b,alt:""}):(h||r.email).charAt(0).toUpperCase(),s.jsx("div",{className:"ss-avatar-overlay",children:s.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[s.jsx("path",{d:"M12 16a4 4 0 100-8 4 4 0 000 8z"}),s.jsx("path",{d:"M3 16.8V9.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 6 5.08 6 6.2 6h.382c.246 0 .37 0 .482-.022a1 1 0 00.513-.29c.08-.082.148-.186.284-.392l.079-.118C8.08 4.968 8.15 4.863 8.234 4.77a2 2 0 01.965-.61C9.346 4.1 9.508 4.1 9.834 4.1h4.332c.326 0 .488 0 .636.06a2 2 0 01.965.61c.083.094.153.198.293.408l.079.118c.136.206.204.31.284.392a1 1 0 00.513.29c.112.022.236.022.482.022h.382c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 7.52 21 8.08 21 9.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 20 18.92 20 17.8 20H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 18.48 3 17.92 3 16.8z"})]})})]}),s.jsxs("form",{onSubmit:L,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Name"}),s.jsx("input",{className:"ss-input",type:"text",placeholder:"Your name",value:h,onChange:B=>f(B.target.value)})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Email"}),s.jsx("input",{className:"ss-input ss-input-readonly",type:"email",value:r.email,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Provider"}),s.jsx("input",{className:"ss-input ss-input-readonly",type:"text",value:r.provider,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Email verified"}),s.jsx("input",{className:"ss-input ss-input-readonly",type:"text",value:r.emailVerified?"Yes":"No",disabled:!0,readOnly:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:u,children:[u&&s.jsx("span",{className:"ss-spinner"}),"Save changes"]})]}),ls&&s.jsxs("div",{className:"ss-modal-section",children:[s.jsx("div",{className:"ss-modal-section-title",children:"Change password"}),E&&s.jsx("div",{className:"ss-global-error",children:E}),s.jsxs("form",{onSubmit:A,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Current password"}),s.jsx("input",{className:"ss-input",type:"password",value:j,onChange:B=>N(B.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"New password"}),s.jsx("input",{className:"ss-input",type:"password",value:w,onChange:B=>P(B.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Confirm new password"}),s.jsx("input",{className:"ss-input",type:"password",value:k,onChange:B=>T(B.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:u,children:[u&&s.jsx("span",{className:"ss-spinner"}),"Update password"]})]})]}),s.jsx("div",{style:{marginTop:"24px"},children:s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger",onClick:()=>i(),children:"Sign out"})}),y&&s.jsx(Z,{onUpload:I,onClose:()=>m(!1),isLoading:u})]})})}function vs({appearance:e,onOrgChange:t}){const{appearance:r}=C(),{orgs:i,selectedOrg:n,selectOrg:c,createOrg:d,isLoading:u}=G(),l=e??r,[o,x]=a.useState(!1),[p,g]=a.useState(!1),[h,f]=a.useState(""),[b,v]=a.useState(""),[y,m]=a.useState(null),[j,N]=a.useState(!1),w=a.useRef(null),P=a.useCallback(S=>{w.current&&!S.composedPath().includes(w.current)&&(x(!1),g(!1))},[]);a.useEffect(()=>{if(o){const S=setTimeout(()=>{document.addEventListener("click",P)},0);return()=>{clearTimeout(S),document.removeEventListener("click",P)}}},[o,P]);const k=a.useCallback(S=>{f(S),v(S.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,""))},[]),T=a.useCallback(async S=>{S.preventDefault(),m(null),N(!0);try{const L=await d(h,b);L&&(await c(L.id),t==null||t(L),g(!1),f(""),v(""),x(!1))}catch(L){m(L instanceof Error?L.message:"Failed to create organization")}finally{N(!1)}},[h,b,d,c,t]);if(u)return null;const E=(n==null?void 0:n.name)??(i.length===0?"No organization":"Select organization");return s.jsx(z,{appearance:l,children:s.jsxs("div",{className:"ss-user-btn",ref:w,children:[s.jsxs("button",{type:"button",className:"ss-btn ss-btn-org-switcher",onClick:()=>x(!o),children:[E,s.jsx("span",{className:"ss-chevron",children:o?"▲":"▼"})]}),o&&s.jsxs("div",{className:"ss-dropdown ss-dropdown-org",children:[i.map(S=>s.jsx("button",{type:"button",className:`ss-dropdown-item ${(n==null?void 0:n.id)===S.id?"ss-dropdown-item-active":""}`,onClick:async()=>{x(!1),g(!1),await c(S.id),t==null||t(S)},children:S.name},S.id)),s.jsx("div",{className:"ss-dropdown-divider"}),p?s.jsxs("div",{className:"ss-inline-form",children:[y&&s.jsx("div",{className:"ss-global-error",style:{marginBottom:"8px",fontSize:"12px"},children:y}),s.jsxs("form",{onSubmit:T,children:[s.jsx("div",{className:"ss-field",children:s.jsx("input",{className:"ss-input",type:"text",placeholder:"Organization name",value:h,onChange:S=>k(S.target.value),required:!0,autoFocus:!0})}),s.jsx("div",{className:"ss-field",children:s.jsx("input",{className:"ss-input",type:"text",placeholder:"org-slug",value:b,onChange:S=>v(S.target.value),required:!0})}),s.jsxs("div",{className:"ss-btn-group",style:{marginTop:"8px"},children:[s.jsx("button",{type:"button",className:"ss-btn ss-btn-sm ss-btn-current",onClick:()=>{g(!1),m(null)},children:"Cancel"}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:j,children:[j&&s.jsx("span",{className:"ss-spinner"}),"Create"]})]})]})]}):s.jsx("button",{type:"button",className:"ss-dropdown-item",onClick:()=>g(!0),style:{fontWeight:500},children:"+ Create organization"})]})]})})}function js(e,t="USD"){return new Intl.NumberFormat("en-US",{style:"currency",currency:t,minimumFractionDigits:e%100===0?0:2}).format(e/100)}function ws({plans:e,currentPlanId:t,onSelectPlan:r,interval:i,appearance:n}){const{appearance:c}=C(),d=n??c,u=i?e.filter(l=>l.interval===i||l.isFree):e;return s.jsx(z,{appearance:d,children:s.jsx("div",{className:"ss-pricing-grid",children:u.map(l=>{const o=l.id===t;return s.jsxs("div",{className:`ss-pricing-card ${o?"ss-pricing-card-current":""}`,children:[s.jsxs("div",{className:"ss-pricing-header",children:[s.jsx("h3",{className:"ss-pricing-name",children:l.name}),l.trialDays>0&&s.jsxs("span",{className:"ss-badge ss-badge-trialing",children:[l.trialDays,"-day trial"]}),l.isFree&&s.jsx("span",{className:"ss-badge ss-badge-active",children:"Free"})]}),s.jsx("div",{className:"ss-pricing-price",children:l.isFree?s.jsx("span",{className:"ss-pricing-amount",children:"Free"}):s.jsxs(s.Fragment,{children:[s.jsx("span",{className:"ss-pricing-amount",children:js(l.amountCents,l.currency)}),s.jsxs("span",{className:"ss-pricing-interval",children:["/",l.interval]})]})}),l.description&&s.jsx("p",{className:"ss-pricing-desc",children:l.description}),l.features.length>0&&s.jsx("ul",{className:"ss-pricing-features",children:l.features.map((x,p)=>s.jsxs("li",{className:"ss-pricing-feature",children:[s.jsx("span",{className:"ss-check",children:"✓"})," ",x]},p))}),s.jsx("button",{type:"button",className:`ss-btn ${o?"ss-btn-current":"ss-btn-primary"}`,disabled:o,onClick:()=>r(l.id),children:o?"Current plan":"Select plan"})]},l.id)})})})}function Ns(){const{client:e}=C();return{billing:e.billing}}function U(e){const{client:t}=C();return a.useMemo(()=>{if(e){const r=new M.Transport("https://api.saas-support.com/v1",{type:"portalToken",token:e});return new M.BillingClient(r)}return t.billing},[t,e])}function X(e,t){const r=U(t),[i,n]=a.useState(null),[c,d]=a.useState(!0),[u,l]=a.useState(null),o=a.useCallback(async()=>{d(!0),l(null);try{const x=await r.getCustomer(e);n(x)}catch(x){l(x instanceof Error?x.message:"Failed to load subscription")}finally{d(!1)}},[r,e]);return a.useEffect(()=>{o()},[o]),{customer:i,isLoading:c,error:u,refresh:o}}function K(e,t){const r=U(t),[i,n]=a.useState([]),[c,d]=a.useState(!0),[u,l]=a.useState(null),o=a.useCallback(async()=>{d(!0),l(null);try{const x=await r.getInvoices(e);n(x)}catch(x){l(x instanceof Error?x.message:"Failed to load invoices")}finally{d(!1)}},[r,e]);return a.useEffect(()=>{o()},[o]),{invoices:i,isLoading:c,error:u,refresh:o}}function ss(e,t){const r=U(t),[i,n]=a.useState([]),[c,d]=a.useState(!0),[u,l]=a.useState(null),o=a.useCallback(async()=>{d(!0),l(null);try{const x=await r.getCurrentUsage(e);n(x)}catch(x){l(x instanceof Error?x.message:"Failed to load usage")}finally{d(!1)}},[r,e]);return a.useEffect(()=>{o()},[o]),{usage:i,isLoading:c,error:u,refresh:o}}const Ss={active:"ss-badge-active"};function es({customerId:e,portalToken:t,onChangePlan:r,onCancel:i,appearance:n}){const{appearance:c}=C(),{customer:d,isLoading:u,error:l}=X(e,t),o=n??c;return s.jsx(z,{appearance:o,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Subscription"}),u&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),l&&s.jsx("div",{className:"ss-global-error",children:l}),d&&!u&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Customer"}),s.jsx("input",{className:"ss-input",value:d.name||d.email,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Status"}),s.jsx("div",{children:s.jsx("span",{className:`ss-badge ${Ss.active}`,children:"Active"})})]}),s.jsxs("div",{className:"ss-btn-group",children:[r&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-primary",onClick:r,children:"Change plan"}),i&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger",onClick:i,children:"Cancel subscription"})]})]})]})})}const Cs={paid:"ss-badge-active",open:"ss-badge-trialing",draft:"ss-badge-paused",void:"ss-badge-canceled",uncollectible:"ss-badge-past-due"};function ks(e){return new Date(e).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function $s(e){return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2}).format(e/100)}function as({customerId:e,portalToken:t,appearance:r}){const{appearance:i}=C(),{invoices:n,isLoading:c,error:d}=K(e,t),u=r??i,l=[...n].sort((o,x)=>new Date(x.createdAt).getTime()-new Date(o.createdAt).getTime());return s.jsx(z,{appearance:u,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Invoices"}),c&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),!c&&l.length===0&&s.jsx("p",{className:"ss-empty",children:"No invoices yet."}),!c&&l.length>0&&s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsxs("tr",{children:[s.jsx("th",{className:"ss-th",children:"Date"}),s.jsx("th",{className:"ss-th",children:"Amount"}),s.jsx("th",{className:"ss-th",children:"Status"}),s.jsx("th",{className:"ss-th",children:"PDF"})]})}),s.jsx("tbody",{children:l.map(o=>s.jsxs("tr",{className:"ss-tr",children:[s.jsx("td",{className:"ss-td",children:ks(o.createdAt)}),s.jsx("td",{className:"ss-td",children:$s(o.amountCents)}),s.jsx("td",{className:"ss-td",children:s.jsx("span",{className:`ss-badge ${Cs[o.status]||""}`,children:o.status})}),s.jsx("td",{className:"ss-td",children:o.pdfUrl?s.jsx("a",{className:"ss-link",href:o.pdfUrl,target:"_blank",rel:"noopener noreferrer",children:"Download"}):"—"})]},o.id))})]})]})})}function rs({customerId:e,limits:t,portalToken:r,appearance:i}){const{appearance:n}=C(),{usage:c,isLoading:d,error:u}=ss(e,r),l=i??n;return s.jsx(z,{appearance:l,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Usage"}),d&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),u&&s.jsx("div",{className:"ss-global-error",children:u}),!d&&c.length===0&&s.jsx("p",{className:"ss-empty",children:"No usage data."}),!d&&c.map(o=>{const x=t==null?void 0:t[o.metric],p=x?Math.min(100,o.total/x*100):null;return s.jsxs("div",{className:"ss-usage-item",children:[s.jsxs("div",{className:"ss-usage-header",children:[s.jsx("span",{className:"ss-usage-metric",children:o.metric}),s.jsxs("span",{className:"ss-usage-value",children:[o.total.toLocaleString(),x?` / ${x.toLocaleString()}`:""]})]}),p!==null&&s.jsx("div",{className:"ss-progress-bar",children:s.jsx("div",{className:`ss-progress-fill ${p>90?"ss-progress-danger":""}`,style:{width:`${p}%`}})})]},o.metric)})]})})}function Ps({customerId:e,portalToken:t,limits:r,onChangePlan:i,onCancel:n,appearance:c}){const{appearance:d}=C(),u=c??d,[l,o]=a.useState("subscription"),x=[{id:"subscription",label:"Subscription"},{id:"invoices",label:"Invoices"},{id:"usage",label:"Usage"}];return s.jsx(z,{appearance:u,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Billing"}),s.jsx("div",{className:"ss-tab-group",children:x.map(p=>s.jsx("button",{type:"button",className:`ss-tab ${l===p.id?"ss-tab-active":""}`,onClick:()=>o(p.id),children:p.label},p.id))}),s.jsxs("div",{className:"ss-tab-content",children:[l==="subscription"&&s.jsx(es,{customerId:e,portalToken:t,onChangePlan:i,onCancel:n}),l==="invoices"&&s.jsx(as,{customerId:e,portalToken:t}),l==="usage"&&s.jsx(rs,{customerId:e,portalToken:t,limits:r})]})]})})}function Es({customerId:e,portalToken:t,onApplied:r,appearance:i}){const{appearance:n}=C(),c=U(t),d=i??n,[u,l]=a.useState(""),[o,x]=a.useState(!1),[p,g]=a.useState(null),[h,f]=a.useState(null),b=a.useCallback(async v=>{if(v.preventDefault(),!!u.trim()){x(!0),g(null),f(null);try{const y=await c.applyCoupon(e,u.trim());f(`Coupon applied! ${y.discountType==="percent"?`${y.amount}% off`:`$${(y.amount/100).toFixed(2)} off`}`),l(""),r==null||r(y)}catch(y){g(y instanceof Error?y.message:"Invalid coupon code")}finally{x(!1)}}},[c,e,u,r]);return s.jsx(z,{appearance:d,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Apply coupon"}),p&&s.jsx("div",{className:"ss-global-error",children:p}),h&&s.jsx("div",{className:"ss-success-msg",children:h}),s.jsxs("form",{onSubmit:b,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-coupon-code",children:"Coupon code"}),s.jsx("input",{id:"ss-coupon-code",className:"ss-input",type:"text",placeholder:"Enter coupon code",value:u,onChange:v=>l(v.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:o||!u.trim(),children:[o&&s.jsx("span",{className:"ss-spinner"}),"Apply"]})]})]})})}function Is(){const{client:e}=C();return{report:e.report}}function V(){const{client:e}=C(),[t,r]=a.useState(null),[i,n]=a.useState(!1),[c,d]=a.useState(null),u=a.useCallback(async l=>{n(!0),d(null);try{const o=await e.report.executeQuery(l);return r(o),o}catch(o){return d(o instanceof Error?o.message:"Query failed"),null}finally{n(!1)}},[e]);return{result:t,execute:u,isLoading:i,error:c}}function ts(e){const{client:t}=C(),[r,i]=a.useState(null),[n,c]=a.useState(!0),[d,u]=a.useState(null),l=a.useCallback(async()=>{c(!0),u(null);try{const o=await t.report.listQueries(e);i(o)}catch(o){u(o instanceof Error?o.message:"Failed to load queries")}finally{c(!1)}},[t,e]);return a.useEffect(()=>{l()},[l]),{queries:(r==null?void 0:r.data)??[],meta:r==null?void 0:r.meta,isLoading:n,error:d,refresh:l}}function Ts(e){const{client:t}=C(),[r,i]=a.useState(null),[n,c]=a.useState(!0),[d,u]=a.useState(null),l=a.useCallback(async()=>{c(!0),u(null);try{const o=await t.report.getDashboard(e);i(o)}catch(o){u(o instanceof Error?o.message:"Failed to load dashboard")}finally{c(!1)}},[t,e]);return a.useEffect(()=>{l()},[l]),{dashboard:r,isLoading:n,error:d,refresh:l}}function zs(e,t,r="https://api.saas-support.com/v1"){const i=a.useMemo(()=>{const p=new M.Transport(r,{type:"embedToken",token:e});return new M.ReportClient(p)},[e,r]),[n,c]=a.useState(null),[d,u]=a.useState(!0),[l,o]=a.useState(null),x=a.useCallback(async()=>{u(!0),o(null);try{const p=await i.getDashboard(t);c(p)}catch(p){o(p instanceof Error?p.message:"Failed to load dashboard")}finally{u(!1)}},[i,t]);return a.useEffect(()=>{x()},[x]),{dashboard:n,reportClient:i,isLoading:d,error:l,refresh:x}}function Ls({onResult:e,mode:t="both",placeholder:r,appearance:i}){const{appearance:n}=C(),{execute:c,isLoading:d,error:u}=V(),l=i??n,[o,x]=a.useState(""),[p,g]=a.useState(t==="sql"?"sql":"nl"),h=a.useCallback(async f=>{if(f.preventDefault(),!o.trim())return;const v=await c(p==="sql"?{sql:o}:{naturalLanguage:o});v&&(e==null||e(v))},[o,p,c,e]);return s.jsx(z,{appearance:l,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[t==="both"&&s.jsxs("div",{className:"ss-tab-group ss-tab-group-sm",children:[s.jsx("button",{type:"button",className:`ss-tab ${p==="nl"?"ss-tab-active":""}`,onClick:()=>g("nl"),children:"Natural Language"}),s.jsx("button",{type:"button",className:`ss-tab ${p==="sql"?"ss-tab-active":""}`,onClick:()=>g("sql"),children:"SQL"})]}),u&&s.jsx("div",{className:"ss-global-error",children:u}),s.jsxs("form",{onSubmit:h,children:[s.jsx("div",{className:"ss-field",children:s.jsx("textarea",{className:"ss-input ss-query-textarea",placeholder:r??(p==="sql"?"SELECT ...":"Ask a question about your data..."),value:o,onChange:f=>x(f.target.value),rows:3})}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:d||!o.trim(),children:[d&&s.jsx("span",{className:"ss-spinner"}),"Run query"]})]})]})})}function ns({columns:e,rows:t,sortable:r=!0,maxRows:i,appearance:n}){const{appearance:c}=C(),d=n??c,[u,l]=a.useState(null),[o,x]=a.useState("asc"),p=a.useMemo(()=>u?[...t].sort((b,v)=>{const y=b[u],m=v[u];if(y==null&&m==null)return 0;if(y==null)return 1;if(m==null)return-1;if(typeof y=="number"&&typeof m=="number")return o==="asc"?y-m:m-y;const j=String(y),N=String(m);return o==="asc"?j.localeCompare(N):N.localeCompare(j)}):t,[t,u,o]),g=i?p.slice(0,i):p,h=b=>{r&&(u===b?x(v=>v==="asc"?"desc":"asc"):(l(b),x("asc")))};function f(b){return b==null?"":typeof b=="object"?JSON.stringify(b):String(b)}return s.jsx(z,{appearance:d,children:s.jsxs("div",{className:"ss-table-container",children:[s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:e.map(b=>s.jsxs("th",{className:`ss-th ${r?"ss-th-sortable":""} ${u===b?o==="asc"?"ss-sorted-asc":"ss-sorted-desc":""}`,onClick:()=>h(b),children:[b,u===b&&s.jsx("span",{className:"ss-sort-indicator",children:o==="asc"?" ▲":" ▼"})]},b))})}),s.jsx("tbody",{children:g.map((b,v)=>s.jsx("tr",{className:"ss-tr",children:e.map(y=>s.jsx("td",{className:"ss-td",children:f(b[y])},y))},v))})]}),i&&t.length>i&&s.jsxs("div",{className:"ss-table-footer",children:["Showing ",i," of ",t.length," rows"]})]})})}function Bs(e,t="#6366f1"){const r=parseInt(t.replace("#","").slice(0,2),16),i=[];for(let n=0;n<e;n++){const c=(r+n*Math.floor(360/Math.max(e,1)))%360;i.push(`hsl(${c}, 65%, 55%)`)}return i}function Ms({labels:e,values:t,w:r,h:i,colors:n}){const c=Math.max(...t,1),d=40,u=r-d*2,l=i-d*2,o=Math.max(1,u/e.length-4);return s.jsxs("g",{children:[s.jsx("line",{x1:d,y1:i-d,x2:r-d,y2:i-d,stroke:"#ccc",strokeWidth:1}),t.map((x,p)=>{const g=x/c*l,h=d+u/e.length*p+2,f=i-d-g;return s.jsxs("g",{children:[s.jsx("rect",{x:h,y:f,width:o,height:g,fill:n[p%n.length],rx:2}),s.jsx("text",{x:h+o/2,y:i-d+14,textAnchor:"middle",fontSize:10,fill:"#666",children:e[p].length>8?e[p].slice(0,8)+"...":e[p]})]},p)})]})}function Ds({labels:e,values:t,w:r,h:i,colors:n}){const c=Math.max(...t,1),d=40,u=r-d*2,l=i-d*2,o=e.length>1?u/(e.length-1):0,x=t.map((p,g)=>{const h=d+o*g,f=i-d-p/c*l;return`${h},${f}`});return s.jsxs("g",{children:[[.25,.5,.75,1].map(p=>{const g=i-d-p*l;return s.jsx("line",{x1:d,y1:g,x2:r-d,y2:g,stroke:"#eee",strokeWidth:1},p)}),s.jsx("polyline",{points:x.join(" "),fill:"none",stroke:n[0],strokeWidth:2}),t.map((p,g)=>{const h=d+o*g,f=i-d-p/c*l;return s.jsx("circle",{cx:h,cy:f,r:4,fill:n[0]},g)})]})}function As({labels:e,values:t,w:r,h:i,colors:n}){const c=t.reduce((g,h)=>g+h,0)||1,d=r/2,u=i/2-20,l=Math.min(r,i)/2-40,o=2*Math.PI*l;let x=0;const p=t.map((g,h)=>{const f=g/c,b=f*o,v={dash:b,offset:x,color:n[h%n.length],label:e[h],pct:f};return x+=b,v});return s.jsxs("g",{children:[p.map((g,h)=>s.jsx("circle",{cx:d,cy:u,r:l,fill:"none",stroke:g.color,strokeWidth:l*.6,strokeDasharray:`${g.dash} ${o-g.dash}`,strokeDashoffset:-g.offset,transform:`rotate(-90 ${d} ${u})`},h)),s.jsx("g",{transform:`translate(${d-e.length*30}, ${i-20})`,children:p.slice(0,6).map((g,h)=>s.jsxs("g",{transform:`translate(${h*60}, 0)`,children:[s.jsx("rect",{width:10,height:10,fill:g.color,rx:2}),s.jsx("text",{x:14,y:9,fontSize:9,fill:"#666",children:g.label.length>6?g.label.slice(0,6)+"..":g.label})]},h))})]})}function os({type:e,data:t,title:r,width:i=400,height:n=300,appearance:c}){const{appearance:d}=C(),u=c??d,l=a.useMemo(()=>Bs(t.labels.length),[t.labels.length]);return s.jsx(z,{appearance:u,children:s.jsxs("div",{className:"ss-chart-container",children:[r&&s.jsx("h3",{className:"ss-chart-title",children:r}),s.jsxs("svg",{viewBox:`0 0 ${i} ${n}`,width:"100%",style:{maxWidth:i},children:[e==="bar"&&s.jsx(Ms,{labels:t.labels,values:t.values,w:i,h:n,colors:l}),e==="line"&&s.jsx(Ds,{labels:t.labels,values:t.values,w:i,h:n,colors:l}),e==="pie"&&s.jsx(As,{labels:t.labels,values:t.values,w:i,h:n,colors:l})]})]})})}function Us({dashboardId:e,embedToken:t,baseUrl:r,refreshInterval:i,appearance:n}){const c=C(),d=n??(c==null?void 0:c.appearance),u=a.useMemo(()=>{if(t){const y=r??"https://api.saas-support.com/v1",m=new M.Transport(y,{type:"embedToken",token:t});return new M.ReportClient(m)}return c.client.report},[t,r,c]),[l,o]=a.useState([]),[x,p]=a.useState({}),[g,h]=a.useState(!0),[f,b]=a.useState(null),v=a.useCallback(async()=>{h(!0),b(null);try{const y=await u.getDashboard(e),m=JSON.parse(y.layoutJson||"[]");o(m);const j={};for(const N of m)try{const w=await u.listQueries({search:N.queryId,perPage:1});if(w.data.length>0&&w.data[0].generatedSql){const P=await u.executeQuery({sql:w.data[0].generatedSql});j[N.queryId]=P}}catch{}p(j)}catch(y){b(y instanceof Error?y.message:"Failed to load dashboard")}finally{h(!1)}},[u,e]);return a.useEffect(()=>{v()},[v]),a.useEffect(()=>{if(!i||i<=0)return;const y=setInterval(v,i*1e3);return()=>clearInterval(y)},[i,v]),s.jsx(z,{appearance:d,children:s.jsxs("div",{className:"ss-dashboard-grid",children:[g&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading dashboard..."]}),f&&s.jsx("div",{className:"ss-global-error",children:f}),!g&&l.map((y,m)=>{const j=x[y.queryId];if(!j)return null;const N=j.columns.length>=2?{labels:j.rows.map(w=>String(w[j.columns[0]]??"")),values:j.rows.map(w=>Number(w[j.columns[1]]??0))}:{labels:[],values:[]};return s.jsxs("div",{className:"ss-widget",children:[y.title&&s.jsx("h4",{className:"ss-widget-header",children:y.title}),y.chartType==="table"?s.jsx(ns,{columns:j.columns,rows:j.rows,maxRows:50}):s.jsx(os,{type:y.chartType||"bar",data:N,width:y.w,height:y.h})]},m)})]})})}function qs(e){return new Date(e).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function Fs({onSelectQuery:e,onRunQuery:t,appearance:r}){const{appearance:i}=C(),{queries:n,isLoading:c,error:d}=ts(),{execute:u,isLoading:l}=V(),o=r??i,x=a.useCallback(async p=>{if(!p.generatedSql)return;const g=await u({sql:p.generatedSql});g&&(t==null||t(g))},[u,t]);return s.jsx(z,{appearance:o,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Saved Queries"}),c&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),!c&&n.length===0&&s.jsx("p",{className:"ss-empty",children:"No saved queries."}),!c&&n.map(p=>s.jsxs("div",{className:"ss-saved-query-card",onClick:()=>e==null?void 0:e(p),children:[s.jsxs("div",{className:"ss-saved-query-header",children:[s.jsx("span",{className:"ss-saved-query-name",children:p.name}),p.chartType&&s.jsx("span",{className:"ss-badge",children:p.chartType})]}),p.naturalLanguage&&s.jsx("p",{className:"ss-saved-query-desc",children:p.naturalLanguage}),s.jsxs("div",{className:"ss-saved-query-footer",children:[s.jsx("span",{className:"ss-saved-query-date",children:qs(p.createdAt)}),s.jsx("button",{type:"button",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:l||!p.generatedSql,onClick:g=>{g.stopPropagation(),x(p)},children:l?s.jsx("span",{className:"ss-spinner"}):"Run"})]})]},p.id))]})})}function Rs({embedToken:e,dashboardId:t,baseUrl:r="https://api.saas-support.com/v1",refreshInterval:i,appearance:n}){const c=a.useMemo(()=>{const b=new M.Transport(r,{type:"embedToken",token:e});return new M.ReportClient(b)},[e,r]),[d,u]=a.useState([]),[l,o]=a.useState(!0),[x,p]=a.useState(null),g=a.useMemo(()=>F(n),[n]),h=a.useMemo(()=>R(g),[g]),f=a.useCallback(async()=>{o(!0),p(null);try{const b=await c.getDashboard(t),v=JSON.parse(b.layoutJson||"[]"),y=await Promise.all(v.map(async m=>{try{const j=await c.listQueries({search:m.queryId,perPage:1});if(j.data.length>0&&j.data[0].generatedSql){const N=await c.executeQuery({sql:j.data[0].generatedSql});return{...m,result:N}}}catch{}return m}));u(y)}catch(b){p(b instanceof Error?b.message:"Failed to load dashboard")}finally{o(!1)}},[c,t]);return a.useEffect(()=>{f()},[f]),a.useEffect(()=>{if(!i||i<=0)return;const b=setInterval(f,i*1e3);return()=>clearInterval(b)},[i,f]),s.jsx("div",{ref:b=>{if(!b||b.shadowRoot)return;const v=b.attachShadow({mode:"open"}),y=document.createElement("style");y.textContent=h,v.appendChild(y);const m=document.createElement("div");v.appendChild(m)},style:{display:"contents"},children:s.jsxs("div",{className:"ss-dashboard-grid",children:[l&&s.jsx("div",{className:"ss-loading",children:"Loading dashboard..."}),x&&s.jsx("div",{className:"ss-global-error",children:x}),!l&&d.map((b,v)=>{if(!b.result)return null;const{columns:y,rows:m}=b.result;return s.jsxs("div",{className:"ss-widget",children:[b.title&&s.jsx("h4",{className:"ss-widget-header",children:b.title}),s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:y.map(j=>s.jsx("th",{className:"ss-th",children:j},j))})}),s.jsx("tbody",{children:m.slice(0,50).map((j,N)=>s.jsx("tr",{className:"ss-tr",children:y.map(w=>s.jsx("td",{className:"ss-td",children:String(j[w]??"")},w))},N))})]})]},v)})]})})}exports.SaaSError=M.SaaSError;exports.SaaSSupport=M.SaaSSupport;exports.isMfaRequired=M.isMfaRequired;exports.Chart=os;exports.CouponInput=Es;exports.DashboardView=Us;exports.DataTable=ns;exports.InvoiceHistory=as;exports.OrgSwitcher=vs;exports.PaymentPortal=Ps;exports.PricingTable=ws;exports.QueryInput=Ls;exports.ReportEmbed=Rs;exports.SaaSContext=O;exports.SaaSProvider=is;exports.SavedQueryList=Fs;exports.SignIn=ms;exports.SignUp=gs;exports.SubscriptionStatus=es;exports.UsageDisplay=rs;exports.UserButton=bs;exports.UserProfile=ys;exports.useAuth=W;exports.useBilling=Ns;exports.useDashboard=Ts;exports.useEmbedDashboard=zs;exports.useInvoices=K;exports.useOrg=G;exports.useProfile=_;exports.useQuery=V;exports.useReport=Is;exports.useSaaSContext=C;exports.useSavedQueries=ts;exports.useSignIn=H;exports.useSignUp=Q;exports.useSubscription=X;exports.useUsage=ss;exports.useUser=xs;
|
|
853
|
+
|
|
854
|
+
/* ====================== AUTH COMPONENTS ====================== */
|
|
855
|
+
|
|
856
|
+
.material-symbols-outlined {
|
|
857
|
+
font-family: 'Material Symbols Outlined';
|
|
858
|
+
font-weight: normal;
|
|
859
|
+
font-style: normal;
|
|
860
|
+
font-size: 24px;
|
|
861
|
+
line-height: 1;
|
|
862
|
+
letter-spacing: normal;
|
|
863
|
+
text-transform: none;
|
|
864
|
+
display: inline-block;
|
|
865
|
+
white-space: nowrap;
|
|
866
|
+
word-wrap: normal;
|
|
867
|
+
direction: ltr;
|
|
868
|
+
-webkit-font-feature-settings: 'liga';
|
|
869
|
+
font-feature-settings: 'liga';
|
|
870
|
+
-webkit-font-smoothing: antialiased;
|
|
871
|
+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
872
|
+
vertical-align: middle;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
/* Auth Card */
|
|
876
|
+
.ss-auth-card {
|
|
877
|
+
background: ${a.authSurfaceContainerLowest};
|
|
878
|
+
border-radius: 12px;
|
|
879
|
+
border: 1px solid ${a.authOutlineVariant}26;
|
|
880
|
+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
881
|
+
width: 100%;
|
|
882
|
+
max-width: 440px;
|
|
883
|
+
overflow: hidden;
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
.ss-auth-card-wide { max-width: 640px; }
|
|
887
|
+
|
|
888
|
+
.ss-auth-card-body { padding: 32px; }
|
|
889
|
+
|
|
890
|
+
/* Auth Header */
|
|
891
|
+
.ss-auth-header {
|
|
892
|
+
text-align: center;
|
|
893
|
+
margin-bottom: 32px;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.ss-auth-brand-icon {
|
|
897
|
+
display: inline-flex;
|
|
898
|
+
align-items: center;
|
|
899
|
+
justify-content: center;
|
|
900
|
+
width: 48px;
|
|
901
|
+
height: 48px;
|
|
902
|
+
border-radius: 12px;
|
|
903
|
+
background: ${a.authPrimary}1a;
|
|
904
|
+
margin-bottom: 16px;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.ss-auth-brand-icon .material-symbols-outlined {
|
|
908
|
+
color: ${a.authPrimary};
|
|
909
|
+
font-size: 28px;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.ss-auth-brand-icon-gradient {
|
|
913
|
+
display: inline-flex;
|
|
914
|
+
align-items: center;
|
|
915
|
+
justify-content: center;
|
|
916
|
+
width: 48px;
|
|
917
|
+
height: 48px;
|
|
918
|
+
border-radius: 12px;
|
|
919
|
+
background: linear-gradient(135deg, ${a.authPrimary}, ${a.authPrimaryContainer});
|
|
920
|
+
box-shadow: 0 8px 24px ${a.authPrimary}33;
|
|
921
|
+
margin-bottom: 16px;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
.ss-auth-brand-icon-gradient .material-symbols-outlined {
|
|
925
|
+
color: ${a.authOnPrimary};
|
|
926
|
+
font-size: 24px;
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
/* Auth Typography */
|
|
930
|
+
.ss-auth-title {
|
|
931
|
+
font-family: ${a.authFontHeadline};
|
|
932
|
+
font-size: 24px;
|
|
933
|
+
font-weight: 800;
|
|
934
|
+
letter-spacing: -0.02em;
|
|
935
|
+
color: ${a.authOnSurface};
|
|
936
|
+
margin: 0;
|
|
937
|
+
line-height: 1.2;
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
.ss-auth-title-lg { font-size: 28px; }
|
|
941
|
+
|
|
942
|
+
.ss-auth-subtitle {
|
|
943
|
+
font-family: ${a.authFontBody};
|
|
944
|
+
font-size: 14px;
|
|
945
|
+
color: ${a.authOnSurfaceVariant};
|
|
946
|
+
margin-top: 8px;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.ss-auth-label {
|
|
950
|
+
display: block;
|
|
951
|
+
font-family: ${a.authFontHeadline};
|
|
952
|
+
font-size: 11px;
|
|
953
|
+
font-weight: 700;
|
|
954
|
+
text-transform: uppercase;
|
|
955
|
+
letter-spacing: 0.1em;
|
|
956
|
+
color: ${a.authOnSurfaceVariant};
|
|
957
|
+
margin-bottom: 6px;
|
|
958
|
+
padding-left: 2px;
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
/* Auth Input */
|
|
962
|
+
.ss-auth-input {
|
|
963
|
+
width: 100%;
|
|
964
|
+
padding: 12px 16px;
|
|
965
|
+
font-size: 14px;
|
|
966
|
+
font-family: ${a.authFontBody};
|
|
967
|
+
background: ${a.authSurfaceContainerLow};
|
|
968
|
+
border: none;
|
|
969
|
+
border-radius: 8px;
|
|
970
|
+
color: ${a.authOnSurface};
|
|
971
|
+
outline: none;
|
|
972
|
+
box-shadow: 0 0 0 1px ${a.authOutlineVariant}4d;
|
|
973
|
+
transition: box-shadow 0.15s, background 0.15s;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
.ss-auth-input::placeholder { color: ${a.authOnSurfaceVariant}80; }
|
|
977
|
+
|
|
978
|
+
.ss-auth-input:focus {
|
|
979
|
+
box-shadow: 0 0 0 2px ${a.authPrimary};
|
|
980
|
+
}
|
|
981
|
+
|
|
982
|
+
.ss-auth-input-error {
|
|
983
|
+
box-shadow: 0 0 0 1px ${a.authError};
|
|
984
|
+
}
|
|
985
|
+
|
|
986
|
+
.ss-auth-input-readonly {
|
|
987
|
+
background: ${a.authSurfaceContainer}80;
|
|
988
|
+
color: ${a.authOnSurfaceVariant};
|
|
989
|
+
cursor: not-allowed;
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
.ss-auth-input-with-icon { padding-left: 40px; }
|
|
993
|
+
|
|
994
|
+
.ss-auth-field { margin-bottom: 16px; }
|
|
995
|
+
.ss-auth-field-row {
|
|
996
|
+
display: flex;
|
|
997
|
+
justify-content: space-between;
|
|
998
|
+
align-items: center;
|
|
999
|
+
margin-bottom: 6px;
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
.ss-auth-field-icon {
|
|
1003
|
+
position: absolute;
|
|
1004
|
+
left: 12px;
|
|
1005
|
+
top: 50%;
|
|
1006
|
+
transform: translateY(-50%);
|
|
1007
|
+
color: ${a.authOnSurfaceVariant};
|
|
1008
|
+
font-size: 18px;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
.ss-auth-visibility-toggle {
|
|
1012
|
+
position: absolute;
|
|
1013
|
+
right: 12px;
|
|
1014
|
+
top: 50%;
|
|
1015
|
+
transform: translateY(-50%);
|
|
1016
|
+
background: none;
|
|
1017
|
+
border: none;
|
|
1018
|
+
color: ${a.authOnSurfaceVariant};
|
|
1019
|
+
cursor: pointer;
|
|
1020
|
+
padding: 0;
|
|
1021
|
+
display: flex;
|
|
1022
|
+
font-size: 20px;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.ss-auth-visibility-toggle:hover { color: ${a.authOnSurface}; }
|
|
1026
|
+
|
|
1027
|
+
/* Auth Buttons */
|
|
1028
|
+
.ss-auth-btn-primary {
|
|
1029
|
+
width: 100%;
|
|
1030
|
+
padding: 14px 24px;
|
|
1031
|
+
font-size: 14px;
|
|
1032
|
+
font-weight: 700;
|
|
1033
|
+
font-family: ${a.authFontHeadline};
|
|
1034
|
+
color: ${a.authOnPrimary};
|
|
1035
|
+
background: linear-gradient(135deg, ${a.authPrimary}, ${a.authPrimaryContainer});
|
|
1036
|
+
border: none;
|
|
1037
|
+
border-radius: 8px;
|
|
1038
|
+
cursor: pointer;
|
|
1039
|
+
box-shadow: 0 4px 16px ${a.authPrimary}33;
|
|
1040
|
+
transition: box-shadow 0.2s, transform 0.1s, opacity 0.15s;
|
|
1041
|
+
display: flex;
|
|
1042
|
+
align-items: center;
|
|
1043
|
+
justify-content: center;
|
|
1044
|
+
gap: 8px;
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
.ss-auth-btn-primary:hover:not(:disabled) {
|
|
1048
|
+
box-shadow: 0 6px 24px ${a.authPrimary}4d;
|
|
1049
|
+
transform: translateY(-1px);
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.ss-auth-btn-primary:active:not(:disabled) {
|
|
1053
|
+
transform: scale(0.98);
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
.ss-auth-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
1057
|
+
|
|
1058
|
+
.ss-auth-btn-primary .material-symbols-outlined { font-size: 18px; }
|
|
1059
|
+
|
|
1060
|
+
.ss-auth-btn-ghost {
|
|
1061
|
+
padding: 10px 24px;
|
|
1062
|
+
font-size: 14px;
|
|
1063
|
+
font-weight: 700;
|
|
1064
|
+
font-family: ${a.authFontHeadline};
|
|
1065
|
+
color: ${a.authOnSurfaceVariant};
|
|
1066
|
+
background: transparent;
|
|
1067
|
+
border: none;
|
|
1068
|
+
border-radius: 8px;
|
|
1069
|
+
cursor: pointer;
|
|
1070
|
+
transition: background 0.15s, color 0.15s;
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
.ss-auth-btn-ghost:hover { background: ${a.authSurfaceContainer}; color: ${a.authOnSurface}; }
|
|
1074
|
+
|
|
1075
|
+
.ss-auth-btn-danger {
|
|
1076
|
+
padding: 10px 24px;
|
|
1077
|
+
font-size: 14px;
|
|
1078
|
+
font-weight: 700;
|
|
1079
|
+
font-family: ${a.authFontHeadline};
|
|
1080
|
+
color: ${a.authError};
|
|
1081
|
+
background: transparent;
|
|
1082
|
+
border: none;
|
|
1083
|
+
border-radius: 8px;
|
|
1084
|
+
cursor: pointer;
|
|
1085
|
+
transition: background 0.15s;
|
|
1086
|
+
display: flex;
|
|
1087
|
+
align-items: center;
|
|
1088
|
+
gap: 8px;
|
|
1089
|
+
width: 100%;
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
.ss-auth-btn-danger:hover { background: ${a.authErrorContainer}33; }
|
|
1093
|
+
|
|
1094
|
+
.ss-auth-btn-outline {
|
|
1095
|
+
padding: 10px 24px;
|
|
1096
|
+
font-size: 14px;
|
|
1097
|
+
font-weight: 700;
|
|
1098
|
+
font-family: ${a.authFontHeadline};
|
|
1099
|
+
color: ${a.authOnSurfaceVariant};
|
|
1100
|
+
background: transparent;
|
|
1101
|
+
border: 1px solid ${a.authOutlineVariant}4d;
|
|
1102
|
+
border-radius: 8px;
|
|
1103
|
+
cursor: pointer;
|
|
1104
|
+
transition: background 0.15s, color 0.15s;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.ss-auth-btn-outline:hover { background: ${a.authSurfaceContainer}; color: ${a.authOnSurface}; }
|
|
1108
|
+
|
|
1109
|
+
.ss-auth-btn-social {
|
|
1110
|
+
display: flex;
|
|
1111
|
+
align-items: center;
|
|
1112
|
+
justify-content: center;
|
|
1113
|
+
gap: 8px;
|
|
1114
|
+
padding: 10px 16px;
|
|
1115
|
+
font-size: 14px;
|
|
1116
|
+
font-weight: 600;
|
|
1117
|
+
font-family: ${a.authFontBody};
|
|
1118
|
+
color: ${a.authOnSurface};
|
|
1119
|
+
background: ${a.authSurfaceContainerLow};
|
|
1120
|
+
border: 1px solid ${a.authOutlineVariant}1a;
|
|
1121
|
+
border-radius: 8px;
|
|
1122
|
+
cursor: pointer;
|
|
1123
|
+
transition: background 0.15s;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
.ss-auth-btn-social:hover { background: ${a.authSurfaceContainerHigh}; }
|
|
1127
|
+
.ss-auth-btn-social:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
1128
|
+
.ss-auth-btn-social svg { width: 20px; height: 20px; flex-shrink: 0; }
|
|
1129
|
+
.ss-auth-btn-social svg path[fill="currentColor"] { fill: ${a.authOnSurface}; }
|
|
1130
|
+
|
|
1131
|
+
.ss-auth-btn-sm {
|
|
1132
|
+
width: auto;
|
|
1133
|
+
padding: 8px 16px;
|
|
1134
|
+
font-size: 12px;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
/* OAuth Grid */
|
|
1138
|
+
.ss-auth-oauth-grid {
|
|
1139
|
+
display: grid;
|
|
1140
|
+
grid-template-columns: 1fr 1fr;
|
|
1141
|
+
gap: 12px;
|
|
1142
|
+
margin-bottom: 24px;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
/* Auth Divider */
|
|
1146
|
+
.ss-auth-divider {
|
|
1147
|
+
display: flex;
|
|
1148
|
+
align-items: center;
|
|
1149
|
+
gap: 16px;
|
|
1150
|
+
margin: 24px 0;
|
|
1151
|
+
font-size: 11px;
|
|
1152
|
+
font-weight: 600;
|
|
1153
|
+
text-transform: uppercase;
|
|
1154
|
+
letter-spacing: 0.05em;
|
|
1155
|
+
color: ${a.authOnSurfaceVariant};
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.ss-auth-divider::before,
|
|
1159
|
+
.ss-auth-divider::after {
|
|
1160
|
+
content: '';
|
|
1161
|
+
flex: 1;
|
|
1162
|
+
height: 1px;
|
|
1163
|
+
background: ${a.authOutlineVariant}33;
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
/* Auth Error Message */
|
|
1167
|
+
.ss-auth-error {
|
|
1168
|
+
padding: 12px;
|
|
1169
|
+
background: ${a.authError}1a;
|
|
1170
|
+
border: 1px solid ${a.authError}33;
|
|
1171
|
+
border-radius: 8px;
|
|
1172
|
+
margin-bottom: 16px;
|
|
1173
|
+
display: flex;
|
|
1174
|
+
align-items: flex-start;
|
|
1175
|
+
gap: 8px;
|
|
1176
|
+
font-size: 13px;
|
|
1177
|
+
color: ${a.authError};
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.ss-auth-error .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
|
|
1181
|
+
|
|
1182
|
+
/* MFA Digit Inputs */
|
|
1183
|
+
.ss-auth-mfa-group {
|
|
1184
|
+
display: flex;
|
|
1185
|
+
justify-content: space-between;
|
|
1186
|
+
gap: 8px;
|
|
1187
|
+
}
|
|
1188
|
+
|
|
1189
|
+
.ss-auth-mfa-digit {
|
|
1190
|
+
width: 48px;
|
|
1191
|
+
height: 56px;
|
|
1192
|
+
text-align: center;
|
|
1193
|
+
font-size: 20px;
|
|
1194
|
+
font-weight: 700;
|
|
1195
|
+
font-family: ${a.authFontBody};
|
|
1196
|
+
background: ${a.authSurfaceContainerHigh};
|
|
1197
|
+
border: none;
|
|
1198
|
+
border-radius: 8px;
|
|
1199
|
+
color: ${a.authOnSurface};
|
|
1200
|
+
outline: none;
|
|
1201
|
+
box-shadow: 0 0 0 1px ${a.authOutlineVariant}1a;
|
|
1202
|
+
transition: box-shadow 0.15s;
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
.ss-auth-mfa-digit:focus {
|
|
1206
|
+
box-shadow: 0 0 0 2px ${a.authPrimary};
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1209
|
+
.ss-auth-mfa-hint {
|
|
1210
|
+
font-size: 11px;
|
|
1211
|
+
color: ${a.authOnSurfaceVariant}99;
|
|
1212
|
+
text-align: center;
|
|
1213
|
+
margin-top: 12px;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
.ss-auth-mfa-divider {
|
|
1217
|
+
display: flex;
|
|
1218
|
+
align-items: center;
|
|
1219
|
+
gap: 8px;
|
|
1220
|
+
margin: 16px 0 12px;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
.ss-auth-mfa-divider::before,
|
|
1224
|
+
.ss-auth-mfa-divider::after {
|
|
1225
|
+
content: '';
|
|
1226
|
+
flex: 1;
|
|
1227
|
+
height: 1px;
|
|
1228
|
+
background: ${a.authOutlineVariant}33;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.ss-auth-mfa-divider span {
|
|
1232
|
+
font-size: 10px;
|
|
1233
|
+
font-weight: 700;
|
|
1234
|
+
text-transform: uppercase;
|
|
1235
|
+
letter-spacing: 0.2em;
|
|
1236
|
+
color: ${a.authOutline};
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
/* Footer Link */
|
|
1240
|
+
.ss-auth-footer {
|
|
1241
|
+
text-align: center;
|
|
1242
|
+
margin-top: 32px;
|
|
1243
|
+
font-size: 14px;
|
|
1244
|
+
color: ${a.authOnSurfaceVariant};
|
|
1245
|
+
font-family: ${a.authFontBody};
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
.ss-auth-footer a,
|
|
1249
|
+
.ss-auth-link {
|
|
1250
|
+
color: ${a.authPrimary};
|
|
1251
|
+
text-decoration: none;
|
|
1252
|
+
font-weight: 600;
|
|
1253
|
+
cursor: pointer;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
.ss-auth-footer a:hover,
|
|
1257
|
+
.ss-auth-link:hover { text-decoration: underline; }
|
|
1258
|
+
|
|
1259
|
+
/* Glass Panel (dropdown) */
|
|
1260
|
+
.ss-auth-glass-panel {
|
|
1261
|
+
backdrop-filter: blur(20px);
|
|
1262
|
+
-webkit-backdrop-filter: blur(20px);
|
|
1263
|
+
background: ${a.authSurfaceContainerLowest}e6;
|
|
1264
|
+
border-radius: 12px;
|
|
1265
|
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
|
|
1266
|
+
border: 1px solid ${a.authOutlineVariant}1a;
|
|
1267
|
+
overflow: hidden;
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
/* Avatar Trigger */
|
|
1271
|
+
.ss-auth-avatar-trigger {
|
|
1272
|
+
width: 40px;
|
|
1273
|
+
height: 40px;
|
|
1274
|
+
border-radius: 50%;
|
|
1275
|
+
border: 2px solid ${a.authPrimary};
|
|
1276
|
+
overflow: hidden;
|
|
1277
|
+
cursor: pointer;
|
|
1278
|
+
transition: transform 0.15s, box-shadow 0.15s;
|
|
1279
|
+
padding: 0;
|
|
1280
|
+
background: none;
|
|
1281
|
+
flex-shrink: 0;
|
|
1282
|
+
}
|
|
1283
|
+
|
|
1284
|
+
.ss-auth-avatar-trigger:hover {
|
|
1285
|
+
transform: scale(1.05);
|
|
1286
|
+
box-shadow: 0 0 0 3px ${a.authPrimary}33;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
.ss-auth-avatar-trigger:active { transform: scale(0.95); }
|
|
1290
|
+
|
|
1291
|
+
.ss-auth-avatar-trigger img {
|
|
1292
|
+
width: 100%;
|
|
1293
|
+
height: 100%;
|
|
1294
|
+
object-fit: cover;
|
|
1295
|
+
border-radius: 50%;
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
/* Large Avatar (UserProfile) */
|
|
1299
|
+
.ss-auth-avatar-lg {
|
|
1300
|
+
width: 128px;
|
|
1301
|
+
height: 128px;
|
|
1302
|
+
border-radius: 16px;
|
|
1303
|
+
overflow: hidden;
|
|
1304
|
+
border: 4px solid ${a.authSurfaceContainer};
|
|
1305
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
1306
|
+
position: relative;
|
|
1307
|
+
cursor: pointer;
|
|
1308
|
+
flex-shrink: 0;
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
.ss-auth-avatar-lg img {
|
|
1312
|
+
width: 100%;
|
|
1313
|
+
height: 100%;
|
|
1314
|
+
object-fit: cover;
|
|
1315
|
+
transition: transform 0.5s;
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
.ss-auth-avatar-lg:hover img { transform: scale(1.1); }
|
|
1319
|
+
|
|
1320
|
+
.ss-auth-avatar-overlay {
|
|
1321
|
+
position: absolute;
|
|
1322
|
+
inset: 0;
|
|
1323
|
+
background: ${a.authPrimary}99;
|
|
1324
|
+
display: flex;
|
|
1325
|
+
flex-direction: column;
|
|
1326
|
+
align-items: center;
|
|
1327
|
+
justify-content: center;
|
|
1328
|
+
opacity: 0;
|
|
1329
|
+
transition: opacity 0.2s;
|
|
1330
|
+
border-radius: 16px;
|
|
1331
|
+
}
|
|
1332
|
+
|
|
1333
|
+
.ss-auth-avatar-lg:hover .ss-auth-avatar-overlay { opacity: 1; }
|
|
1334
|
+
|
|
1335
|
+
.ss-auth-avatar-overlay .material-symbols-outlined {
|
|
1336
|
+
color: #fff;
|
|
1337
|
+
font-size: 28px;
|
|
1338
|
+
margin-bottom: 4px;
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
.ss-auth-avatar-overlay span:last-child {
|
|
1342
|
+
color: #fff;
|
|
1343
|
+
font-size: 10px;
|
|
1344
|
+
font-weight: 700;
|
|
1345
|
+
text-transform: uppercase;
|
|
1346
|
+
letter-spacing: 0.15em;
|
|
1347
|
+
font-family: ${a.authFontHeadline};
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
/* Auth Sections */
|
|
1351
|
+
.ss-auth-section {
|
|
1352
|
+
padding-top: 32px;
|
|
1353
|
+
margin-top: 32px;
|
|
1354
|
+
border-top: 1px solid ${a.authOutlineVariant}1a;
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.ss-auth-section-title {
|
|
1358
|
+
font-family: ${a.authFontHeadline};
|
|
1359
|
+
font-size: 16px;
|
|
1360
|
+
font-weight: 700;
|
|
1361
|
+
color: ${a.authOnSurface};
|
|
1362
|
+
letter-spacing: -0.01em;
|
|
1363
|
+
display: flex;
|
|
1364
|
+
align-items: center;
|
|
1365
|
+
gap: 8px;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.ss-auth-section-title .material-symbols-outlined {
|
|
1369
|
+
color: ${a.authPrimary};
|
|
1370
|
+
font-size: 20px;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
.ss-auth-section-desc {
|
|
1374
|
+
font-size: 12px;
|
|
1375
|
+
color: ${a.authOnSurfaceVariant};
|
|
1376
|
+
margin-top: 4px;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.ss-auth-section-label {
|
|
1380
|
+
font-size: 10px;
|
|
1381
|
+
font-weight: 800;
|
|
1382
|
+
text-transform: uppercase;
|
|
1383
|
+
letter-spacing: 0.15em;
|
|
1384
|
+
color: ${a.authOnSurfaceVariant}99;
|
|
1385
|
+
padding: 8px 16px 4px;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
/* Sign Out Section */
|
|
1389
|
+
.ss-auth-signout-section {
|
|
1390
|
+
background: ${a.authError}0d;
|
|
1391
|
+
border-top: 1px solid ${a.authOutlineVariant}1a;
|
|
1392
|
+
padding: 8px;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
/* Org Items */
|
|
1396
|
+
.ss-auth-org-item {
|
|
1397
|
+
display: flex;
|
|
1398
|
+
align-items: center;
|
|
1399
|
+
justify-content: space-between;
|
|
1400
|
+
padding: 10px 16px;
|
|
1401
|
+
border-radius: 8px;
|
|
1402
|
+
cursor: pointer;
|
|
1403
|
+
transition: background 0.15s, color 0.15s;
|
|
1404
|
+
background: none;
|
|
1405
|
+
border: none;
|
|
1406
|
+
width: 100%;
|
|
1407
|
+
font-family: ${a.authFontBody};
|
|
1408
|
+
font-size: 14px;
|
|
1409
|
+
color: ${a.authOnSurfaceVariant};
|
|
1410
|
+
text-align: left;
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
.ss-auth-org-item:hover {
|
|
1414
|
+
background: ${a.authSurfaceContainerLow};
|
|
1415
|
+
color: ${a.authOnSurface};
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1418
|
+
.ss-auth-org-item-active {
|
|
1419
|
+
background: ${a.authPrimaryFixed}4d;
|
|
1420
|
+
color: ${a.authPrimary};
|
|
1421
|
+
font-weight: 600;
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
.ss-auth-org-item-active:hover {
|
|
1425
|
+
background: ${a.authPrimaryFixed}4d;
|
|
1426
|
+
}
|
|
1427
|
+
|
|
1428
|
+
.ss-auth-org-item-inner {
|
|
1429
|
+
display: flex;
|
|
1430
|
+
align-items: center;
|
|
1431
|
+
gap: 12px;
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.ss-auth-org-avatar {
|
|
1435
|
+
width: 32px;
|
|
1436
|
+
height: 32px;
|
|
1437
|
+
border-radius: 6px;
|
|
1438
|
+
background: linear-gradient(135deg, ${a.authPrimary}, ${a.authPrimaryContainer});
|
|
1439
|
+
color: ${a.authOnPrimary};
|
|
1440
|
+
display: flex;
|
|
1441
|
+
align-items: center;
|
|
1442
|
+
justify-content: center;
|
|
1443
|
+
font-size: 11px;
|
|
1444
|
+
font-weight: 800;
|
|
1445
|
+
flex-shrink: 0;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.ss-auth-org-avatar-inactive {
|
|
1449
|
+
background: ${a.authSurfaceContainerHigh};
|
|
1450
|
+
color: ${a.authOnSurfaceVariant};
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1453
|
+
.ss-auth-org-check {
|
|
1454
|
+
color: ${a.authPrimary};
|
|
1455
|
+
font-variation-settings: 'FILL' 1;
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
/* Modal Overlay */
|
|
1459
|
+
.ss-auth-modal-overlay {
|
|
1460
|
+
position: fixed;
|
|
1461
|
+
top: 0;
|
|
1462
|
+
left: 0;
|
|
1463
|
+
right: 0;
|
|
1464
|
+
bottom: 0;
|
|
1465
|
+
background: rgba(0, 0, 0, 0.6);
|
|
1466
|
+
backdrop-filter: blur(8px);
|
|
1467
|
+
-webkit-backdrop-filter: blur(8px);
|
|
1468
|
+
display: flex;
|
|
1469
|
+
align-items: center;
|
|
1470
|
+
justify-content: center;
|
|
1471
|
+
z-index: 99999;
|
|
1472
|
+
padding: 16px;
|
|
1473
|
+
animation: ss-auth-fade-in 0.2s ease-out;
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
@keyframes ss-auth-fade-in {
|
|
1477
|
+
from { opacity: 0; }
|
|
1478
|
+
to { opacity: 1; }
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
.ss-auth-modal {
|
|
1482
|
+
background: ${a.authSurfaceContainer};
|
|
1483
|
+
border-radius: 12px;
|
|
1484
|
+
width: 100%;
|
|
1485
|
+
max-width: 560px;
|
|
1486
|
+
max-height: 90vh;
|
|
1487
|
+
overflow-y: auto;
|
|
1488
|
+
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
|
|
1489
|
+
animation: ss-auth-scale-in 0.2s ease-out;
|
|
1490
|
+
}
|
|
1491
|
+
|
|
1492
|
+
@keyframes ss-auth-scale-in {
|
|
1493
|
+
from { transform: scale(0.95); opacity: 0; }
|
|
1494
|
+
to { transform: scale(1); opacity: 1; }
|
|
1495
|
+
}
|
|
1496
|
+
|
|
1497
|
+
.ss-auth-modal-header {
|
|
1498
|
+
display: flex;
|
|
1499
|
+
align-items: center;
|
|
1500
|
+
justify-content: space-between;
|
|
1501
|
+
padding: 24px 32px;
|
|
1502
|
+
background: ${a.authSurfaceContainerHigh}80;
|
|
1503
|
+
}
|
|
1504
|
+
|
|
1505
|
+
.ss-auth-modal-header h2 {
|
|
1506
|
+
font-family: ${a.authFontHeadline};
|
|
1507
|
+
font-size: 20px;
|
|
1508
|
+
font-weight: 700;
|
|
1509
|
+
letter-spacing: -0.02em;
|
|
1510
|
+
color: ${a.authOnSurface};
|
|
1511
|
+
margin: 0;
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
.ss-auth-modal-close {
|
|
1515
|
+
background: none;
|
|
1516
|
+
border: none;
|
|
1517
|
+
color: ${a.authOnSurfaceVariant};
|
|
1518
|
+
cursor: pointer;
|
|
1519
|
+
padding: 4px;
|
|
1520
|
+
border-radius: 50%;
|
|
1521
|
+
transition: color 0.15s, background 0.15s;
|
|
1522
|
+
display: flex;
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
.ss-auth-modal-close:hover { color: ${a.authOnSurface}; background: ${a.authSurfaceContainerHigh}; }
|
|
1526
|
+
|
|
1527
|
+
.ss-auth-modal-body { padding: 32px; }
|
|
1528
|
+
|
|
1529
|
+
.ss-auth-modal-footer {
|
|
1530
|
+
display: flex;
|
|
1531
|
+
align-items: center;
|
|
1532
|
+
justify-content: flex-end;
|
|
1533
|
+
gap: 12px;
|
|
1534
|
+
padding: 16px 32px;
|
|
1535
|
+
border-top: 1px solid ${a.authOutlineVariant}4d;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
/* Profile Header (gradient bg) */
|
|
1539
|
+
.ss-auth-profile-header {
|
|
1540
|
+
padding: 32px;
|
|
1541
|
+
padding-bottom: 16px;
|
|
1542
|
+
display: flex;
|
|
1543
|
+
flex-direction: row;
|
|
1544
|
+
align-items: center;
|
|
1545
|
+
gap: 32px;
|
|
1546
|
+
border-bottom: 1px solid ${a.authOutlineVariant}1a;
|
|
1547
|
+
background: linear-gradient(135deg, ${a.authSurfaceContainerHigh}, ${a.authSurface});
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
.ss-auth-profile-info { flex: 1; }
|
|
1551
|
+
|
|
1552
|
+
.ss-auth-profile-name {
|
|
1553
|
+
font-family: ${a.authFontHeadline};
|
|
1554
|
+
font-size: 22px;
|
|
1555
|
+
font-weight: 800;
|
|
1556
|
+
color: ${a.authOnSurface};
|
|
1557
|
+
letter-spacing: -0.02em;
|
|
1558
|
+
margin: 0;
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
.ss-auth-profile-desc {
|
|
1562
|
+
font-size: 13px;
|
|
1563
|
+
color: ${a.authOnSurfaceVariant};
|
|
1564
|
+
margin-top: 4px;
|
|
1565
|
+
line-height: 1.5;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
/* Auth Badge */
|
|
1569
|
+
.ss-auth-badge {
|
|
1570
|
+
display: inline-flex;
|
|
1571
|
+
align-items: center;
|
|
1572
|
+
gap: 4px;
|
|
1573
|
+
padding: 2px 10px;
|
|
1574
|
+
border-radius: 999px;
|
|
1575
|
+
font-size: 10px;
|
|
1576
|
+
font-weight: 700;
|
|
1577
|
+
text-transform: uppercase;
|
|
1578
|
+
letter-spacing: 0.1em;
|
|
1579
|
+
background: ${a.authPrimary}33;
|
|
1580
|
+
color: ${a.authPrimary};
|
|
1581
|
+
border: 1px solid ${a.authPrimary}4d;
|
|
1582
|
+
margin-left: 8px;
|
|
1583
|
+
vertical-align: middle;
|
|
1584
|
+
}
|
|
1585
|
+
|
|
1586
|
+
.ss-auth-badge-success {
|
|
1587
|
+
background: ${a.authSuccess}1a;
|
|
1588
|
+
color: ${a.authSuccess};
|
|
1589
|
+
border-color: ${a.authSuccess}4d;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
/* Profile Grid */
|
|
1593
|
+
.ss-auth-profile-grid {
|
|
1594
|
+
display: grid;
|
|
1595
|
+
grid-template-columns: 1fr 1fr;
|
|
1596
|
+
gap: 24px;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.ss-auth-profile-grid-full { grid-column: 1 / -1; }
|
|
1600
|
+
|
|
1601
|
+
/* Password Grid */
|
|
1602
|
+
.ss-auth-password-grid {
|
|
1603
|
+
display: grid;
|
|
1604
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
1605
|
+
gap: 16px;
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
/* Info Box */
|
|
1609
|
+
.ss-auth-info-box {
|
|
1610
|
+
background: ${a.authSurfaceContainerLowest}66;
|
|
1611
|
+
border-radius: 8px;
|
|
1612
|
+
padding: 12px 16px;
|
|
1613
|
+
border: 1px solid ${a.authOutlineVariant}33;
|
|
1614
|
+
display: flex;
|
|
1615
|
+
align-items: flex-start;
|
|
1616
|
+
gap: 12px;
|
|
1617
|
+
font-size: 11px;
|
|
1618
|
+
line-height: 1.6;
|
|
1619
|
+
color: ${a.authOnSurfaceVariant};
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
.ss-auth-info-box .material-symbols-outlined {
|
|
1623
|
+
font-size: 16px;
|
|
1624
|
+
color: ${a.authPrimary};
|
|
1625
|
+
flex-shrink: 0;
|
|
1626
|
+
margin-top: 1px;
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1629
|
+
/* Upload Grid (2-column) */
|
|
1630
|
+
.ss-auth-upload-grid {
|
|
1631
|
+
display: grid;
|
|
1632
|
+
grid-template-columns: 7fr 5fr;
|
|
1633
|
+
gap: 32px;
|
|
1634
|
+
align-items: start;
|
|
1635
|
+
}
|
|
1636
|
+
|
|
1637
|
+
/* Dropzone */
|
|
1638
|
+
.ss-auth-dropzone {
|
|
1639
|
+
border: 2px dashed ${a.authOutlineVariant};
|
|
1640
|
+
border-radius: 12px;
|
|
1641
|
+
padding: 32px 24px;
|
|
1642
|
+
text-align: center;
|
|
1643
|
+
cursor: pointer;
|
|
1644
|
+
transition: border-color 0.15s, background 0.15s;
|
|
1645
|
+
display: flex;
|
|
1646
|
+
flex-direction: column;
|
|
1647
|
+
align-items: center;
|
|
1648
|
+
gap: 8px;
|
|
1649
|
+
min-height: 200px;
|
|
1650
|
+
justify-content: center;
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1653
|
+
.ss-auth-dropzone:hover,
|
|
1654
|
+
.ss-auth-dropzone-active {
|
|
1655
|
+
border-color: ${a.authPrimary};
|
|
1656
|
+
background: ${a.authSurfaceContainerLow};
|
|
1657
|
+
}
|
|
1658
|
+
|
|
1659
|
+
.ss-auth-dropzone-icon {
|
|
1660
|
+
width: 48px;
|
|
1661
|
+
height: 48px;
|
|
1662
|
+
border-radius: 50%;
|
|
1663
|
+
background: ${a.authPrimaryContainer}33;
|
|
1664
|
+
display: flex;
|
|
1665
|
+
align-items: center;
|
|
1666
|
+
justify-content: center;
|
|
1667
|
+
margin-bottom: 8px;
|
|
1668
|
+
transition: transform 0.15s;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
.ss-auth-dropzone:hover .ss-auth-dropzone-icon { transform: scale(1.1); }
|
|
1672
|
+
|
|
1673
|
+
.ss-auth-dropzone-icon .material-symbols-outlined {
|
|
1674
|
+
color: ${a.authPrimary};
|
|
1675
|
+
font-size: 24px;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.ss-auth-dropzone-title {
|
|
1679
|
+
font-family: ${a.authFontHeadline};
|
|
1680
|
+
font-size: 14px;
|
|
1681
|
+
font-weight: 700;
|
|
1682
|
+
color: ${a.authOnSurface};
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
.ss-auth-dropzone-desc {
|
|
1686
|
+
font-size: 12px;
|
|
1687
|
+
color: ${a.authOnSurfaceVariant};
|
|
1688
|
+
line-height: 1.5;
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
.ss-auth-dropzone-btn {
|
|
1692
|
+
margin-top: 8px;
|
|
1693
|
+
padding: 8px 16px;
|
|
1694
|
+
font-size: 12px;
|
|
1695
|
+
font-weight: 600;
|
|
1696
|
+
background: ${a.authSurfaceContainerHighest};
|
|
1697
|
+
color: ${a.authOnSurfaceVariant};
|
|
1698
|
+
border: none;
|
|
1699
|
+
border-radius: 8px;
|
|
1700
|
+
cursor: pointer;
|
|
1701
|
+
transition: background 0.15s, color 0.15s;
|
|
1702
|
+
}
|
|
1703
|
+
|
|
1704
|
+
.ss-auth-dropzone-btn:hover {
|
|
1705
|
+
background: ${a.authPrimary};
|
|
1706
|
+
color: ${a.authOnPrimary};
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
/* Zoom Controls */
|
|
1710
|
+
.ss-auth-zoom-control {
|
|
1711
|
+
display: flex;
|
|
1712
|
+
align-items: center;
|
|
1713
|
+
gap: 16px;
|
|
1714
|
+
padding: 16px;
|
|
1715
|
+
background: ${a.authSurfaceContainer};
|
|
1716
|
+
border-radius: 8px;
|
|
1717
|
+
}
|
|
1718
|
+
|
|
1719
|
+
.ss-auth-zoom-control .material-symbols-outlined {
|
|
1720
|
+
color: ${a.authOnSurfaceVariant};
|
|
1721
|
+
font-size: 20px;
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1724
|
+
.ss-auth-zoom-slider {
|
|
1725
|
+
flex: 1;
|
|
1726
|
+
height: 6px;
|
|
1727
|
+
-webkit-appearance: none;
|
|
1728
|
+
appearance: none;
|
|
1729
|
+
background: ${a.authOutlineVariant}4d;
|
|
1730
|
+
border-radius: 3px;
|
|
1731
|
+
outline: none;
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
.ss-auth-zoom-slider::-webkit-slider-thumb {
|
|
1735
|
+
-webkit-appearance: none;
|
|
1736
|
+
width: 18px;
|
|
1737
|
+
height: 18px;
|
|
1738
|
+
border-radius: 50%;
|
|
1739
|
+
background: ${a.authPrimary};
|
|
1740
|
+
cursor: pointer;
|
|
1741
|
+
border: 2px solid ${a.authSurfaceContainerLowest};
|
|
1742
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
1743
|
+
}
|
|
1744
|
+
|
|
1745
|
+
.ss-auth-zoom-slider::-moz-range-thumb {
|
|
1746
|
+
width: 18px;
|
|
1747
|
+
height: 18px;
|
|
1748
|
+
border-radius: 50%;
|
|
1749
|
+
background: ${a.authPrimary};
|
|
1750
|
+
cursor: pointer;
|
|
1751
|
+
border: 2px solid ${a.authSurfaceContainerLowest};
|
|
1752
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1755
|
+
/* Crop Area */
|
|
1756
|
+
.ss-auth-crop-area {
|
|
1757
|
+
width: 320px;
|
|
1758
|
+
max-width: 100%;
|
|
1759
|
+
aspect-ratio: 1;
|
|
1760
|
+
background: ${a.authSurfaceContainerLowest};
|
|
1761
|
+
border-radius: 8px;
|
|
1762
|
+
overflow: hidden;
|
|
1763
|
+
position: relative;
|
|
1764
|
+
touch-action: none;
|
|
1765
|
+
}
|
|
1766
|
+
|
|
1767
|
+
.ss-auth-crop-size-badge {
|
|
1768
|
+
position: absolute;
|
|
1769
|
+
bottom: 12px;
|
|
1770
|
+
left: 12px;
|
|
1771
|
+
background: ${a.authSurfaceContainerHighest}cc;
|
|
1772
|
+
backdrop-filter: blur(8px);
|
|
1773
|
+
padding: 4px 12px;
|
|
1774
|
+
border-radius: 999px;
|
|
1775
|
+
border: 1px solid ${a.authOutlineVariant}4d;
|
|
1776
|
+
font-size: 11px;
|
|
1777
|
+
font-weight: 600;
|
|
1778
|
+
color: ${a.authOnSurfaceVariant};
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1781
|
+
/* Dropdown for UserButton / OrgSwitcher */
|
|
1782
|
+
.ss-auth-dropdown {
|
|
1783
|
+
position: absolute;
|
|
1784
|
+
top: calc(100% + 12px);
|
|
1785
|
+
right: 0;
|
|
1786
|
+
z-index: 99999;
|
|
1787
|
+
min-width: 320px;
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1790
|
+
.ss-auth-dropdown-left { left: 0; right: auto; }
|
|
1791
|
+
|
|
1792
|
+
.ss-auth-dropdown-header {
|
|
1793
|
+
padding: 20px 24px;
|
|
1794
|
+
display: flex;
|
|
1795
|
+
align-items: center;
|
|
1796
|
+
gap: 16px;
|
|
1797
|
+
border-bottom: 1px solid ${a.authOutlineVariant}1a;
|
|
1798
|
+
background: ${a.authSurfaceContainerLow}80;
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
.ss-auth-dropdown-avatar {
|
|
1802
|
+
width: 48px;
|
|
1803
|
+
height: 48px;
|
|
1804
|
+
border-radius: 50%;
|
|
1805
|
+
border: 2px solid ${a.authPrimaryContainer};
|
|
1806
|
+
overflow: hidden;
|
|
1807
|
+
flex-shrink: 0;
|
|
1808
|
+
}
|
|
1809
|
+
|
|
1810
|
+
.ss-auth-dropdown-avatar img {
|
|
1811
|
+
width: 100%;
|
|
1812
|
+
height: 100%;
|
|
1813
|
+
object-fit: cover;
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
.ss-auth-dropdown-name {
|
|
1817
|
+
font-family: ${a.authFontHeadline};
|
|
1818
|
+
font-size: 14px;
|
|
1819
|
+
font-weight: 800;
|
|
1820
|
+
color: ${a.authOnSurface};
|
|
1821
|
+
letter-spacing: -0.01em;
|
|
1822
|
+
}
|
|
1823
|
+
|
|
1824
|
+
.ss-auth-dropdown-email {
|
|
1825
|
+
font-size: 13px;
|
|
1826
|
+
color: ${a.authOnSurfaceVariant};
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
.ss-auth-dropdown-action {
|
|
1830
|
+
display: flex;
|
|
1831
|
+
align-items: center;
|
|
1832
|
+
gap: 12px;
|
|
1833
|
+
padding: 10px 16px;
|
|
1834
|
+
border-radius: 8px;
|
|
1835
|
+
cursor: pointer;
|
|
1836
|
+
transition: background 0.15s;
|
|
1837
|
+
background: none;
|
|
1838
|
+
border: none;
|
|
1839
|
+
width: 100%;
|
|
1840
|
+
font-family: ${a.authFontBody};
|
|
1841
|
+
font-size: 14px;
|
|
1842
|
+
font-weight: 600;
|
|
1843
|
+
color: ${a.authOnSurface};
|
|
1844
|
+
text-align: left;
|
|
1845
|
+
text-decoration: none;
|
|
1846
|
+
}
|
|
1847
|
+
|
|
1848
|
+
.ss-auth-dropdown-action:hover { background: ${a.authSurfaceContainer}; }
|
|
1849
|
+
|
|
1850
|
+
.ss-auth-dropdown-action .material-symbols-outlined {
|
|
1851
|
+
color: ${a.authPrimary};
|
|
1852
|
+
font-size: 20px;
|
|
1853
|
+
transition: transform 0.15s;
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1856
|
+
.ss-auth-dropdown-action:hover .material-symbols-outlined { transform: scale(1.1); }
|
|
1857
|
+
|
|
1858
|
+
/* OrgSwitcher Trigger */
|
|
1859
|
+
.ss-auth-org-trigger {
|
|
1860
|
+
display: flex;
|
|
1861
|
+
align-items: center;
|
|
1862
|
+
justify-content: space-between;
|
|
1863
|
+
padding: 12px 16px;
|
|
1864
|
+
background: ${a.authSurfaceContainerLowest};
|
|
1865
|
+
border: 1px solid transparent;
|
|
1866
|
+
border-radius: 8px;
|
|
1867
|
+
cursor: pointer;
|
|
1868
|
+
transition: border-color 0.15s, box-shadow 0.15s;
|
|
1869
|
+
width: 100%;
|
|
1870
|
+
font-family: ${a.authFontBody};
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
.ss-auth-org-trigger:hover {
|
|
1874
|
+
border-color: ${a.authOutlineVariant}4d;
|
|
1875
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1878
|
+
.ss-auth-org-trigger-inner {
|
|
1879
|
+
display: flex;
|
|
1880
|
+
align-items: center;
|
|
1881
|
+
gap: 12px;
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
.ss-auth-org-trigger-label {
|
|
1885
|
+
font-size: 11px;
|
|
1886
|
+
font-weight: 700;
|
|
1887
|
+
color: ${a.authPrimary};
|
|
1888
|
+
text-transform: uppercase;
|
|
1889
|
+
letter-spacing: 0.05em;
|
|
1890
|
+
margin-bottom: 2px;
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
.ss-auth-org-trigger-name {
|
|
1894
|
+
font-family: ${a.authFontHeadline};
|
|
1895
|
+
font-size: 14px;
|
|
1896
|
+
font-weight: 700;
|
|
1897
|
+
color: ${a.authOnSurface};
|
|
1898
|
+
}
|
|
1899
|
+
|
|
1900
|
+
.ss-auth-org-trigger .material-symbols-outlined {
|
|
1901
|
+
color: ${a.authOnSurfaceVariant};
|
|
1902
|
+
transition: color 0.15s;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
.ss-auth-org-trigger:hover .material-symbols-outlined { color: ${a.authPrimary}; }
|
|
1906
|
+
|
|
1907
|
+
/* OrgSwitcher Create Section */
|
|
1908
|
+
.ss-auth-org-create {
|
|
1909
|
+
background: ${a.authSurfaceContainerLow}80;
|
|
1910
|
+
padding: 16px;
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
.ss-auth-org-create-header {
|
|
1914
|
+
display: flex;
|
|
1915
|
+
align-items: center;
|
|
1916
|
+
gap: 8px;
|
|
1917
|
+
margin-bottom: 12px;
|
|
1918
|
+
font-size: 12px;
|
|
1919
|
+
font-weight: 700;
|
|
1920
|
+
text-transform: uppercase;
|
|
1921
|
+
letter-spacing: 0.05em;
|
|
1922
|
+
color: ${a.authOnSurfaceVariant};
|
|
1923
|
+
}
|
|
1924
|
+
|
|
1925
|
+
.ss-auth-org-create-header .material-symbols-outlined {
|
|
1926
|
+
color: ${a.authPrimary};
|
|
1927
|
+
font-size: 16px;
|
|
1928
|
+
}
|
|
1929
|
+
|
|
1930
|
+
.ss-auth-org-create .ss-auth-input {
|
|
1931
|
+
font-size: 13px;
|
|
1932
|
+
padding: 10px 12px;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
.ss-auth-org-slug-prefix {
|
|
1936
|
+
position: absolute;
|
|
1937
|
+
left: 12px;
|
|
1938
|
+
top: 50%;
|
|
1939
|
+
transform: translateY(-50%);
|
|
1940
|
+
font-size: 12px;
|
|
1941
|
+
color: ${a.authOutline};
|
|
1942
|
+
font-weight: 500;
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
/* Inline Create (UserButton dropdown) */
|
|
1946
|
+
.ss-auth-inline-create {
|
|
1947
|
+
padding: 12px 16px;
|
|
1948
|
+
border-top: 1px solid ${a.authOutlineVariant}1a;
|
|
1949
|
+
}
|
|
1950
|
+
|
|
1951
|
+
.ss-auth-inline-create-input {
|
|
1952
|
+
position: relative;
|
|
1953
|
+
}
|
|
1954
|
+
|
|
1955
|
+
.ss-auth-inline-create-input .ss-auth-input {
|
|
1956
|
+
padding-right: 40px;
|
|
1957
|
+
font-size: 13px;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1960
|
+
.ss-auth-inline-create-btn {
|
|
1961
|
+
position: absolute;
|
|
1962
|
+
right: 8px;
|
|
1963
|
+
top: 50%;
|
|
1964
|
+
transform: translateY(-50%);
|
|
1965
|
+
background: none;
|
|
1966
|
+
border: none;
|
|
1967
|
+
color: ${a.authPrimary};
|
|
1968
|
+
cursor: pointer;
|
|
1969
|
+
padding: 4px;
|
|
1970
|
+
border-radius: 6px;
|
|
1971
|
+
display: flex;
|
|
1972
|
+
transition: background 0.15s;
|
|
1973
|
+
}
|
|
1974
|
+
|
|
1975
|
+
.ss-auth-inline-create-btn:hover { background: ${a.authPrimary}1a; }
|
|
1976
|
+
|
|
1977
|
+
/* Signout row in profile */
|
|
1978
|
+
.ss-auth-signout-row {
|
|
1979
|
+
display: flex;
|
|
1980
|
+
align-items: center;
|
|
1981
|
+
justify-content: space-between;
|
|
1982
|
+
gap: 16px;
|
|
1983
|
+
}
|
|
1984
|
+
|
|
1985
|
+
.ss-auth-signout-info {
|
|
1986
|
+
display: flex;
|
|
1987
|
+
align-items: center;
|
|
1988
|
+
gap: 12px;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
.ss-auth-signout-icon {
|
|
1992
|
+
width: 40px;
|
|
1993
|
+
height: 40px;
|
|
1994
|
+
border-radius: 50%;
|
|
1995
|
+
background: ${a.authError}1a;
|
|
1996
|
+
display: flex;
|
|
1997
|
+
align-items: center;
|
|
1998
|
+
justify-content: center;
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
.ss-auth-signout-icon .material-symbols-outlined {
|
|
2002
|
+
color: ${a.authError};
|
|
2003
|
+
font-size: 20px;
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
.ss-auth-signout-title {
|
|
2007
|
+
font-family: ${a.authFontHeadline};
|
|
2008
|
+
font-size: 14px;
|
|
2009
|
+
font-weight: 700;
|
|
2010
|
+
color: ${a.authOnSurface};
|
|
2011
|
+
}
|
|
2012
|
+
|
|
2013
|
+
.ss-auth-signout-desc {
|
|
2014
|
+
font-size: 12px;
|
|
2015
|
+
color: ${a.authOnSurfaceVariant};
|
|
2016
|
+
}
|
|
2017
|
+
|
|
2018
|
+
/* Auth Spinner */
|
|
2019
|
+
.ss-auth-spinner {
|
|
2020
|
+
display: inline-block;
|
|
2021
|
+
width: 16px;
|
|
2022
|
+
height: 16px;
|
|
2023
|
+
border: 2px solid ${a.authOnPrimary}4d;
|
|
2024
|
+
border-top-color: ${a.authOnPrimary};
|
|
2025
|
+
border-radius: 50%;
|
|
2026
|
+
animation: ss-spin 0.6s linear infinite;
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
/* Responsive overrides */
|
|
2030
|
+
@media (max-width: 640px) {
|
|
2031
|
+
.ss-auth-profile-header {
|
|
2032
|
+
flex-direction: column;
|
|
2033
|
+
text-align: center;
|
|
2034
|
+
}
|
|
2035
|
+
|
|
2036
|
+
.ss-auth-profile-grid { grid-template-columns: 1fr; }
|
|
2037
|
+
.ss-auth-password-grid { grid-template-columns: 1fr; }
|
|
2038
|
+
.ss-auth-upload-grid { grid-template-columns: 1fr; }
|
|
2039
|
+
|
|
2040
|
+
.ss-auth-signout-row { flex-direction: column; text-align: center; }
|
|
2041
|
+
.ss-auth-signout-info { flex-direction: column; }
|
|
2042
|
+
}
|
|
2043
|
+
`}function M({children:a,appearance:r}){const e=t.useRef(null),[o,n]=t.useState(null);t.useEffect(()=>{var x;if(!e.current||e.current.shadowRoot){n(((x=e.current)==null?void 0:x.shadowRoot)??null);return}const l=e.current.attachShadow({mode:"open"});if((r==null?void 0:r.fontUrl)!==null){const p=document.createElement("link");p.rel="stylesheet",p.href=(r==null?void 0:r.fontUrl)??"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",l.appendChild(p)}const c=Y(r),d=document.createElement("style");d.textContent=Q(c),l.appendChild(d);const i=document.createElement("div");l.appendChild(i),n(l)},[]),t.useEffect(()=>{if(!o)return;const l=o.querySelector("style");if(l){const c=Y(r);l.textContent=Q(c)}},[r,o]);const u=(o==null?void 0:o.querySelector("div"))??null;return s.jsx("div",{ref:e,style:{display:"contents"},children:u&&vs.createPortal(a,u)})}function H(){const{client:a,user:r,isLoaded:e}=E();return{isLoaded:e,isSignedIn:!!r,user:r,signOut:t.useCallback(()=>a.auth.signOut(),[a]),getToken:t.useCallback(()=>a.auth.getToken(),[a])}}function $s(){const{user:a,isLoaded:r}=E();return{user:a,isLoaded:r}}function Z(){const{client:a}=E(),[r,e]=t.useState(!1),[o,n]=t.useState(null),u=t.useCallback(async(d,i)=>{e(!0),n(null);try{return await a.auth.signIn(d,i)}catch(x){return n(x instanceof Error?x.message:"Sign in failed"),null}finally{e(!1)}},[a]),l=t.useCallback(async d=>{e(!0),n(null);try{return await a.auth.signInWithOAuth(d)}catch(i){return n(i instanceof Error?i.message:"OAuth sign in failed"),null}finally{e(!1)}},[a]),c=t.useCallback(async(d,i)=>{e(!0),n(null);try{return await a.auth.submitMfaCode(d,i)}catch(x){return n(x instanceof Error?x.message:"MFA verification failed"),null}finally{e(!1)}},[a]);return{signIn:u,signInWithOAuth:l,submitMfaCode:c,isLoading:r,error:o,setError:n}}function as(){const{client:a}=E(),[r,e]=t.useState(!1),[o,n]=t.useState(null);return{signUp:t.useCallback(async(l,c)=>{e(!0),n(null);try{return await a.auth.signUp(l,c)}catch(d){return n(d instanceof Error?d.message:"Sign up failed"),null}finally{e(!1)}},[a]),isLoading:r,error:o,setError:n}}function K(){const{client:a}=E(),[r,e]=t.useState([]),[o,n]=t.useState(null),[u,l]=t.useState([]),[c,d]=t.useState([]),[i,x]=t.useState(!1),[p,g]=t.useState(null),m=t.useCallback(async()=>{x(!0),g(null);try{const w=await a.auth.listOrgs();e(w);const f=typeof window<"u"?localStorage.getItem("ss_selected_org"):null;if(f&&w.some(y=>y.id===f)&&!o){const y=w.find(C=>C.id===f);n(y);try{const C=await a.auth.listMembers(y.id);l(C)}catch{}}}catch(w){g(w instanceof Error?w.message:"Failed to load organizations")}finally{x(!1)}},[a,o]);t.useEffect(()=>{m()},[m]);const v=t.useCallback(async w=>{try{const f=await a.auth.getOrg(w);n(f),typeof window<"u"&&localStorage.setItem("ss_selected_org",w);const y=await a.auth.listMembers(w);l(y)}catch(f){g(f instanceof Error?f.message:"Failed to load organization")}},[a]),b=t.useCallback(async(w,f)=>{try{const y=await a.auth.createOrg(w,f);return e(C=>[...C,y]),y}catch(y){return g(y instanceof Error?y.message:"Failed to create organization"),null}},[a]),N=t.useCallback(async(w,f)=>{try{const y=await a.auth.updateOrg(w,f);return e(C=>C.map(B=>B.id===w?y:B)),(o==null?void 0:o.id)===w&&n(y),y}catch(y){return g(y instanceof Error?y.message:"Failed to update organization"),null}},[a,o]),h=t.useCallback(async w=>{try{return await a.auth.deleteOrg(w),e(f=>f.filter(y=>y.id!==w)),(o==null?void 0:o.id)===w&&(n(null),l([]),d([]),typeof window<"u"&&localStorage.removeItem("ss_selected_org")),!0}catch(f){return g(f instanceof Error?f.message:"Failed to delete organization"),!1}},[a,o]),j=t.useCallback(async(w,f,y)=>{try{return await a.auth.sendInvite(w,f,y)}catch(C){return g(C instanceof Error?C.message:"Failed to send invite"),null}},[a]),S=t.useCallback(async w=>{try{const f=await a.auth.listInvites(w);d(f)}catch(f){g(f instanceof Error?f.message:"Failed to load invites")}},[a]),k=t.useCallback(async(w,f)=>{try{return await a.auth.revokeInvite(w,f),d(y=>y.filter(C=>C.id!==f)),!0}catch(y){return g(y instanceof Error?y.message:"Failed to revoke invite"),!1}},[a]),P=t.useCallback(async(w,f,y)=>{try{return await a.auth.updateMemberRole(w,f,y),l(C=>C.map(B=>B.userId===f?{...B,role:y}:B)),!0}catch(C){return g(C instanceof Error?C.message:"Failed to update member role"),!1}},[a]),z=t.useCallback(async(w,f)=>{try{return await a.auth.removeMember(w,f),l(y=>y.filter(C=>C.userId!==f)),!0}catch(y){return g(y instanceof Error?y.message:"Failed to remove member"),!1}},[a]),F=t.useCallback(async w=>{try{const f=await a.auth.listMembers(w);l(f)}catch(f){g(f instanceof Error?f.message:"Failed to load members")}},[a]);return{orgs:r,selectedOrg:o,members:u,invites:c,isLoading:i,error:p,setError:g,refresh:m,selectOrg:v,createOrg:b,updateOrg:N,deleteOrg:h,sendInvite:j,refreshInvites:S,revokeInvite:k,updateMemberRole:P,removeMember:z,refreshMembers:F}}function es(){const{client:a}=E(),[r,e]=t.useState(!1),[o,n]=t.useState(null);return{deleteAccount:t.useCallback(async()=>{e(!0),n(null);try{return await a.auth.deleteAccount(),!0}catch(l){return n(l instanceof Error?l.message:"Failed to delete account"),!1}finally{e(!1)}},[a]),isLoading:r,error:o,setError:n}}function X(){const{client:a,user:r}=E(),[e,o]=t.useState(!1),[n,u]=t.useState(null),[l,c]=t.useState(null),d=t.useCallback(async p=>{o(!0),u(null),c(null);try{const g=await a.auth.updateProfile(p);return c("Profile updated"),g}catch(g){return u(g instanceof Error?g.message:"Failed to update profile"),null}finally{o(!1)}},[a]),i=t.useCallback(async(p,g)=>{o(!0),u(null),c(null);try{return await a.auth.changePassword(p,g),c("Password changed successfully"),!0}catch(m){return u(m instanceof Error?m.message:"Failed to change password"),!1}finally{o(!1)}},[a]),x=t.useCallback(async p=>{o(!0),u(null),c(null);try{const g=await a.auth.uploadAvatar(p);return c("Avatar updated"),g}catch(g){return u(g instanceof Error?g.message:"Failed to upload avatar"),null}finally{o(!1)}},[a]);return{user:r,updateProfile:d,uploadAvatar:x,changePassword:i,isLoading:e,error:n,success:l,setError:u,setSuccess:c}}const ts='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>',rs='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor"/></svg>',$={close:"close",person:"person",logout:"logout",checkCircle:"check_circle",unfoldMore:"unfold_more",cloudUpload:"cloud_upload",zoomIn:"zoom_in",zoomOut:"zoom_out",lock:"lock",visibility:"visibility",visibilityOff:"visibility_off",add:"add",addCircle:"add_circle",camera:"photo_camera",security:"security",errorOutline:"error_outline",info:"info",arrowForward:"arrow_forward",verified:"verified",token:"token",autoAwesome:"auto_awesome",corporateFare:"corporate_fare",cloudDone:"cloud_done",check:"check",image:"image"};function Cs({appearance:a,signUpUrl:r,onSignUp:e}){const{appearance:o,settings:n}=E(),{signIn:u,signInWithOAuth:l,submitMfaCode:c,isLoading:d,error:i,setError:x}=Z(),p=a??o,[g,m]=t.useState(""),[v,b]=t.useState(""),[N,h]=t.useState(!1),[j,S]=t.useState(!1),[k,P]=t.useState(""),[z,F]=t.useState(["","","","","",""]),w=t.useRef([]),f=t.useCallback(async L=>{if(L.preventDefault(),j){await c(k,z.join(""));return}const T=await u(g,v);T&&U.isMfaRequired(T)&&(P(T.mfaToken),S(!0),x(null))},[g,v,j,k,z,u,c,x]),y=t.useCallback(async L=>{await l(L)},[l]),C=t.useCallback((L,T)=>{var R;if(!/^\d*$/.test(T))return;const O=T.slice(-1);F(_=>{const q=[..._];return q[L]=O,q}),O&&L<5&&((R=w.current[L+1])==null||R.focus())},[]),B=t.useCallback((L,T)=>{var O;T.key==="Backspace"&&!z[L]&&L>0&&((O=w.current[L-1])==null||O.focus())},[z]),D=(n==null?void 0:n.googleEnabled)||(n==null?void 0:n.githubEnabled);return s.jsx(M,{appearance:p,children:s.jsx("div",{className:"ss-auth-card",children:s.jsxs("div",{className:"ss-auth-card-body",children:[s.jsxs("div",{className:"ss-auth-header",children:[s.jsx("div",{className:"ss-auth-brand-icon",children:s.jsx("span",{className:"material-symbols-outlined",children:$.token})}),s.jsx("h1",{className:"ss-auth-title",children:"Sign in to your account"}),s.jsx("p",{className:"ss-auth-subtitle",children:"Welcome back to your workspace"})]}),!j&&D&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-auth-oauth-grid",children:[(n==null?void 0:n.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-auth-btn-social",onClick:()=>y("google"),disabled:d,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:ts}}),"Google"]}),(n==null?void 0:n.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-auth-btn-social",onClick:()=>y("github"),disabled:d,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:rs}}),"GitHub"]})]}),s.jsx("div",{className:"ss-auth-divider",children:"or continue with"})]}),i&&s.jsxs("div",{className:"ss-auth-error",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:i})]}),s.jsxs("form",{onSubmit:f,children:[j?s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"ss-auth-mfa-divider",children:s.jsx("span",{children:"Verification Required"})}),s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",children:"6-Digit Code"}),s.jsx("div",{className:"ss-auth-mfa-group",children:z.map((L,T)=>s.jsx("input",{ref:O=>{w.current[T]=O},className:"ss-auth-mfa-digit",type:"text",inputMode:"numeric",maxLength:1,value:L,onChange:O=>C(T,O.target.value),onKeyDown:O=>B(T,O),autoFocus:T===0},T))}),s.jsx("p",{className:"ss-auth-mfa-hint",children:"We sent a 6-digit code to your registered email."})]})]}):s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",htmlFor:"ss-email",children:"Email Address"}),s.jsx("input",{id:"ss-email",className:"ss-auth-input",type:"email",autoComplete:"email",placeholder:"name@company.com",value:g,onChange:L=>m(L.target.value),required:!0})]}),s.jsxs("div",{className:"ss-auth-field",children:[s.jsxs("div",{className:"ss-auth-field-row",children:[s.jsx("label",{className:"ss-auth-label",htmlFor:"ss-password",style:{marginBottom:0},children:"Password"}),s.jsx("span",{className:"ss-auth-link",style:{fontSize:"12px"},children:"Forgot?"})]}),s.jsxs("div",{style:{position:"relative"},children:[s.jsx("input",{id:"ss-password",className:"ss-auth-input",type:N?"text":"password",autoComplete:"current-password",placeholder:"••••••••",value:v,onChange:L=>b(L.target.value),required:!0}),s.jsx("button",{type:"button",className:"ss-auth-visibility-toggle",onClick:()=>h(!N),children:s.jsx("span",{className:"material-symbols-outlined",children:N?$.visibilityOff:$.visibility})})]})]})]}),s.jsxs("button",{type:"submit",className:"ss-auth-btn-primary",disabled:d,children:[d&&s.jsx("span",{className:"ss-auth-spinner"}),j?"Verify":"Sign in",!d&&s.jsx("span",{className:"material-symbols-outlined",children:$.arrowForward})]})]}),j?s.jsx("div",{className:"ss-auth-footer",children:s.jsx("span",{className:"ss-auth-link",onClick:()=>{S(!1),F(["","","","","",""]),x(null)},children:"Back to sign in"})}):s.jsxs("div",{className:"ss-auth-footer",children:["Don't have an account?"," ",e?s.jsx("span",{className:"ss-auth-link",onClick:e,children:"Sign up"}):r?s.jsx("a",{className:"ss-auth-link",href:r,children:"Sign up"}):s.jsx("span",{className:"ss-auth-link",children:"Sign up"})]})]})})})}function Ps({appearance:a,signInUrl:r,onSignIn:e}){const{appearance:o,settings:n}=E(),{signUp:u,isLoading:l,error:c,setError:d}=as(),{signInWithOAuth:i}=Z(),x=a??o,[p,g]=t.useState(""),[m,v]=t.useState(""),[b,N]=t.useState(""),[h,j]=t.useState(!1),[S,k]=t.useState(null),P=t.useCallback(async f=>{if(f.preventDefault(),k(null),m!==b){k("Passwords do not match");return}const y=(n==null?void 0:n.passwordMinLength)??8;if(m.length<y){k(`Password must be at least ${y} characters`);return}await u(p,m)},[p,m,b,n,u]),z=t.useCallback(async f=>{await i(f)},[i]),F=(n==null?void 0:n.googleEnabled)||(n==null?void 0:n.githubEnabled),w=S||c;return s.jsx(M,{appearance:x,children:s.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",width:"100%",maxWidth:"440px"},children:[s.jsxs("div",{className:"ss-auth-header",children:[s.jsx("div",{className:"ss-auth-brand-icon-gradient",children:s.jsx("span",{className:"material-symbols-outlined",children:$.autoAwesome})}),s.jsx("h1",{className:"ss-auth-title ss-auth-title-lg",children:"Create your account"}),s.jsx("p",{className:"ss-auth-subtitle",children:"Join the ecosystem"})]}),s.jsx("div",{className:"ss-auth-card",children:s.jsxs("div",{className:"ss-auth-card-body",children:[F&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-auth-oauth-grid",children:[(n==null?void 0:n.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-auth-btn-social",onClick:()=>z("google"),disabled:l,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:ts}}),"Google"]}),(n==null?void 0:n.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-auth-btn-social",onClick:()=>z("github"),disabled:l,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:rs}}),"GitHub"]})]}),s.jsx("div",{className:"ss-auth-divider",children:"or sign up with email"})]}),w&&s.jsxs("div",{className:"ss-auth-error",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:w})]}),s.jsxs("form",{onSubmit:P,children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",htmlFor:"ss-signup-email",children:"Email"}),s.jsx("input",{id:"ss-signup-email",className:"ss-auth-input",type:"email",autoComplete:"email",placeholder:"name@company.com",value:p,onChange:f=>g(f.target.value),required:!0})]}),s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",htmlFor:"ss-signup-password",children:"Password"}),s.jsxs("div",{style:{position:"relative"},children:[s.jsx("input",{id:"ss-signup-password",className:"ss-auth-input",type:h?"text":"password",autoComplete:"new-password",placeholder:"••••••••",value:m,onChange:f=>{v(f.target.value),k(null)},required:!0}),s.jsx("button",{type:"button",className:"ss-auth-visibility-toggle",onClick:()=>j(!h),children:s.jsx("span",{className:"material-symbols-outlined",children:h?$.visibilityOff:$.visibility})})]})]}),s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",htmlFor:"ss-signup-confirm",children:"Confirm Password"}),s.jsx("input",{id:"ss-signup-confirm",className:"ss-auth-input",type:"password",autoComplete:"new-password",placeholder:"••••••••",value:b,onChange:f=>{N(f.target.value),k(null)},required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-auth-btn-primary",disabled:l,children:[l&&s.jsx("span",{className:"ss-auth-spinner"}),"Sign up",!l&&s.jsx("span",{className:"material-symbols-outlined",children:$.arrowForward})]})]}),s.jsxs("div",{className:"ss-auth-footer",children:["Already have an account?"," ",e?s.jsx("span",{className:"ss-auth-link",onClick:e,children:"Sign in"}):r?s.jsx("a",{className:"ss-auth-link",href:r,children:"Sign in"}):s.jsx("span",{className:"ss-auth-link",children:"Sign in"})]})]})})]})})}const I=320,V=128;function zs({file:a,onCrop:r,onCancel:e}){const o=t.useRef(null),n=t.useRef(null),[u,l]=t.useState(1),[c,d]=t.useState({x:0,y:0}),[i,x]=t.useState(!1),p=t.useRef({x:0,y:0,ox:0,oy:0}),[g,m]=t.useState(!1);t.useEffect(()=>{const h=new Image,j=URL.createObjectURL(a);return h.onload=()=>{n.current=h,m(!0),d({x:0,y:0}),l(1)},h.src=j,()=>URL.revokeObjectURL(j)},[a]),t.useEffect(()=>{if(!g||!n.current||!o.current)return;const h=o.current.getContext("2d");if(!h)return;const j=n.current;h.clearRect(0,0,I,I),h.fillStyle="#111",h.fillRect(0,0,I,I);const S=Math.max(I/j.width,I/j.height)*u,k=j.width*S,P=j.height*S,z=(I-k)/2+c.x,F=(I-P)/2+c.y;h.save(),h.beginPath(),h.arc(I/2,I/2,V,0,Math.PI*2),h.clip(),h.drawImage(j,z,F,k,P),h.restore(),h.save(),h.fillStyle="rgba(0, 0, 0, 0.6)",h.fillRect(0,0,I,I),h.globalCompositeOperation="destination-out",h.beginPath(),h.arc(I/2,I/2,V,0,Math.PI*2),h.fill(),h.restore(),h.save(),h.beginPath(),h.arc(I/2,I/2,V,0,Math.PI*2),h.clip(),h.drawImage(j,z,F,k,P),h.restore(),h.strokeStyle="rgba(255, 255, 255, 0.4)",h.lineWidth=2,h.beginPath(),h.arc(I/2,I/2,V,0,Math.PI*2),h.stroke()},[u,c,g]);const v=t.useCallback(h=>{x(!0),p.current={x:h.clientX,y:h.clientY,ox:c.x,oy:c.y},h.target.setPointerCapture(h.pointerId)},[c]),b=t.useCallback(h=>{i&&d({x:p.current.ox+(h.clientX-p.current.x),y:p.current.oy+(h.clientY-p.current.y)})},[i]),N=t.useCallback(()=>x(!1),[]);return t.useCallback(()=>{if(!n.current)return;const h=document.createElement("canvas"),j=V*2;h.width=j,h.height=j;const S=h.getContext("2d");if(!S)return;const k=n.current,P=Math.max(I/k.width,I/k.height)*u,z=k.width*P,F=k.height*P,w=(I-z)/2+c.x-(I/2-V),f=(I-F)/2+c.y-(I/2-V);S.beginPath(),S.arc(V,V,V,0,Math.PI*2),S.clip(),S.drawImage(k,w,f,z,F),h.toBlob(y=>{y&&r(y)},"image/png")},[u,c,r]),s.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"24px"},children:[s.jsxs("div",{className:"ss-auth-crop-area",children:[s.jsx("canvas",{ref:o,width:I,height:I,style:{cursor:i?"grabbing":"grab",width:"100%",height:"100%"},onPointerDown:v,onPointerMove:b,onPointerUp:N}),s.jsx("div",{className:"ss-auth-crop-size-badge",children:"256 x 256 px"})]}),s.jsxs("div",{className:"ss-auth-zoom-control",style:{width:"100%",maxWidth:"280px"},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.zoomOut}),s.jsx("input",{type:"range",min:"1",max:"3",step:"0.01",value:u,onChange:h=>l(parseFloat(h.target.value)),className:"ss-auth-zoom-slider"}),s.jsx("span",{className:"material-symbols-outlined",children:$.zoomIn})]})]})}function ns({onUpload:a,onClose:r,isLoading:e}){const[o,n]=t.useState(null),[u,l]=t.useState(!1),[c,d]=t.useState(null),i=t.useRef(null),x=t.useCallback(m=>{if(!m.type.startsWith("image/")){d("Please select an image file");return}if(m.size>5*1024*1024){d("Image must be smaller than 5 MB");return}d(null),n(m)},[]),p=t.useCallback(m=>{m.preventDefault(),l(!1);const v=m.dataTransfer.files[0];v&&x(v)},[x]),g=t.useCallback(async m=>{await a(m)},[a]);return s.jsx("div",{className:"ss-auth-modal-overlay",onClick:m=>{m.target===m.currentTarget&&r()},children:s.jsxs("div",{className:"ss-auth-modal ss-auth-card-wide",children:[s.jsxs("div",{className:"ss-auth-modal-header",children:[s.jsx("h2",{children:"Upload avatar"}),s.jsx("button",{type:"button",className:"ss-auth-modal-close",onClick:r,children:s.jsx("span",{className:"material-symbols-outlined",children:$.close})})]}),s.jsxs("div",{className:"ss-auth-modal-body",children:[c&&s.jsxs("div",{className:"ss-auth-error",style:{marginBottom:"24px"},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:c})]}),s.jsxs("div",{className:"ss-auth-upload-grid",children:[s.jsx("div",{children:o?s.jsx(zs,{file:o,onCrop:g,onCancel:()=>n(null)}):s.jsxs("div",{className:"ss-auth-crop-area",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px",width:"100%",aspectRatio:"1"},children:[s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"48px",opacity:.3},children:$.image}),s.jsx("span",{style:{fontSize:"12px",opacity:.4},children:"No image selected"})]})}),s.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[s.jsxs("div",{className:`ss-auth-dropzone${u?" ss-auth-dropzone-active":""}`,onDragOver:m=>{m.preventDefault(),l(!0)},onDragLeave:()=>l(!1),onDrop:p,onClick:()=>{var m;return(m=i.current)==null?void 0:m.click()},style:{minHeight:"180px"},children:[s.jsx("div",{className:"ss-auth-dropzone-icon",children:s.jsx("span",{className:"material-symbols-outlined",children:$.cloudUpload})}),s.jsx("span",{className:"ss-auth-dropzone-title",children:"Drag and drop"}),s.jsxs("span",{className:"ss-auth-dropzone-desc",children:["JPG, PNG or WEBP",s.jsx("br",{}),"Max file size 5 MB"]}),s.jsx("button",{type:"button",className:"ss-auth-dropzone-btn",children:"Choose File"}),s.jsx("input",{ref:i,type:"file",accept:"image/*",style:{display:"none"},onChange:m=>{var v;(v=m.target.files)!=null&&v[0]&&x(m.target.files[0])}})]}),s.jsxs("div",{className:"ss-auth-info-box",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.info}),s.jsx("span",{children:"Your profile photo will be visible to all members of your organization."})]})]})]})]}),s.jsxs("div",{className:"ss-auth-modal-footer",children:[s.jsx("button",{type:"button",className:"ss-auth-btn-ghost",onClick:r,children:"Cancel"}),s.jsxs("button",{type:"button",className:"ss-auth-btn-primary ss-auth-btn-sm",onClick:()=>{},disabled:!o||e,style:{width:"auto"},children:[e&&s.jsx("span",{className:"ss-auth-spinner"}),"Save Profile",!e&&s.jsx("span",{className:"material-symbols-outlined",children:$.check})]})]})]})})}function Es({appearance:a,afterSignOutUrl:r,afterDeleteAccountUrl:e,showOrgSwitcher:o=!0,onOrgChange:n,onOrgSettingsClick:u}){const{appearance:l}=E(),{user:c,signOut:d}=H(),i=a??l,[x,p]=t.useState(!1),[g,m]=t.useState(!1),[v,b]=t.useState(""),[N,h]=t.useState(null),[j,S]=t.useState(!1),k=t.useRef(null),{orgs:P,selectedOrg:z,selectOrg:F,createOrg:w}=K(),f=t.useCallback(C=>{k.current&&!C.composedPath().includes(k.current)&&p(!1)},[]);t.useEffect(()=>{if(x){const C=setTimeout(()=>{document.addEventListener("click",f)},0);return()=>{clearTimeout(C),document.removeEventListener("click",f)}}},[x,f]);const y=t.useCallback(async C=>{C.preventDefault(),h(null),S(!0);const B=v.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"");try{const D=await w(v,B);D&&(await F(D.id),n==null||n(D),b(""),p(!1))}catch(D){h(D instanceof Error?D.message:"Failed to create organization")}finally{S(!1)}},[v,w,F,n]);return c?s.jsx(M,{appearance:i,children:s.jsxs("div",{style:{position:"relative",display:"inline-block"},ref:k,children:[s.jsx("button",{type:"button",className:"ss-auth-avatar-trigger",onClick:()=>p(!x),"aria-label":"User menu",children:c.avatarUrl?s.jsx("img",{src:c.avatarUrl,alt:""}):s.jsx("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"16px",fontWeight:700},children:(c.name||c.email).charAt(0).toUpperCase()})}),x&&s.jsxs("div",{className:"ss-auth-dropdown ss-auth-glass-panel",style:{minWidth:"320px"},children:[s.jsxs("div",{className:"ss-auth-dropdown-header",children:[s.jsx("div",{className:"ss-auth-dropdown-avatar",children:c.avatarUrl?s.jsx("img",{src:c.avatarUrl,alt:""}):s.jsx("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"20px",fontWeight:800},children:(c.name||c.email).charAt(0).toUpperCase()})}),s.jsxs("div",{children:[c.name&&s.jsx("div",{className:"ss-auth-dropdown-name",children:c.name}),s.jsx("div",{className:"ss-auth-dropdown-email",children:c.email})]})]}),s.jsx("div",{style:{padding:"4px 8px"},children:s.jsxs("button",{type:"button",className:"ss-auth-dropdown-action",onClick:()=>{p(!1),m(!0)},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.person}),"Profile"]})}),o&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"ss-auth-section-label",children:"Organizations"}),s.jsx("div",{style:{padding:"0 8px 4px"},children:P.map(C=>{const B=(z==null?void 0:z.id)===C.id,D=C.name.split(" ").map(L=>L[0]).join("").slice(0,2).toUpperCase();return s.jsxs("button",{type:"button",className:`ss-auth-org-item${B?" ss-auth-org-item-active":""}`,onClick:async()=>{p(!1),await F(C.id),n==null||n(C)},children:[s.jsxs("div",{className:"ss-auth-org-item-inner",children:[s.jsx("div",{className:`ss-auth-org-avatar${B?"":" ss-auth-org-avatar-inactive"}`,children:D}),s.jsx("span",{style:{fontFamily:"'Manrope', sans-serif",letterSpacing:"-0.01em"},children:C.name})]}),B&&s.jsx("span",{className:"material-symbols-outlined ss-auth-org-check",style:{fontSize:"18px"},children:$.checkCircle})]},C.id)})}),s.jsxs("div",{className:"ss-auth-inline-create",children:[N&&s.jsx("div",{className:"ss-auth-error",style:{marginBottom:"8px",fontSize:"12px"},children:s.jsx("span",{children:N})}),s.jsx("form",{onSubmit:y,children:s.jsxs("div",{className:"ss-auth-inline-create-input",children:[s.jsx("input",{className:"ss-auth-input",type:"text",placeholder:"New organization name",value:v,onChange:C=>b(C.target.value),required:!0,style:{fontSize:"13px",padding:"10px 40px 10px 12px"}}),s.jsx("button",{type:"submit",className:"ss-auth-inline-create-btn",disabled:j||!v.trim(),children:s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"20px"},children:$.add})})]})})]}),z&&u&&s.jsx("div",{style:{padding:"0 8px 4px"},children:s.jsxs("button",{type:"button",className:"ss-auth-dropdown-action",onClick:()=>{p(!1),u(z)},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.corporateFare}),"Org settings"]})})]}),s.jsx("div",{className:"ss-auth-signout-section",style:{padding:"8px"},children:s.jsxs("button",{type:"button",className:"ss-auth-dropdown-action",onClick:async()=>{p(!1),await d(),r&&(window.location.href=r)},style:{color:"inherit"},children:[s.jsx("span",{className:"material-symbols-outlined",style:{color:"inherit"},children:$.logout}),"Sign out"]})})]}),g&&s.jsx(Os,{onClose:()=>m(!1),afterDeleteAccountUrl:e})]})}):null}function Os({onClose:a,afterDeleteAccountUrl:r}){const{user:e,updateProfile:o,uploadAvatar:n,changePassword:u,isLoading:l,error:c,success:d,setError:i,setSuccess:x}=X(),{signOut:p}=H(),{deleteAccount:g,isLoading:m,error:v,setError:b}=es(),[N,h]=t.useState((e==null?void 0:e.name)??""),[j,S]=t.useState((e==null?void 0:e.avatarUrl)??""),[k,P]=t.useState(!1),[z,F]=t.useState(""),[w,f]=t.useState(""),[y,C]=t.useState(""),[B,D]=t.useState(null),[L,T]=t.useState(!1),[O,R]=t.useState(""),_=t.useCallback(async A=>{A.preventDefault(),i(null),x(null),await o({name:N,avatarUrl:j||void 0})},[N,j,o,i,x]),q=t.useCallback(async A=>{const G=await n(A);G&&(S(G.avatarUrl),P(!1))},[n]),gs=t.useCallback(async A=>{if(A.preventDefault(),D(null),i(null),x(null),w!==y){D("Passwords do not match");return}if(w.length<8){D("Password must be at least 8 characters");return}await u(z,w)&&(F(""),f(""),C(""))},[z,w,y,u,i,x]),fs=t.useCallback(async()=>{await g()&&(await p(),r&&(window.location.href=r))},[g,p,r]),ms=(e==null?void 0:e.provider)==="email",bs=O===(e==null?void 0:e.email),ys=((e==null?void 0:e.name)||(e==null?void 0:e.email)||"?").charAt(0).toUpperCase();return s.jsx("div",{className:"ss-auth-modal-overlay",onClick:A=>{A.target===A.currentTarget&&a()},children:s.jsxs("div",{className:"ss-auth-modal",style:{maxWidth:"640px"},children:[s.jsxs("div",{className:"ss-auth-modal-header",children:[s.jsx("h2",{children:"Profile"}),s.jsx("button",{type:"button",className:"ss-auth-modal-close",onClick:a,children:s.jsx("span",{className:"material-symbols-outlined",children:$.close})})]}),s.jsxs("div",{className:"ss-auth-profile-header",children:[s.jsxs("div",{className:"ss-auth-avatar-lg",onClick:()=>P(!0),children:[j?s.jsx("img",{src:j,alt:""}):s.jsx("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"48px",fontWeight:800,opacity:.4},children:ys}),s.jsxs("div",{className:"ss-auth-avatar-overlay",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.camera}),s.jsx("span",{children:"Edit"})]})]}),s.jsxs("div",{className:"ss-auth-profile-info",children:[s.jsxs("h2",{className:"ss-auth-profile-name",children:[(e==null?void 0:e.name)||"Unnamed User",(e==null?void 0:e.emailVerified)&&s.jsxs("span",{className:"ss-auth-badge ss-auth-badge-success",children:[s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"12px",fontVariationSettings:"'FILL' 1"},children:$.verified}),"Verified"]})]}),s.jsx("p",{className:"ss-auth-profile-desc",children:e==null?void 0:e.email})]})]}),s.jsxs("div",{className:"ss-auth-modal-body",children:[c&&s.jsxs("div",{className:"ss-auth-error",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:c})]}),d&&s.jsxs("div",{className:"ss-auth-info-box",style:{marginBottom:"16px"},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.check}),s.jsx("span",{children:d})]}),s.jsxs("form",{onSubmit:_,children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",children:"Full Name"}),s.jsx("input",{className:"ss-auth-input",type:"text",placeholder:"Your name",value:N,onChange:A=>h(A.target.value)})]}),s.jsxs("div",{className:"ss-auth-profile-grid",style:{marginBottom:"16px"},children:[s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"Email Address"}),s.jsxs("div",{style:{position:"relative"},children:[s.jsx("input",{className:"ss-auth-input ss-auth-input-readonly",type:"email",value:(e==null?void 0:e.email)??"",readOnly:!0}),s.jsx("span",{className:"ss-auth-visibility-toggle",style:{cursor:"default"},children:s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"18px"},children:$.lock})})]})]}),s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"Auth Provider"}),s.jsx("input",{className:"ss-auth-input ss-auth-input-readonly",type:"text",value:(e==null?void 0:e.provider)??"",readOnly:!0})]})]}),s.jsx("div",{style:{display:"flex",justifyContent:"flex-end"},children:s.jsxs("button",{type:"submit",className:"ss-auth-btn-primary ss-auth-btn-sm",disabled:l,style:{width:"auto"},children:[l&&s.jsx("span",{className:"ss-auth-spinner"}),"Save changes"]})})]}),ms&&s.jsxs("div",{className:"ss-auth-section",children:[s.jsxs("div",{className:"ss-auth-section-title",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.security}),"Security Credentials"]}),B&&s.jsxs("div",{className:"ss-auth-error",style:{marginTop:"16px"},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:B})]}),s.jsxs("form",{onSubmit:gs,style:{marginTop:"16px"},children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",children:"Current Password"}),s.jsx("input",{className:"ss-auth-input",type:"password",placeholder:"••••••••••••",value:z,onChange:A=>F(A.target.value),required:!0})]}),s.jsxs("div",{className:"ss-auth-profile-grid",style:{marginBottom:"16px"},children:[s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"New Password"}),s.jsx("input",{className:"ss-auth-input",type:"password",placeholder:"Min. 8 characters",value:w,onChange:A=>f(A.target.value),required:!0})]}),s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"Confirm New Password"}),s.jsx("input",{className:"ss-auth-input",type:"password",placeholder:"Repeat new password",value:y,onChange:A=>C(A.target.value),required:!0})]})]}),s.jsx("div",{style:{display:"flex",justifyContent:"flex-end"},children:s.jsx("button",{type:"submit",className:"ss-auth-btn-ghost",disabled:l,children:"Update Security"})})]})]}),s.jsxs("div",{className:"ss-auth-section",children:[s.jsx("div",{className:"ss-auth-section-title",style:{color:"inherit"},children:"Danger Zone"}),s.jsx("p",{className:"ss-auth-section-desc",style:{marginBottom:"16px"},children:"Deleting your account is permanent. All organizations you own will also be deleted."}),v&&s.jsxs("div",{className:"ss-auth-error",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:v})]}),L?s.jsxs("div",{children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",children:"Type your email to confirm"}),s.jsx("input",{className:"ss-auth-input",type:"email",placeholder:e==null?void 0:e.email,value:O,onChange:A=>R(A.target.value),autoFocus:!0})]}),s.jsxs("div",{style:{display:"flex",gap:"8px",justifyContent:"flex-end"},children:[s.jsx("button",{type:"button",className:"ss-auth-btn-ghost",onClick:()=>{T(!1),R(""),b(null)},children:"Cancel"}),s.jsxs("button",{type:"button",className:"ss-auth-btn-primary ss-auth-btn-sm",style:{width:"auto",background:"linear-gradient(135deg, #ef4444, #dc2626)"},disabled:!bs||m,onClick:fs,children:[m&&s.jsx("span",{className:"ss-auth-spinner"}),"Delete account"]})]})]}):s.jsx("button",{type:"button",className:"ss-auth-btn-outline",style:{borderColor:"currentColor",width:"auto"},onClick:()=>T(!0),children:"Delete my account"})]})]}),k&&s.jsx(ns,{onUpload:q,onClose:()=>P(!1),isLoading:l})]})})}function Is({appearance:a}){const{appearance:r}=E(),{user:e,signOut:o}=H(),{updateProfile:n,uploadAvatar:u,changePassword:l,isLoading:c,error:d,success:i,setError:x,setSuccess:p}=X(),g=a??r,[m,v]=t.useState((e==null?void 0:e.name)??""),[b,N]=t.useState((e==null?void 0:e.avatarUrl)??""),[h,j]=t.useState(!1),[S,k]=t.useState(""),[P,z]=t.useState(""),[F,w]=t.useState(""),[f,y]=t.useState(null),C=t.useCallback(async O=>{O.preventDefault(),x(null),p(null),await n({name:m,avatarUrl:b||void 0})},[m,b,n,x,p]),B=t.useCallback(async O=>{const R=await u(O);R&&(N(R.avatarUrl),j(!1))},[u]),D=t.useCallback(async O=>{if(O.preventDefault(),y(null),x(null),p(null),P!==F){y("Passwords do not match");return}if(P.length<8){y("Password must be at least 8 characters");return}await l(S,P)&&(k(""),z(""),w(""))},[S,P,F,l,x,p]);if(!e)return null;const L=e.provider==="email",T=(e.name||e.email).charAt(0).toUpperCase();return s.jsx(M,{appearance:g,children:s.jsxs("div",{className:"ss-auth-card",style:{maxWidth:"640px"},children:[s.jsxs("div",{className:"ss-auth-profile-header",children:[s.jsxs("div",{className:"ss-auth-avatar-lg",onClick:()=>j(!0),children:[b?s.jsx("img",{src:b,alt:""}):s.jsx("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"48px",fontWeight:800,opacity:.4},children:T}),s.jsxs("div",{className:"ss-auth-avatar-overlay",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.camera}),s.jsx("span",{children:"Edit"})]})]}),s.jsxs("div",{className:"ss-auth-profile-info",children:[s.jsxs("h2",{className:"ss-auth-profile-name",children:[e.name||"Unnamed User",e.emailVerified&&s.jsxs("span",{className:"ss-auth-badge ss-auth-badge-success",children:[s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"12px",fontVariationSettings:"'FILL' 1"},children:$.verified}),"Verified"]})]}),s.jsx("p",{className:"ss-auth-profile-desc",children:e.email})]})]}),s.jsxs("div",{className:"ss-auth-card-body",children:[d&&s.jsxs("div",{className:"ss-auth-error",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:d})]}),i&&s.jsxs("div",{className:"ss-auth-info-box",style:{marginBottom:"16px"},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.check}),s.jsx("span",{children:i})]}),s.jsxs("form",{onSubmit:C,children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",children:"Full Name"}),s.jsx("input",{className:"ss-auth-input",type:"text",placeholder:"Your name",value:m,onChange:O=>v(O.target.value)})]}),s.jsxs("div",{className:"ss-auth-profile-grid",style:{marginBottom:"16px"},children:[s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"Email Address"}),s.jsxs("div",{style:{position:"relative"},children:[s.jsx("input",{className:"ss-auth-input ss-auth-input-readonly",type:"email",value:e.email,readOnly:!0}),s.jsx("span",{className:"ss-auth-visibility-toggle",style:{cursor:"default"},children:s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"18px"},children:$.lock})})]})]}),s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"Auth Provider"}),s.jsxs("div",{style:{position:"relative"},children:[s.jsx("input",{className:"ss-auth-input ss-auth-input-readonly",type:"text",value:e.provider,readOnly:!0}),s.jsx("span",{className:"ss-auth-visibility-toggle",style:{cursor:"default"},children:s.jsx("span",{className:"material-symbols-outlined",style:{fontSize:"18px"},children:$.cloudDone})})]})]})]}),s.jsx("div",{style:{display:"flex",justifyContent:"flex-end"},children:s.jsxs("button",{type:"submit",className:"ss-auth-btn-primary ss-auth-btn-sm",disabled:c,style:{width:"auto"},children:[c&&s.jsx("span",{className:"ss-auth-spinner"}),"Save changes"]})})]}),L&&s.jsxs("div",{className:"ss-auth-section",children:[s.jsxs("div",{className:"ss-auth-section-title",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.security}),"Security Credentials"]}),s.jsx("p",{className:"ss-auth-section-desc",style:{marginBottom:"24px"},children:"Update your password to keep your account secure."}),f&&s.jsxs("div",{className:"ss-auth-error",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.errorOutline}),s.jsx("span",{children:f})]}),s.jsxs("form",{onSubmit:D,children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",children:"Current Password"}),s.jsx("input",{className:"ss-auth-input",type:"password",placeholder:"••••••••••••",value:S,onChange:O=>k(O.target.value),required:!0})]}),s.jsxs("div",{className:"ss-auth-profile-grid",style:{marginBottom:"16px"},children:[s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"New Password"}),s.jsx("input",{className:"ss-auth-input",type:"password",placeholder:"Min. 8 characters",value:P,onChange:O=>z(O.target.value),required:!0})]}),s.jsxs("div",{children:[s.jsx("label",{className:"ss-auth-label",children:"Confirm New Password"}),s.jsx("input",{className:"ss-auth-input",type:"password",placeholder:"Repeat new password",value:F,onChange:O=>w(O.target.value),required:!0})]})]}),s.jsxs("div",{className:"ss-auth-info-box",style:{marginBottom:"16px"},children:[s.jsx("span",{className:"material-symbols-outlined",children:$.info}),s.jsx("span",{children:"Password must be at least 8 characters long."})]}),s.jsx("div",{style:{display:"flex",justifyContent:"flex-end"},children:s.jsx("button",{type:"submit",className:"ss-auth-btn-ghost",disabled:c,children:"Update Security"})})]})]}),s.jsx("div",{className:"ss-auth-section",style:{borderTop:"none",paddingTop:0,marginTop:"24px"},children:s.jsx("div",{className:"ss-auth-signout-section",style:{borderRadius:"12px",padding:"16px 20px"},children:s.jsxs("div",{className:"ss-auth-signout-row",children:[s.jsxs("div",{className:"ss-auth-signout-info",children:[s.jsx("div",{className:"ss-auth-signout-icon",children:s.jsx("span",{className:"material-symbols-outlined",children:$.logout})}),s.jsxs("div",{children:[s.jsx("div",{className:"ss-auth-signout-title",children:"End Session"}),s.jsx("div",{className:"ss-auth-signout-desc",children:"Terminate your active session"})]})]}),s.jsx("button",{type:"button",className:"ss-auth-btn-outline",onClick:()=>o(),style:{width:"auto",flexShrink:0},children:"Sign out"})]})})})]}),h&&s.jsx(ns,{onUpload:B,onClose:()=>j(!1),isLoading:c})]})})}function Fs({appearance:a,onOrgChange:r}){const{appearance:e}=E(),{orgs:o,selectedOrg:n,selectOrg:u,createOrg:l,isLoading:c}=K(),d=a??e,[i,x]=t.useState(!1),[p,g]=t.useState(""),[m,v]=t.useState(""),[b,N]=t.useState(null),[h,j]=t.useState(!1),S=t.useRef(null),k=t.useCallback(f=>{S.current&&!f.composedPath().includes(S.current)&&x(!1)},[]);t.useEffect(()=>{if(i){const f=setTimeout(()=>{document.addEventListener("click",k)},0);return()=>{clearTimeout(f),document.removeEventListener("click",k)}}},[i,k]);const P=t.useCallback(f=>{g(f),v(f.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,""))},[]),z=t.useCallback(async f=>{f.preventDefault(),N(null),j(!0);try{const y=await l(p,m);y&&(await u(y.id),r==null||r(y),g(""),v(""),x(!1))}catch(y){N(y instanceof Error?y.message:"Failed to create organization")}finally{j(!1)}},[p,m,l,u,r]);if(c)return null;const F=(n==null?void 0:n.name)??(o.length===0?"No organization":"Select organization"),w=n?n.name.split(" ").map(f=>f[0]).join("").slice(0,2).toUpperCase():"--";return s.jsx(M,{appearance:d,children:s.jsxs("div",{style:{position:"relative",display:"inline-block",width:"100%",maxWidth:"360px"},ref:S,children:[s.jsxs("button",{type:"button",className:"ss-auth-org-trigger",onClick:()=>x(!i),children:[s.jsxs("div",{className:"ss-auth-org-trigger-inner",children:[s.jsx("div",{className:"ss-auth-org-avatar",children:w}),s.jsxs("div",{style:{textAlign:"left"},children:[s.jsx("div",{className:"ss-auth-org-trigger-label",children:"Current Organization"}),s.jsx("div",{className:"ss-auth-org-trigger-name",children:F})]})]}),s.jsx("span",{className:"material-symbols-outlined",children:$.unfoldMore})]}),i&&s.jsxs("div",{className:"ss-auth-dropdown ss-auth-dropdown-left ss-auth-glass-panel",style:{width:"100%"},children:[s.jsx("div",{className:"ss-auth-section-label",children:"Your Organizations"}),s.jsx("div",{style:{padding:"0 8px 4px"},children:o.map(f=>{const y=(n==null?void 0:n.id)===f.id,C=f.name.split(" ").map(B=>B[0]).join("").slice(0,2).toUpperCase();return s.jsxs("button",{type:"button",className:`ss-auth-org-item${y?" ss-auth-org-item-active":""}`,onClick:async()=>{x(!1),await u(f.id),r==null||r(f)},children:[s.jsxs("div",{className:"ss-auth-org-item-inner",children:[s.jsx("div",{className:`ss-auth-org-avatar${y?"":" ss-auth-org-avatar-inactive"}`,children:C}),s.jsx("span",{style:{fontFamily:"'Manrope', sans-serif",letterSpacing:"-0.01em"},children:f.name})]}),y&&s.jsx("span",{className:"material-symbols-outlined ss-auth-org-check",style:{fontSize:"18px"},children:$.checkCircle})]},f.id)})}),s.jsxs("div",{className:"ss-auth-org-create",children:[s.jsxs("div",{className:"ss-auth-org-create-header",children:[s.jsx("span",{className:"material-symbols-outlined",children:$.addCircle}),s.jsx("span",{children:"Create organization"})]}),b&&s.jsx("div",{className:"ss-auth-error",style:{marginBottom:"12px",fontSize:"12px"},children:s.jsx("span",{children:b})}),s.jsxs("form",{onSubmit:z,children:[s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",style:{fontSize:"10px"},children:"Org Name"}),s.jsx("input",{className:"ss-auth-input",type:"text",placeholder:"e.g. Nexus Dynamics",value:p,onChange:f=>P(f.target.value),required:!0,style:{fontSize:"13px",padding:"10px 12px"}})]}),s.jsxs("div",{className:"ss-auth-field",children:[s.jsx("label",{className:"ss-auth-label",style:{fontSize:"10px"},children:"Workspace Slug"}),s.jsxs("div",{style:{position:"relative"},children:[s.jsx("span",{className:"ss-auth-org-slug-prefix",children:"/"}),s.jsx("input",{className:"ss-auth-input",type:"text",placeholder:"nexus-dynamics",value:m,onChange:f=>v(f.target.value),required:!0,style:{fontSize:"13px",padding:"10px 12px 10px 22px"}})]})]}),s.jsxs("button",{type:"submit",className:"ss-auth-btn-primary",disabled:h||!p.trim(),style:{marginTop:"8px"},children:[h&&s.jsx("span",{className:"ss-auth-spinner"}),"Initialize Organization"]})]})]})]})]})})}function Ls(a,r="USD"){return new Intl.NumberFormat("en-US",{style:"currency",currency:r,minimumFractionDigits:a%100===0?0:2}).format(a/100)}function Bs({plans:a,currentPlanId:r,onSelectPlan:e,interval:o,appearance:n}){const{appearance:u}=E(),l=n??u,c=o?a.filter(d=>d.interval===o||d.isFree):a;return s.jsx(M,{appearance:l,children:s.jsx("div",{className:"ss-pricing-grid",children:c.map(d=>{const i=d.id===r;return s.jsxs("div",{className:`ss-pricing-card ${i?"ss-pricing-card-current":""}`,children:[s.jsxs("div",{className:"ss-pricing-header",children:[s.jsx("h3",{className:"ss-pricing-name",children:d.name}),d.trialDays>0&&s.jsxs("span",{className:"ss-badge ss-badge-trialing",children:[d.trialDays,"-day trial"]}),d.isFree&&s.jsx("span",{className:"ss-badge ss-badge-active",children:"Free"})]}),s.jsx("div",{className:"ss-pricing-price",children:d.isFree?s.jsx("span",{className:"ss-pricing-amount",children:"Free"}):s.jsxs(s.Fragment,{children:[s.jsx("span",{className:"ss-pricing-amount",children:Ls(d.amountCents,d.currency)}),s.jsxs("span",{className:"ss-pricing-interval",children:["/",d.interval]})]})}),d.description&&s.jsx("p",{className:"ss-pricing-desc",children:d.description}),d.features.length>0&&s.jsx("ul",{className:"ss-pricing-features",children:d.features.map((x,p)=>s.jsxs("li",{className:"ss-pricing-feature",children:[s.jsx("span",{className:"ss-check",children:"✓"})," ",x]},p))}),s.jsx("button",{type:"button",className:`ss-btn ${i?"ss-btn-current":"ss-btn-primary"}`,disabled:i,onClick:()=>e(d.id),children:i?"Current plan":"Select plan"})]},d.id)})})})}function Ts(){const{client:a}=E();return{billing:a.billing}}function W(a){const{client:r}=E();return t.useMemo(()=>{if(a){const e=new U.Transport("https://api.saas-support.com/v1",{type:"portalToken",token:a});return new U.BillingClient(e)}return r.billing},[r,a])}function os(a,r){const e=W(r),[o,n]=t.useState(null),[u,l]=t.useState(!0),[c,d]=t.useState(null),i=t.useCallback(async()=>{l(!0),d(null);try{const x=await e.getCustomer(a);n(x)}catch(x){d(x instanceof Error?x.message:"Failed to load subscription")}finally{l(!1)}},[e,a]);return t.useEffect(()=>{i()},[i]),{customer:o,isLoading:u,error:c,refresh:i}}function is(a,r){const e=W(r),[o,n]=t.useState([]),[u,l]=t.useState(!0),[c,d]=t.useState(null),i=t.useCallback(async()=>{l(!0),d(null);try{const x=await e.getInvoices(a);n(x)}catch(x){d(x instanceof Error?x.message:"Failed to load invoices")}finally{l(!1)}},[e,a]);return t.useEffect(()=>{i()},[i]),{invoices:o,isLoading:u,error:c,refresh:i}}function ls(a,r){const e=W(r),[o,n]=t.useState([]),[u,l]=t.useState(!0),[c,d]=t.useState(null),i=t.useCallback(async()=>{l(!0),d(null);try{const x=await e.getCurrentUsage(a);n(x)}catch(x){d(x instanceof Error?x.message:"Failed to load usage")}finally{l(!1)}},[e,a]);return t.useEffect(()=>{i()},[i]),{usage:o,isLoading:u,error:c,refresh:i}}const As={active:"ss-badge-active"};function cs({customerId:a,portalToken:r,onChangePlan:e,onCancel:o,appearance:n}){const{appearance:u}=E(),{customer:l,isLoading:c,error:d}=os(a,r),i=n??u;return s.jsx(M,{appearance:i,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Subscription"}),c&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),l&&!c&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Customer"}),s.jsx("input",{className:"ss-input",value:l.name||l.email,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Status"}),s.jsx("div",{children:s.jsx("span",{className:`ss-badge ${As.active}`,children:"Active"})})]}),s.jsxs("div",{className:"ss-btn-group",children:[e&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-primary",onClick:e,children:"Change plan"}),o&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger",onClick:o,children:"Cancel subscription"})]})]})]})})}const Ds={paid:"ss-badge-active",open:"ss-badge-trialing",draft:"ss-badge-paused",void:"ss-badge-canceled",uncollectible:"ss-badge-past-due"};function Ms(a){return new Date(a).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function Us(a){return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2}).format(a/100)}function ds({customerId:a,portalToken:r,appearance:e}){const{appearance:o}=E(),{invoices:n,isLoading:u,error:l}=is(a,r),c=e??o,d=[...n].sort((i,x)=>new Date(x.createdAt).getTime()-new Date(i.createdAt).getTime());return s.jsx(M,{appearance:c,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Invoices"}),u&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),l&&s.jsx("div",{className:"ss-global-error",children:l}),!u&&d.length===0&&s.jsx("p",{className:"ss-empty",children:"No invoices yet."}),!u&&d.length>0&&s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsxs("tr",{children:[s.jsx("th",{className:"ss-th",children:"Date"}),s.jsx("th",{className:"ss-th",children:"Amount"}),s.jsx("th",{className:"ss-th",children:"Status"}),s.jsx("th",{className:"ss-th",children:"PDF"})]})}),s.jsx("tbody",{children:d.map(i=>s.jsxs("tr",{className:"ss-tr",children:[s.jsx("td",{className:"ss-td",children:Ms(i.createdAt)}),s.jsx("td",{className:"ss-td",children:Us(i.amountCents)}),s.jsx("td",{className:"ss-td",children:s.jsx("span",{className:`ss-badge ${Ds[i.status]||""}`,children:i.status})}),s.jsx("td",{className:"ss-td",children:i.pdfUrl?s.jsx("a",{className:"ss-link",href:i.pdfUrl,target:"_blank",rel:"noopener noreferrer",children:"Download"}):"—"})]},i.id))})]})]})})}function us({customerId:a,limits:r,portalToken:e,appearance:o}){const{appearance:n}=E(),{usage:u,isLoading:l,error:c}=ls(a,e),d=o??n;return s.jsx(M,{appearance:d,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Usage"}),l&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),c&&s.jsx("div",{className:"ss-global-error",children:c}),!l&&u.length===0&&s.jsx("p",{className:"ss-empty",children:"No usage data."}),!l&&u.map(i=>{const x=r==null?void 0:r[i.metric],p=x?Math.min(100,i.total/x*100):null;return s.jsxs("div",{className:"ss-usage-item",children:[s.jsxs("div",{className:"ss-usage-header",children:[s.jsx("span",{className:"ss-usage-metric",children:i.metric}),s.jsxs("span",{className:"ss-usage-value",children:[i.total.toLocaleString(),x?` / ${x.toLocaleString()}`:""]})]}),p!==null&&s.jsx("div",{className:"ss-progress-bar",children:s.jsx("div",{className:`ss-progress-fill ${p>90?"ss-progress-danger":""}`,style:{width:`${p}%`}})})]},i.metric)})]})})}function Vs({customerId:a,portalToken:r,limits:e,onChangePlan:o,onCancel:n,appearance:u}){const{appearance:l}=E(),c=u??l,[d,i]=t.useState("subscription"),x=[{id:"subscription",label:"Subscription"},{id:"invoices",label:"Invoices"},{id:"usage",label:"Usage"}];return s.jsx(M,{appearance:c,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Billing"}),s.jsx("div",{className:"ss-tab-group",children:x.map(p=>s.jsx("button",{type:"button",className:`ss-tab ${d===p.id?"ss-tab-active":""}`,onClick:()=>i(p.id),children:p.label},p.id))}),s.jsxs("div",{className:"ss-tab-content",children:[d==="subscription"&&s.jsx(cs,{customerId:a,portalToken:r,onChangePlan:o,onCancel:n}),d==="invoices"&&s.jsx(ds,{customerId:a,portalToken:r}),d==="usage"&&s.jsx(us,{customerId:a,portalToken:r,limits:e})]})]})})}function Rs({customerId:a,portalToken:r,onApplied:e,appearance:o}){const{appearance:n}=E(),u=W(r),l=o??n,[c,d]=t.useState(""),[i,x]=t.useState(!1),[p,g]=t.useState(null),[m,v]=t.useState(null),b=t.useCallback(async N=>{if(N.preventDefault(),!!c.trim()){x(!0),g(null),v(null);try{const h=await u.applyCoupon(a,c.trim());v(`Coupon applied! ${h.discountType==="percent"?`${h.amount}% off`:`$${(h.amount/100).toFixed(2)} off`}`),d(""),e==null||e(h)}catch(h){g(h instanceof Error?h.message:"Invalid coupon code")}finally{x(!1)}}},[u,a,c,e]);return s.jsx(M,{appearance:l,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Apply coupon"}),p&&s.jsx("div",{className:"ss-global-error",children:p}),m&&s.jsx("div",{className:"ss-success-msg",children:m}),s.jsxs("form",{onSubmit:b,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-coupon-code",children:"Coupon code"}),s.jsx("input",{id:"ss-coupon-code",className:"ss-input",type:"text",placeholder:"Enter coupon code",value:c,onChange:N=>d(N.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i||!c.trim(),children:[i&&s.jsx("span",{className:"ss-spinner"}),"Apply"]})]})]})})}function qs(){const{client:a}=E();return{report:a.report}}function ss(){const{client:a}=E(),[r,e]=t.useState(null),[o,n]=t.useState(!1),[u,l]=t.useState(null),c=t.useCallback(async d=>{n(!0),l(null);try{const i=await a.report.executeQuery(d);return e(i),i}catch(i){return l(i instanceof Error?i.message:"Query failed"),null}finally{n(!1)}},[a]);return{result:r,execute:c,isLoading:o,error:u}}function ps(a){const{client:r}=E(),[e,o]=t.useState(null),[n,u]=t.useState(!0),[l,c]=t.useState(null),d=t.useCallback(async()=>{u(!0),c(null);try{const i=await r.report.listQueries(a);o(i)}catch(i){c(i instanceof Error?i.message:"Failed to load queries")}finally{u(!1)}},[r,a]);return t.useEffect(()=>{d()},[d]),{queries:(e==null?void 0:e.data)??[],meta:e==null?void 0:e.meta,isLoading:n,error:l,refresh:d}}function Hs(a){const{client:r}=E(),[e,o]=t.useState(null),[n,u]=t.useState(!0),[l,c]=t.useState(null),d=t.useCallback(async()=>{u(!0),c(null);try{const i=await r.report.getDashboard(a);o(i)}catch(i){c(i instanceof Error?i.message:"Failed to load dashboard")}finally{u(!1)}},[r,a]);return t.useEffect(()=>{d()},[d]),{dashboard:e,isLoading:n,error:l,refresh:d}}function Ws(a,r,e="https://api.saas-support.com/v1"){const o=t.useMemo(()=>{const p=new U.Transport(e,{type:"embedToken",token:a});return new U.ReportClient(p)},[a,e]),[n,u]=t.useState(null),[l,c]=t.useState(!0),[d,i]=t.useState(null),x=t.useCallback(async()=>{c(!0),i(null);try{const p=await o.getDashboard(r);u(p)}catch(p){i(p instanceof Error?p.message:"Failed to load dashboard")}finally{c(!1)}},[o,r]);return t.useEffect(()=>{x()},[x]),{dashboard:n,reportClient:o,isLoading:l,error:d,refresh:x}}function _s({onResult:a,mode:r="both",placeholder:e,appearance:o}){const{appearance:n}=E(),{execute:u,isLoading:l,error:c}=ss(),d=o??n,[i,x]=t.useState(""),[p,g]=t.useState(r==="sql"?"sql":"nl"),m=t.useCallback(async v=>{if(v.preventDefault(),!i.trim())return;const N=await u(p==="sql"?{sql:i}:{naturalLanguage:i});N&&(a==null||a(N))},[i,p,u,a]);return s.jsx(M,{appearance:d,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[r==="both"&&s.jsxs("div",{className:"ss-tab-group ss-tab-group-sm",children:[s.jsx("button",{type:"button",className:`ss-tab ${p==="nl"?"ss-tab-active":""}`,onClick:()=>g("nl"),children:"Natural Language"}),s.jsx("button",{type:"button",className:`ss-tab ${p==="sql"?"ss-tab-active":""}`,onClick:()=>g("sql"),children:"SQL"})]}),c&&s.jsx("div",{className:"ss-global-error",children:c}),s.jsxs("form",{onSubmit:m,children:[s.jsx("div",{className:"ss-field",children:s.jsx("textarea",{className:"ss-input ss-query-textarea",placeholder:e??(p==="sql"?"SELECT ...":"Ask a question about your data..."),value:i,onChange:v=>x(v.target.value),rows:3})}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:l||!i.trim(),children:[l&&s.jsx("span",{className:"ss-spinner"}),"Run query"]})]})]})})}function hs({columns:a,rows:r,sortable:e=!0,maxRows:o,appearance:n}){const{appearance:u}=E(),l=n??u,[c,d]=t.useState(null),[i,x]=t.useState("asc"),p=t.useMemo(()=>c?[...r].sort((b,N)=>{const h=b[c],j=N[c];if(h==null&&j==null)return 0;if(h==null)return 1;if(j==null)return-1;if(typeof h=="number"&&typeof j=="number")return i==="asc"?h-j:j-h;const S=String(h),k=String(j);return i==="asc"?S.localeCompare(k):k.localeCompare(S)}):r,[r,c,i]),g=o?p.slice(0,o):p,m=b=>{e&&(c===b?x(N=>N==="asc"?"desc":"asc"):(d(b),x("asc")))};function v(b){return b==null?"":typeof b=="object"?JSON.stringify(b):String(b)}return s.jsx(M,{appearance:l,children:s.jsxs("div",{className:"ss-table-container",children:[s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:a.map(b=>s.jsxs("th",{className:`ss-th ${e?"ss-th-sortable":""} ${c===b?i==="asc"?"ss-sorted-asc":"ss-sorted-desc":""}`,onClick:()=>m(b),children:[b,c===b&&s.jsx("span",{className:"ss-sort-indicator",children:i==="asc"?" ▲":" ▼"})]},b))})}),s.jsx("tbody",{children:g.map((b,N)=>s.jsx("tr",{className:"ss-tr",children:a.map(h=>s.jsx("td",{className:"ss-td",children:v(b[h])},h))},N))})]}),o&&r.length>o&&s.jsxs("div",{className:"ss-table-footer",children:["Showing ",o," of ",r.length," rows"]})]})})}function Gs(a,r="#6366f1"){const e=parseInt(r.replace("#","").slice(0,2),16),o=[];for(let n=0;n<a;n++){const u=(e+n*Math.floor(360/Math.max(a,1)))%360;o.push(`hsl(${u}, 65%, 55%)`)}return o}function Ys({labels:a,values:r,w:e,h:o,colors:n}){const u=Math.max(...r,1),l=40,c=e-l*2,d=o-l*2,i=Math.max(1,c/a.length-4);return s.jsxs("g",{children:[s.jsx("line",{x1:l,y1:o-l,x2:e-l,y2:o-l,stroke:"#ccc",strokeWidth:1}),r.map((x,p)=>{const g=x/u*d,m=l+c/a.length*p+2,v=o-l-g;return s.jsxs("g",{children:[s.jsx("rect",{x:m,y:v,width:i,height:g,fill:n[p%n.length],rx:2}),s.jsx("text",{x:m+i/2,y:o-l+14,textAnchor:"middle",fontSize:10,fill:"#666",children:a[p].length>8?a[p].slice(0,8)+"...":a[p]})]},p)})]})}function Qs({labels:a,values:r,w:e,h:o,colors:n}){const u=Math.max(...r,1),l=40,c=e-l*2,d=o-l*2,i=a.length>1?c/(a.length-1):0,x=r.map((p,g)=>{const m=l+i*g,v=o-l-p/u*d;return`${m},${v}`});return s.jsxs("g",{children:[[.25,.5,.75,1].map(p=>{const g=o-l-p*d;return s.jsx("line",{x1:l,y1:g,x2:e-l,y2:g,stroke:"#eee",strokeWidth:1},p)}),s.jsx("polyline",{points:x.join(" "),fill:"none",stroke:n[0],strokeWidth:2}),r.map((p,g)=>{const m=l+i*g,v=o-l-p/u*d;return s.jsx("circle",{cx:m,cy:v,r:4,fill:n[0]},g)})]})}function Js({labels:a,values:r,w:e,h:o,colors:n}){const u=r.reduce((g,m)=>g+m,0)||1,l=e/2,c=o/2-20,d=Math.min(e,o)/2-40,i=2*Math.PI*d;let x=0;const p=r.map((g,m)=>{const v=g/u,b=v*i,N={dash:b,offset:x,color:n[m%n.length],label:a[m],pct:v};return x+=b,N});return s.jsxs("g",{children:[p.map((g,m)=>s.jsx("circle",{cx:l,cy:c,r:d,fill:"none",stroke:g.color,strokeWidth:d*.6,strokeDasharray:`${g.dash} ${i-g.dash}`,strokeDashoffset:-g.offset,transform:`rotate(-90 ${l} ${c})`},m)),s.jsx("g",{transform:`translate(${l-a.length*30}, ${o-20})`,children:p.slice(0,6).map((g,m)=>s.jsxs("g",{transform:`translate(${m*60}, 0)`,children:[s.jsx("rect",{width:10,height:10,fill:g.color,rx:2}),s.jsx("text",{x:14,y:9,fontSize:9,fill:"#666",children:g.label.length>6?g.label.slice(0,6)+"..":g.label})]},m))})]})}function xs({type:a,data:r,title:e,width:o=400,height:n=300,appearance:u}){const{appearance:l}=E(),c=u??l,d=t.useMemo(()=>Gs(r.labels.length),[r.labels.length]);return s.jsx(M,{appearance:c,children:s.jsxs("div",{className:"ss-chart-container",children:[e&&s.jsx("h3",{className:"ss-chart-title",children:e}),s.jsxs("svg",{viewBox:`0 0 ${o} ${n}`,width:"100%",style:{maxWidth:o},children:[a==="bar"&&s.jsx(Ys,{labels:r.labels,values:r.values,w:o,h:n,colors:d}),a==="line"&&s.jsx(Qs,{labels:r.labels,values:r.values,w:o,h:n,colors:d}),a==="pie"&&s.jsx(Js,{labels:r.labels,values:r.values,w:o,h:n,colors:d})]})]})})}function Zs({dashboardId:a,embedToken:r,baseUrl:e,refreshInterval:o,appearance:n}){const u=E(),l=n??(u==null?void 0:u.appearance),c=t.useMemo(()=>{if(r){const h=e??"https://api.saas-support.com/v1",j=new U.Transport(h,{type:"embedToken",token:r});return new U.ReportClient(j)}return u.client.report},[r,e,u]),[d,i]=t.useState([]),[x,p]=t.useState({}),[g,m]=t.useState(!0),[v,b]=t.useState(null),N=t.useCallback(async()=>{m(!0),b(null);try{const h=await c.getDashboard(a),j=JSON.parse(h.layoutJson||"[]");i(j);const S={};for(const k of j)try{const P=await c.listQueries({search:k.queryId,perPage:1});if(P.data.length>0&&P.data[0].generatedSql){const z=await c.executeQuery({sql:P.data[0].generatedSql});S[k.queryId]=z}}catch{}p(S)}catch(h){b(h instanceof Error?h.message:"Failed to load dashboard")}finally{m(!1)}},[c,a]);return t.useEffect(()=>{N()},[N]),t.useEffect(()=>{if(!o||o<=0)return;const h=setInterval(N,o*1e3);return()=>clearInterval(h)},[o,N]),s.jsx(M,{appearance:l,children:s.jsxs("div",{className:"ss-dashboard-grid",children:[g&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading dashboard..."]}),v&&s.jsx("div",{className:"ss-global-error",children:v}),!g&&d.map((h,j)=>{const S=x[h.queryId];if(!S)return null;const k=S.columns.length>=2?{labels:S.rows.map(P=>String(P[S.columns[0]]??"")),values:S.rows.map(P=>Number(P[S.columns[1]]??0))}:{labels:[],values:[]};return s.jsxs("div",{className:"ss-widget",children:[h.title&&s.jsx("h4",{className:"ss-widget-header",children:h.title}),h.chartType==="table"?s.jsx(hs,{columns:S.columns,rows:S.rows,maxRows:50}):s.jsx(xs,{type:h.chartType||"bar",data:k,width:h.w,height:h.h})]},j)})]})})}function Ks(a){return new Date(a).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function Xs({onSelectQuery:a,onRunQuery:r,appearance:e}){const{appearance:o}=E(),{queries:n,isLoading:u,error:l}=ps(),{execute:c,isLoading:d}=ss(),i=e??o,x=t.useCallback(async p=>{if(!p.generatedSql)return;const g=await c({sql:p.generatedSql});g&&(r==null||r(g))},[c,r]);return s.jsx(M,{appearance:i,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Saved Queries"}),u&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),l&&s.jsx("div",{className:"ss-global-error",children:l}),!u&&n.length===0&&s.jsx("p",{className:"ss-empty",children:"No saved queries."}),!u&&n.map(p=>s.jsxs("div",{className:"ss-saved-query-card",onClick:()=>a==null?void 0:a(p),children:[s.jsxs("div",{className:"ss-saved-query-header",children:[s.jsx("span",{className:"ss-saved-query-name",children:p.name}),p.chartType&&s.jsx("span",{className:"ss-badge",children:p.chartType})]}),p.naturalLanguage&&s.jsx("p",{className:"ss-saved-query-desc",children:p.naturalLanguage}),s.jsxs("div",{className:"ss-saved-query-footer",children:[s.jsx("span",{className:"ss-saved-query-date",children:Ks(p.createdAt)}),s.jsx("button",{type:"button",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:d||!p.generatedSql,onClick:g=>{g.stopPropagation(),x(p)},children:d?s.jsx("span",{className:"ss-spinner"}):"Run"})]})]},p.id))]})})}function sa({embedToken:a,dashboardId:r,baseUrl:e="https://api.saas-support.com/v1",refreshInterval:o,appearance:n}){const u=t.useMemo(()=>{const b=new U.Transport(e,{type:"embedToken",token:a});return new U.ReportClient(b)},[a,e]),[l,c]=t.useState([]),[d,i]=t.useState(!0),[x,p]=t.useState(null),g=t.useMemo(()=>Y(n),[n]),m=t.useMemo(()=>Q(g),[g]),v=t.useCallback(async()=>{i(!0),p(null);try{const b=await u.getDashboard(r),N=JSON.parse(b.layoutJson||"[]"),h=await Promise.all(N.map(async j=>{try{const S=await u.listQueries({search:j.queryId,perPage:1});if(S.data.length>0&&S.data[0].generatedSql){const k=await u.executeQuery({sql:S.data[0].generatedSql});return{...j,result:k}}}catch{}return j}));c(h)}catch(b){p(b instanceof Error?b.message:"Failed to load dashboard")}finally{i(!1)}},[u,r]);return t.useEffect(()=>{v()},[v]),t.useEffect(()=>{if(!o||o<=0)return;const b=setInterval(v,o*1e3);return()=>clearInterval(b)},[o,v]),s.jsx("div",{ref:b=>{if(!b||b.shadowRoot)return;const N=b.attachShadow({mode:"open"}),h=document.createElement("style");h.textContent=m,N.appendChild(h);const j=document.createElement("div");N.appendChild(j)},style:{display:"contents"},children:s.jsxs("div",{className:"ss-dashboard-grid",children:[d&&s.jsx("div",{className:"ss-loading",children:"Loading dashboard..."}),x&&s.jsx("div",{className:"ss-global-error",children:x}),!d&&l.map((b,N)=>{if(!b.result)return null;const{columns:h,rows:j}=b.result;return s.jsxs("div",{className:"ss-widget",children:[b.title&&s.jsx("h4",{className:"ss-widget-header",children:b.title}),s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:h.map(S=>s.jsx("th",{className:"ss-th",children:S},S))})}),s.jsx("tbody",{children:j.slice(0,50).map((S,k)=>s.jsx("tr",{className:"ss-tr",children:h.map(P=>s.jsx("td",{className:"ss-td",children:String(S[P]??"")},P))},k))})]})]},N)})]})})}exports.SaaSError=U.SaaSError;exports.SaaSSupport=U.SaaSSupport;exports.isMfaRequired=U.isMfaRequired;exports.Chart=xs;exports.CouponInput=Rs;exports.DashboardView=Zs;exports.DataTable=hs;exports.InvoiceHistory=ds;exports.OrgSwitcher=Fs;exports.PaymentPortal=Vs;exports.PricingTable=Bs;exports.QueryInput=_s;exports.ReportEmbed=sa;exports.SaaSContext=J;exports.SaaSProvider=js;exports.SavedQueryList=Xs;exports.SignIn=Cs;exports.SignUp=Ps;exports.SubscriptionStatus=cs;exports.UsageDisplay=us;exports.UserButton=Es;exports.UserProfile=Is;exports.useAuth=H;exports.useBilling=Ts;exports.useDashboard=Hs;exports.useDeleteAccount=es;exports.useEmbedDashboard=Ws;exports.useInvoices=is;exports.useOrg=K;exports.useProfile=X;exports.useQuery=ss;exports.useReport=qs;exports.useSaaSContext=E;exports.useSavedQueries=ps;exports.useSignIn=Z;exports.useSignUp=as;exports.useSubscription=os;exports.useUsage=ls;exports.useUser=$s;
|