@saas-support/react 0.5.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/react.cjs CHANGED
@@ -1,8 +1,8 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),A=require("./index.cjs"),fs=require("react-dom"),G=a.createContext(null);function I(){const e=a.useContext(G);if(!e)throw new Error("useSaaSContext must be used within a <SaaSProvider>");return e}function ys({publishableKey:e,apiKey:t,baseUrl:r,appearance:l,children:n}){const[u]=a.useState(()=>new A.SaaSSupport({publishableKey:e,apiKey:t,baseUrl:r})),[i,d]=a.useState(null),[c,o]=a.useState(!1),[m,p]=a.useState(null);return a.useEffect(()=>{let g=!1;u.load().then(async()=>{if(g)return;const w=await u.auth.getUser(),f=await u.auth.getSettings();d(w),p(f),o(!0)});const h=u.auth.onAuthStateChange(w=>{g||d(w)});return()=>{g=!0,h(),u.destroy()}},[u]),s.jsx(G.Provider,{value:{client:u,user:i,isLoaded:c,appearance:l,settings:m},children:n})}const vs={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"},js={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"};function V(e){const t=(e==null?void 0:e.baseTheme)==="dark"?js:vs,r=e==null?void 0:e.variables;return{colorPrimary:(r==null?void 0:r.colorPrimary)??t.colorPrimary,colorPrimaryHover:r!=null&&r.colorPrimary?ws(r.colorPrimary,10):t.colorPrimaryHover,colorBackground:(r==null?void 0:r.colorBackground)??t.colorBackground,colorText:(r==null?void 0:r.colorText)??t.colorText,colorTextSecondary:t.colorTextSecondary,colorInputBackground:(r==null?void 0:r.colorInputBackground)??t.colorInputBackground,colorInputBorder:(r==null?void 0:r.colorInputBorder)??t.colorInputBorder,colorError:(r==null?void 0:r.colorError)??t.colorError,colorSuccess:(r==null?void 0:r.colorSuccess)??t.colorSuccess,colorWarning:(r==null?void 0:r.colorWarning)??t.colorWarning,fontFamily:(r==null?void 0:r.fontFamily)??t.fontFamily,borderRadius:(r==null?void 0:r.borderRadius)??t.borderRadius}}function ws(e,t){const r=parseInt(e.replace("#",""),16),l=Math.max(0,(r>>16)-Math.round(2.55*t)),n=Math.max(0,(r>>8&255)-Math.round(2.55*t)),u=Math.max(0,(r&255)-Math.round(2.55*t));return`#${(l<<16|n<<8|u).toString(16).padStart(6,"0")}`}function Q(e){return`
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: ${e.fontFamily};
5
- color: ${e.colorText};
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: ${e.colorBackground};
14
- border-radius: ${e.borderRadius};
13
+ background: ${a.colorBackground};
14
+ border-radius: ${a.borderRadius};
15
15
  padding: 32px;
16
16
  width: 100%;
17
17
  max-width: 480px;
18
18
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
19
- border: 1px solid ${e.colorInputBorder};
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: ${e.colorText};
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: ${e.colorTextSecondary};
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: ${e.colorText};
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 ${e.colorInputBorder};
56
- border-radius: calc(${e.borderRadius} - 2px);
57
- background: ${e.colorInputBackground};
58
- color: ${e.colorText};
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: ${e.colorPrimary};
65
- box-shadow: 0 0 0 3px ${e.colorPrimary}22;
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: ${e.colorError}; }
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: ${e.colorError};
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: ${e.colorError};
85
- background: ${e.colorError}11;
86
- border: 1px solid ${e.colorError}33;
87
- border-radius: calc(${e.borderRadius} - 2px);
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: ${e.colorSuccess};
96
- background: ${e.colorSuccess}11;
97
- border: 1px solid ${e.colorSuccess}33;
98
- border-radius: calc(${e.borderRadius} - 2px);
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: ${e.colorTextSecondary};
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: ${e.colorTextSecondary};
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(${e.borderRadius} - 2px);
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: ${e.colorPrimary};
135
+ background: ${a.colorPrimary};
136
136
  color: #fff;
137
137
  }
138
138
 
139
- .ss-btn-primary:hover:not(:disabled) { background: ${e.colorPrimaryHover}; }
139
+ .ss-btn-primary:hover:not(:disabled) { background: ${a.colorPrimaryHover}; }
140
140
 
141
141
  .ss-btn-danger {
142
- background: ${e.colorError};
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: ${e.colorInputBackground};
150
- color: ${e.colorTextSecondary};
151
- border: 1px solid ${e.colorInputBorder};
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: ${e.colorInputBackground};
173
- border: 1px solid ${e.colorInputBorder};
174
- color: ${e.colorText};
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(${e.borderRadius} - 2px);
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 ${e.colorInputBorder};
196
- border-radius: calc(${e.borderRadius} - 2px);
197
- background: ${e.colorInputBackground};
198
- color: ${e.colorText};
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: ${e.colorInputBorder}; }
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: ${e.colorTextSecondary};
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: ${e.colorInputBorder};
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: ${e.colorTextSecondary};
229
+ color: ${a.colorTextSecondary};
230
230
  }
231
231
 
232
232
  .ss-link {
233
- color: ${e.colorPrimary};
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: ${e.colorPrimary};
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 ${e.colorPrimary}33; }
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: ${e.colorBackground};
283
- border: 1px solid ${e.colorInputBorder};
284
- border-radius: ${e.borderRadius};
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 ${e.colorInputBorder};
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: ${e.colorTextSecondary};
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: ${e.colorText};
311
+ color: ${a.colorText};
312
312
  background: none;
313
313
  border: none;
314
314
  text-align: left;
@@ -316,9 +316,9 @@
316
316
  transition: background 0.1s;
317
317
  }
318
318
 
319
- .ss-dropdown-item:hover { background: ${e.colorInputBackground}; }
320
- .ss-dropdown-item-danger { color: ${e.colorError}; }
321
- .ss-dropdown-item-active { font-weight: 600; color: ${e.colorPrimary}; }
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
322
 
323
323
  .ss-dropdown-section-title {
324
324
  padding: 8px 16px 4px;
@@ -326,7 +326,7 @@
326
326
  font-weight: 600;
327
327
  text-transform: uppercase;
328
328
  letter-spacing: 0.5px;
329
- color: ${e.colorTextSecondary};
329
+ color: ${a.colorTextSecondary};
330
330
  }
331
331
 
332
332
  .ss-org-check {
@@ -337,7 +337,7 @@
337
337
  .ss-danger-zone {
338
338
  padding-top: 20px;
339
339
  margin-top: 20px;
340
- border-top: 2px solid ${e.colorError}33;
340
+ border-top: 2px solid ${a.colorError}33;
341
341
  }
342
342
 
343
343
  /* Badges */
@@ -350,21 +350,21 @@
350
350
  border-radius: 999px;
351
351
  text-transform: uppercase;
352
352
  letter-spacing: 0.3px;
353
- background: ${e.colorInputBackground};
354
- color: ${e.colorTextSecondary};
353
+ background: ${a.colorInputBackground};
354
+ color: ${a.colorTextSecondary};
355
355
  }
356
356
 
357
- .ss-badge-active { background: ${e.colorSuccess}22; color: ${e.colorSuccess}; }
358
- .ss-badge-trialing { background: ${e.colorPrimary}22; color: ${e.colorPrimary}; }
359
- .ss-badge-past-due { background: ${e.colorError}22; color: ${e.colorError}; }
360
- .ss-badge-paused { background: ${e.colorWarning}22; color: ${e.colorWarning}; }
361
- .ss-badge-canceled { background: ${e.colorTextSecondary}22; color: ${e.colorTextSecondary}; }
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}; }
362
362
 
363
363
  /* Tabs */
364
364
 
365
365
  .ss-tab-group {
366
366
  display: flex;
367
- border-bottom: 1px solid ${e.colorInputBorder};
367
+ border-bottom: 1px solid ${a.colorInputBorder};
368
368
  margin-bottom: 24px;
369
369
  }
370
370
 
@@ -375,7 +375,7 @@
375
375
  font-size: 14px;
376
376
  font-weight: 500;
377
377
  font-family: inherit;
378
- color: ${e.colorTextSecondary};
378
+ color: ${a.colorTextSecondary};
379
379
  background: none;
380
380
  border: none;
381
381
  border-bottom: 2px solid transparent;
@@ -383,11 +383,11 @@
383
383
  transition: color 0.15s, border-color 0.15s;
384
384
  }
385
385
 
386
- .ss-tab:hover { color: ${e.colorText}; }
386
+ .ss-tab:hover { color: ${a.colorText}; }
387
387
 
388
388
  .ss-tab-active {
389
- color: ${e.colorPrimary};
390
- border-bottom-color: ${e.colorPrimary};
389
+ color: ${a.colorPrimary};
390
+ border-bottom-color: ${a.colorPrimary};
391
391
  }
392
392
 
393
393
  .ss-tab-content .ss-card { box-shadow: none; border: none; padding: 0; }
@@ -406,30 +406,30 @@
406
406
  text-align: left;
407
407
  padding: 10px 12px;
408
408
  font-weight: 600;
409
- color: ${e.colorTextSecondary};
410
- border-bottom: 2px solid ${e.colorInputBorder};
409
+ color: ${a.colorTextSecondary};
410
+ border-bottom: 2px solid ${a.colorInputBorder};
411
411
  white-space: nowrap;
412
412
  }
413
413
 
414
414
  .ss-th-sortable { cursor: pointer; user-select: none; }
415
- .ss-th-sortable:hover { color: ${e.colorText}; }
415
+ .ss-th-sortable:hover { color: ${a.colorText}; }
416
416
 
417
417
  .ss-sort-indicator { font-size: 10px; }
418
- .ss-sorted-asc, .ss-sorted-desc { color: ${e.colorPrimary}; }
418
+ .ss-sorted-asc, .ss-sorted-desc { color: ${a.colorPrimary}; }
419
419
 
420
420
  .ss-td {
421
421
  padding: 10px 12px;
422
- border-bottom: 1px solid ${e.colorInputBorder};
423
- color: ${e.colorText};
422
+ border-bottom: 1px solid ${a.colorInputBorder};
423
+ color: ${a.colorText};
424
424
  }
425
425
 
426
- .ss-tr:hover .ss-td { background: ${e.colorInputBackground}; }
426
+ .ss-tr:hover .ss-td { background: ${a.colorInputBackground}; }
427
427
 
428
428
  .ss-table-footer {
429
429
  text-align: center;
430
430
  padding: 8px;
431
431
  font-size: 12px;
432
- color: ${e.colorTextSecondary};
432
+ color: ${a.colorTextSecondary};
433
433
  }
434
434
 
435
435
  /* Pricing */
@@ -441,15 +441,15 @@
441
441
  }
442
442
 
443
443
  .ss-pricing-card {
444
- background: ${e.colorBackground};
445
- border: 1px solid ${e.colorInputBorder};
446
- border-radius: ${e.borderRadius};
444
+ background: ${a.colorBackground};
445
+ border: 1px solid ${a.colorInputBorder};
446
+ border-radius: ${a.borderRadius};
447
447
  padding: 24px;
448
448
  display: flex;
449
449
  flex-direction: column;
450
450
  }
451
451
 
452
- .ss-pricing-card-current { border-color: ${e.colorPrimary}; }
452
+ .ss-pricing-card-current { border-color: ${a.colorPrimary}; }
453
453
 
454
454
  .ss-pricing-header {
455
455
  display: flex;
@@ -461,7 +461,7 @@
461
461
  .ss-pricing-name {
462
462
  font-size: 18px;
463
463
  font-weight: 600;
464
- color: ${e.colorText};
464
+ color: ${a.colorText};
465
465
  }
466
466
 
467
467
  .ss-pricing-price { margin-bottom: 12px; }
@@ -469,17 +469,17 @@
469
469
  .ss-pricing-amount {
470
470
  font-size: 32px;
471
471
  font-weight: 700;
472
- color: ${e.colorText};
472
+ color: ${a.colorText};
473
473
  }
474
474
 
475
475
  .ss-pricing-interval {
476
476
  font-size: 14px;
477
- color: ${e.colorTextSecondary};
477
+ color: ${a.colorTextSecondary};
478
478
  }
479
479
 
480
480
  .ss-pricing-desc {
481
481
  font-size: 14px;
482
- color: ${e.colorTextSecondary};
482
+ color: ${a.colorTextSecondary};
483
483
  margin-bottom: 16px;
484
484
  }
485
485
 
@@ -491,11 +491,11 @@
491
491
 
492
492
  .ss-pricing-feature {
493
493
  font-size: 14px;
494
- color: ${e.colorText};
494
+ color: ${a.colorText};
495
495
  padding: 4px 0;
496
496
  }
497
497
 
498
- .ss-check { color: ${e.colorSuccess}; margin-right: 6px; }
498
+ .ss-check { color: ${a.colorSuccess}; margin-right: 6px; }
499
499
 
500
500
  /* Usage / Progress */
501
501
 
@@ -510,30 +510,30 @@
510
510
  .ss-usage-metric {
511
511
  font-size: 14px;
512
512
  font-weight: 500;
513
- color: ${e.colorText};
513
+ color: ${a.colorText};
514
514
  }
515
515
 
516
516
  .ss-usage-value {
517
517
  font-size: 14px;
518
- color: ${e.colorTextSecondary};
518
+ color: ${a.colorTextSecondary};
519
519
  }
520
520
 
521
521
  .ss-progress-bar {
522
522
  width: 100%;
523
523
  height: 8px;
524
- background: ${e.colorInputBackground};
524
+ background: ${a.colorInputBackground};
525
525
  border-radius: 4px;
526
526
  overflow: hidden;
527
527
  }
528
528
 
529
529
  .ss-progress-fill {
530
530
  height: 100%;
531
- background: ${e.colorPrimary};
531
+ background: ${a.colorPrimary};
532
532
  border-radius: 4px;
533
533
  transition: width 0.3s;
534
534
  }
535
535
 
536
- .ss-progress-danger { background: ${e.colorError}; }
536
+ .ss-progress-danger { background: ${a.colorError}; }
537
537
 
538
538
  /* Chart */
539
539
 
@@ -542,7 +542,7 @@
542
542
  .ss-chart-title {
543
543
  font-size: 16px;
544
544
  font-weight: 600;
545
- color: ${e.colorText};
545
+ color: ${a.colorText};
546
546
  margin-bottom: 12px;
547
547
  }
548
548
 
@@ -555,16 +555,16 @@
555
555
  }
556
556
 
557
557
  .ss-widget {
558
- background: ${e.colorBackground};
559
- border: 1px solid ${e.colorInputBorder};
560
- border-radius: ${e.borderRadius};
558
+ background: ${a.colorBackground};
559
+ border: 1px solid ${a.colorInputBorder};
560
+ border-radius: ${a.borderRadius};
561
561
  padding: 16px;
562
562
  }
563
563
 
564
564
  .ss-widget-header {
565
565
  font-size: 14px;
566
566
  font-weight: 600;
567
- color: ${e.colorText};
567
+ color: ${a.colorText};
568
568
  margin-bottom: 12px;
569
569
  }
570
570
 
@@ -572,14 +572,14 @@
572
572
 
573
573
  .ss-saved-query-card {
574
574
  padding: 12px 16px;
575
- border: 1px solid ${e.colorInputBorder};
576
- border-radius: calc(${e.borderRadius} - 2px);
575
+ border: 1px solid ${a.colorInputBorder};
576
+ border-radius: calc(${a.borderRadius} - 2px);
577
577
  margin-bottom: 8px;
578
578
  cursor: pointer;
579
579
  transition: border-color 0.15s;
580
580
  }
581
581
 
582
- .ss-saved-query-card:hover { border-color: ${e.colorPrimary}; }
582
+ .ss-saved-query-card:hover { border-color: ${a.colorPrimary}; }
583
583
 
584
584
  .ss-saved-query-header {
585
585
  display: flex;
@@ -591,12 +591,12 @@
591
591
  .ss-saved-query-name {
592
592
  font-size: 14px;
593
593
  font-weight: 600;
594
- color: ${e.colorText};
594
+ color: ${a.colorText};
595
595
  }
596
596
 
597
597
  .ss-saved-query-desc {
598
598
  font-size: 13px;
599
- color: ${e.colorTextSecondary};
599
+ color: ${a.colorTextSecondary};
600
600
  margin-bottom: 8px;
601
601
  }
602
602
 
@@ -608,7 +608,7 @@
608
608
 
609
609
  .ss-saved-query-date {
610
610
  font-size: 12px;
611
- color: ${e.colorTextSecondary};
611
+ color: ${a.colorTextSecondary};
612
612
  }
613
613
 
614
614
  /* Modal Overlay */
@@ -633,15 +633,15 @@
633
633
  }
634
634
 
635
635
  .ss-modal {
636
- background: ${e.colorBackground};
637
- border-radius: ${e.borderRadius};
636
+ background: ${a.colorBackground};
637
+ border-radius: ${a.borderRadius};
638
638
  padding: 32px;
639
639
  width: 90%;
640
640
  max-width: 480px;
641
641
  max-height: 90vh;
642
642
  overflow-y: auto;
643
643
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
644
- border: 1px solid ${e.colorInputBorder};
644
+ border: 1px solid ${a.colorInputBorder};
645
645
  animation: ss-scale-in 0.15s ease-out;
646
646
  }
647
647
 
@@ -660,14 +660,14 @@
660
660
  .ss-modal-title {
661
661
  font-size: 18px;
662
662
  font-weight: 700;
663
- color: ${e.colorText};
663
+ color: ${a.colorText};
664
664
  }
665
665
 
666
666
  .ss-modal-close {
667
667
  background: none;
668
668
  border: none;
669
669
  font-size: 20px;
670
- color: ${e.colorTextSecondary};
670
+ color: ${a.colorTextSecondary};
671
671
  cursor: pointer;
672
672
  padding: 4px;
673
673
  line-height: 1;
@@ -677,20 +677,20 @@
677
677
  }
678
678
 
679
679
  .ss-modal-close:hover {
680
- background: ${e.colorInputBackground};
681
- color: ${e.colorText};
680
+ background: ${a.colorInputBackground};
681
+ color: ${a.colorText};
682
682
  }
683
683
 
684
684
  .ss-modal-section {
685
685
  padding-top: 20px;
686
686
  margin-top: 20px;
687
- border-top: 1px solid ${e.colorInputBorder};
687
+ border-top: 1px solid ${a.colorInputBorder};
688
688
  }
689
689
 
690
690
  .ss-modal-section-title {
691
691
  font-size: 15px;
692
692
  font-weight: 600;
693
- color: ${e.colorText};
693
+ color: ${a.colorText};
694
694
  margin-bottom: 16px;
695
695
  }
696
696
 
@@ -698,7 +698,7 @@
698
698
  width: 64px;
699
699
  height: 64px;
700
700
  border-radius: 50%;
701
- background: ${e.colorPrimary};
701
+ background: ${a.colorPrimary};
702
702
  color: #fff;
703
703
  display: flex;
704
704
  align-items: center;
@@ -748,7 +748,7 @@
748
748
  }
749
749
 
750
750
  .ss-avatar-canvas {
751
- border-radius: ${e.borderRadius};
751
+ border-radius: ${a.borderRadius};
752
752
  background: #111;
753
753
  touch-action: none;
754
754
  max-width: 100%;
@@ -763,7 +763,7 @@
763
763
 
764
764
  .ss-avatar-zoom-label {
765
765
  font-size: 13px;
766
- color: ${e.colorTextSecondary};
766
+ color: ${a.colorTextSecondary};
767
767
  flex-shrink: 0;
768
768
  }
769
769
 
@@ -772,7 +772,7 @@
772
772
  height: 4px;
773
773
  -webkit-appearance: none;
774
774
  appearance: none;
775
- background: ${e.colorInputBorder};
775
+ background: ${a.colorInputBorder};
776
776
  border-radius: 2px;
777
777
  outline: none;
778
778
  }
@@ -782,7 +782,7 @@
782
782
  width: 16px;
783
783
  height: 16px;
784
784
  border-radius: 50%;
785
- background: ${e.colorPrimary};
785
+ background: ${a.colorPrimary};
786
786
  cursor: pointer;
787
787
  }
788
788
 
@@ -790,20 +790,20 @@
790
790
  width: 16px;
791
791
  height: 16px;
792
792
  border-radius: 50%;
793
- background: ${e.colorPrimary};
793
+ background: ${a.colorPrimary};
794
794
  cursor: pointer;
795
795
  border: none;
796
796
  }
797
797
 
798
798
  /* Dropzone */
799
799
  .ss-avatar-dropzone {
800
- border: 2px dashed ${e.colorInputBorder};
801
- border-radius: ${e.borderRadius};
800
+ border: 2px dashed ${a.colorInputBorder};
801
+ border-radius: ${a.borderRadius};
802
802
  padding: 40px 24px;
803
803
  text-align: center;
804
804
  cursor: pointer;
805
805
  transition: border-color 0.15s, background 0.15s;
806
- color: ${e.colorTextSecondary};
806
+ color: ${a.colorTextSecondary};
807
807
  display: flex;
808
808
  flex-direction: column;
809
809
  align-items: center;
@@ -812,8 +812,8 @@
812
812
 
813
813
  .ss-avatar-dropzone:hover,
814
814
  .ss-avatar-dropzone-active {
815
- border-color: ${e.colorPrimary};
816
- background: ${e.colorPrimary}08;
815
+ border-color: ${a.colorPrimary};
816
+ background: ${a.colorPrimary}08;
817
817
  }
818
818
 
819
819
  .ss-avatar-dropzone svg {
@@ -829,7 +829,7 @@
829
829
 
830
830
  .ss-dropdown-divider {
831
831
  height: 1px;
832
- background: ${e.colorInputBorder};
832
+ background: ${a.colorInputBorder};
833
833
  margin: 4px 0;
834
834
  }
835
835
 
@@ -850,4 +850,1194 @@
850
850
  font-size: 13px;
851
851
  padding: 6px 12px;
852
852
  }
853
- `}function B({children:e,appearance:t}){const r=a.useRef(null),[l,n]=a.useState(null);a.useEffect(()=>{var m;if(!r.current||r.current.shadowRoot){n(((m=r.current)==null?void 0:m.shadowRoot)??null);return}const i=r.current.attachShadow({mode:"open"}),d=V(t),c=document.createElement("style");c.textContent=Q(d),i.appendChild(c);const o=document.createElement("div");i.appendChild(o),n(i)},[]),a.useEffect(()=>{if(!l)return;const i=l.querySelector("style");if(i){const d=V(t);i.textContent=Q(d)}},[t,l]);const u=(l==null?void 0:l.querySelector("div"))??null;return s.jsx("div",{ref:r,style:{display:"contents"},children:u&&fs.createPortal(e,u)})}function W(){const{client:e,user:t,isLoaded:r}=I();return{isLoaded:r,isSignedIn:!!t,user:t,signOut:a.useCallback(()=>e.auth.signOut(),[e]),getToken:a.useCallback(()=>e.auth.getToken(),[e])}}function Ns(){const{user:e,isLoaded:t}=I();return{user:e,isLoaded:t}}function J(){const{client:e}=I(),[t,r]=a.useState(!1),[l,n]=a.useState(null),u=a.useCallback(async(c,o)=>{r(!0),n(null);try{return await e.auth.signIn(c,o)}catch(m){return n(m instanceof Error?m.message:"Sign in failed"),null}finally{r(!1)}},[e]),i=a.useCallback(async c=>{r(!0),n(null);try{return await e.auth.signInWithOAuth(c)}catch(o){return n(o instanceof Error?o.message:"OAuth sign in failed"),null}finally{r(!1)}},[e]),d=a.useCallback(async(c,o)=>{r(!0),n(null);try{return await e.auth.submitMfaCode(c,o)}catch(m){return n(m instanceof Error?m.message:"MFA verification failed"),null}finally{r(!1)}},[e]);return{signIn:u,signInWithOAuth:i,submitMfaCode:d,isLoading:t,error:l,setError:n}}function K(){const{client:e}=I(),[t,r]=a.useState(!1),[l,n]=a.useState(null);return{signUp:a.useCallback(async(i,d)=>{r(!0),n(null);try{return await e.auth.signUp(i,d)}catch(c){return n(c instanceof Error?c.message:"Sign up failed"),null}finally{r(!1)}},[e]),isLoading:t,error:l,setError:n}}function Y(){const{client:e}=I(),[t,r]=a.useState([]),[l,n]=a.useState(null),[u,i]=a.useState([]),[d,c]=a.useState([]),[o,m]=a.useState(!1),[p,g]=a.useState(null),h=a.useCallback(async()=>{m(!0),g(null);try{const v=await e.auth.listOrgs();r(v);const S=typeof window<"u"?localStorage.getItem("ss_selected_org"):null;if(S&&v.some(b=>b.id===S)&&!l){const b=v.find(C=>C.id===S);n(b);try{const C=await e.auth.listMembers(b.id);i(C)}catch{}}}catch(v){g(v instanceof Error?v.message:"Failed to load organizations")}finally{m(!1)}},[e,l]);a.useEffect(()=>{h()},[h]);const w=a.useCallback(async v=>{try{const S=await e.auth.getOrg(v);n(S),typeof window<"u"&&localStorage.setItem("ss_selected_org",v);const b=await e.auth.listMembers(v);i(b)}catch(S){g(S instanceof Error?S.message:"Failed to load organization")}},[e]),f=a.useCallback(async(v,S)=>{try{const b=await e.auth.createOrg(v,S);return r(C=>[...C,b]),b}catch(b){return g(b instanceof Error?b.message:"Failed to create organization"),null}},[e]),j=a.useCallback(async(v,S)=>{try{const b=await e.auth.updateOrg(v,S);return r(C=>C.map(M=>M.id===v?b:M)),(l==null?void 0:l.id)===v&&n(b),b}catch(b){return g(b instanceof Error?b.message:"Failed to update organization"),null}},[e,l]),y=a.useCallback(async v=>{try{return await e.auth.deleteOrg(v),r(S=>S.filter(b=>b.id!==v)),(l==null?void 0:l.id)===v&&(n(null),i([]),c([]),typeof window<"u"&&localStorage.removeItem("ss_selected_org")),!0}catch(S){return g(S instanceof Error?S.message:"Failed to delete organization"),!1}},[e,l]),x=a.useCallback(async(v,S,b)=>{try{return await e.auth.sendInvite(v,S,b)}catch(C){return g(C instanceof Error?C.message:"Failed to send invite"),null}},[e]),N=a.useCallback(async v=>{try{const S=await e.auth.listInvites(v);c(S)}catch(S){g(S instanceof Error?S.message:"Failed to load invites")}},[e]),$=a.useCallback(async(v,S)=>{try{return await e.auth.revokeInvite(v,S),c(b=>b.filter(C=>C.id!==S)),!0}catch(b){return g(b instanceof Error?b.message:"Failed to revoke invite"),!1}},[e]),k=a.useCallback(async(v,S,b)=>{try{return await e.auth.updateMemberRole(v,S,b),i(C=>C.map(M=>M.userId===S?{...M,role:b}:M)),!0}catch(C){return g(C instanceof Error?C.message:"Failed to update member role"),!1}},[e]),E=a.useCallback(async(v,S)=>{try{return await e.auth.removeMember(v,S),i(b=>b.filter(C=>C.userId!==S)),!0}catch(b){return g(b instanceof Error?b.message:"Failed to remove member"),!1}},[e]),P=a.useCallback(async v=>{try{const S=await e.auth.listMembers(v);i(S)}catch(S){g(S instanceof Error?S.message:"Failed to load members")}},[e]);return{orgs:t,selectedOrg:l,members:u,invites:d,isLoading:o,error:p,setError:g,refresh:h,selectOrg:w,createOrg:f,updateOrg:j,deleteOrg:y,sendInvite:x,refreshInvites:N,revokeInvite:$,updateMemberRole:k,removeMember:E,refreshMembers:P}}function ss(){const{client:e}=I(),[t,r]=a.useState(!1),[l,n]=a.useState(null);return{deleteAccount:a.useCallback(async()=>{r(!0),n(null);try{return await e.auth.deleteAccount(),!0}catch(i){return n(i instanceof Error?i.message:"Failed to delete account"),!1}finally{r(!1)}},[e]),isLoading:t,error:l,setError:n}}function Z(){const{client:e,user:t}=I(),[r,l]=a.useState(!1),[n,u]=a.useState(null),[i,d]=a.useState(null),c=a.useCallback(async p=>{l(!0),u(null),d(null);try{const g=await e.auth.updateProfile(p);return d("Profile updated"),g}catch(g){return u(g instanceof Error?g.message:"Failed to update profile"),null}finally{l(!1)}},[e]),o=a.useCallback(async(p,g)=>{l(!0),u(null),d(null);try{return await e.auth.changePassword(p,g),d("Password changed successfully"),!0}catch(h){return u(h instanceof Error?h.message:"Failed to change password"),!1}finally{l(!1)}},[e]),m=a.useCallback(async p=>{l(!0),u(null),d(null);try{const g=await e.auth.uploadAvatar(p);return d("Avatar updated"),g}catch(g){return u(g instanceof Error?g.message:"Failed to upload avatar"),null}finally{l(!1)}},[e]);return{user:t,updateProfile:c,uploadAvatar:m,changePassword:o,isLoading:r,error:n,success:i,setError:u,setSuccess:d}}const es='<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>',as='<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>',Ss='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" fill="currentColor"/></svg>';function Cs({appearance:e,signUpUrl:t,onSignUp:r}){const{appearance:l,settings:n}=I(),{signIn:u,signInWithOAuth:i,submitMfaCode:d,isLoading:c,error:o,setError:m}=J(),p=e??l,[g,h]=a.useState(""),[w,f]=a.useState(""),[j,y]=a.useState(!1),[x,N]=a.useState(""),[$,k]=a.useState(""),[E,P]=a.useState(!1),v=a.useCallback(async C=>{if(C.preventDefault(),j){await d(x,$);return}const M=await u(g,w);M&&A.isMfaRequired(M)&&(N(M.mfaToken),y(!0),m(null))},[g,w,j,x,$,u,d,m]),S=a.useCallback(async C=>{await i(C)},[i]),b=(n==null?void 0:n.googleEnabled)||(n==null?void 0:n.githubEnabled);return s.jsx(B,{appearance:p,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Sign in"}),!j&&s.jsxs(s.Fragment,{children:[(n==null?void 0:n.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>S("google"),disabled:c,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:es}}),"Continue with Google"]}),(n==null?void 0:n.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>S("github"),disabled:c,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:as}}),"Continue with GitHub"]}),b&&!E&&s.jsx("div",{className:"ss-divider",children:"or"}),b&&!E&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>P(!0),children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:Ss}}),"Login with email"]}),b&&E&&s.jsx("div",{className:"ss-divider",children:"or"})]}),o&&s.jsx("div",{className:"ss-global-error",children:o}),(E||j||!b)&&s.jsxs("form",{onSubmit:v,children:[j?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:$,onChange:C=>k(C.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:C=>h(C.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:w,onChange:C=>f(C.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"}),j?"Verify":"Continue"]})]}),j&&s.jsx("div",{className:"ss-footer",children:s.jsx("span",{className:"ss-link",onClick:()=>{y(!1),k(""),m(null)},children:"Back to sign in"})}),!j&&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 ks({appearance:e,signInUrl:t,onSignIn:r}){const{appearance:l,settings:n}=I(),{signUp:u,isLoading:i,error:d,setError:c}=K(),{signInWithOAuth:o}=J(),m=e??l,[p,g]=a.useState(""),[h,w]=a.useState(""),[f,j]=a.useState(""),[y,x]=a.useState(null),N=a.useCallback(async P=>{if(P.preventDefault(),x(null),h!==f){x("Passwords do not match");return}const v=(n==null?void 0:n.passwordMinLength)??8;if(h.length<v){x(`Password must be at least ${v} characters`);return}await u(p,h)},[p,h,f,n,u]),$=a.useCallback(async P=>{await o(P)},[o]),k=(n==null?void 0:n.googleEnabled)||(n==null?void 0:n.githubEnabled),E=y||d;return s.jsx(B,{appearance:m,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:()=>$("google"),disabled:i,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:es}}),"Continue with Google"]}),(n==null?void 0:n.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>$("github"),disabled:i,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:as}}),"Continue with GitHub"]}),k&&s.jsx("div",{className:"ss-divider",children:"or"}),E&&s.jsx("div",{className:"ss-global-error",children:E}),s.jsxs("form",{onSubmit:N,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:P=>g(P.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:P=>{w(P.target.value),x(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:f,onChange:P=>{j(P.target.value),x(null)},required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i,children:[i&&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 z=256,F=112;function $s({file:e,onCrop:t,onCancel:r}){const l=a.useRef(null),n=a.useRef(null),[u,i]=a.useState(1),[d,c]=a.useState({x:0,y:0}),[o,m]=a.useState(!1),p=a.useRef({x:0,y:0,ox:0,oy:0}),[g,h]=a.useState(!1);a.useEffect(()=>{const x=new Image,N=URL.createObjectURL(e);return x.onload=()=>{n.current=x,h(!0),c({x:0,y:0}),i(1)},x.src=N,()=>URL.revokeObjectURL(N)},[e]),a.useEffect(()=>{if(!g||!n.current||!l.current)return;const x=l.current.getContext("2d");if(!x)return;const N=n.current;x.clearRect(0,0,z,z),x.fillStyle="#111",x.fillRect(0,0,z,z);const $=Math.max(z/N.width,z/N.height)*u,k=N.width*$,E=N.height*$,P=(z-k)/2+d.x,v=(z-E)/2+d.y;x.save(),x.beginPath(),x.arc(z/2,z/2,F,0,Math.PI*2),x.clip(),x.drawImage(N,P,v,k,E),x.restore(),x.save(),x.fillStyle="rgba(0, 0, 0, 0.6)",x.fillRect(0,0,z,z),x.globalCompositeOperation="destination-out",x.beginPath(),x.arc(z/2,z/2,F,0,Math.PI*2),x.fill(),x.restore(),x.save(),x.beginPath(),x.arc(z/2,z/2,F,0,Math.PI*2),x.clip(),x.drawImage(N,P,v,k,E),x.restore(),x.strokeStyle="rgba(255, 255, 255, 0.6)",x.lineWidth=2,x.beginPath(),x.arc(z/2,z/2,F,0,Math.PI*2),x.stroke()},[u,d,g]);const w=a.useCallback(x=>{m(!0),p.current={x:x.clientX,y:x.clientY,ox:d.x,oy:d.y},x.target.setPointerCapture(x.pointerId)},[d]),f=a.useCallback(x=>{o&&c({x:p.current.ox+(x.clientX-p.current.x),y:p.current.oy+(x.clientY-p.current.y)})},[o]),j=a.useCallback(()=>m(!1),[]),y=a.useCallback(()=>{if(!n.current)return;const x=document.createElement("canvas"),N=F*2;x.width=N,x.height=N;const $=x.getContext("2d");if(!$)return;const k=n.current,E=Math.max(z/k.width,z/k.height)*u,P=k.width*E,v=k.height*E,S=(z-P)/2+d.x-(z/2-F),b=(z-v)/2+d.y-(z/2-F);$.beginPath(),$.arc(F,F,F,0,Math.PI*2),$.clip(),$.drawImage(k,S,b,P,v),x.toBlob(C=>{C&&t(C)},"image/png")},[u,d,t]);return s.jsxs("div",{className:"ss-avatar-cropper",children:[s.jsx("canvas",{ref:l,width:z,height:z,className:"ss-avatar-canvas",onPointerDown:w,onPointerMove:f,onPointerUp:j,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:u,onChange:x=>i(parseFloat(x.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 rs({onUpload:e,onClose:t,isLoading:r}){const[l,n]=a.useState(null),[u,i]=a.useState(!1),[d,c]=a.useState(null),o=a.useRef(null),m=a.useCallback(h=>{if(!h.type.startsWith("image/")){c("Please select an image file");return}if(h.size>5*1024*1024){c("Image must be smaller than 5 MB");return}c(null),n(h)},[]),p=a.useCallback(h=>{h.preventDefault(),i(!1);const w=h.dataTransfer.files[0];w&&m(w)},[m]),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:"✕"})]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),l?s.jsx($s,{file:l,onCrop:g,onCancel:()=>n(null)}):s.jsxs("div",{className:`ss-avatar-dropzone${u?" ss-avatar-dropzone-active":""}`,onDragOver:h=>{h.preventDefault(),i(!0)},onDragLeave:()=>i(!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 w;(w=h.target.files)!=null&&w[0]&&m(h.target.files[0])}})]}),r&&s.jsx("div",{className:"ss-loading",children:"Uploading..."})]})})}function Es({appearance:e,afterSignOutUrl:t,afterDeleteAccountUrl:r,showOrgSwitcher:l=!0,onOrgChange:n,onOrgSettingsClick:u}){const{appearance:i}=I(),{user:d,signOut:c}=W(),o=e??i,[m,p]=a.useState(!1),[g,h]=a.useState(!1),[w,f]=a.useState(!1),[j,y]=a.useState(""),[x,N]=a.useState(""),[$,k]=a.useState(null),[E,P]=a.useState(!1),v=a.useRef(null),{orgs:S,selectedOrg:b,selectOrg:C,createOrg:M}=Y(),U=a.useCallback(T=>{v.current&&!T.composedPath().includes(v.current)&&(p(!1),f(!1))},[]);a.useEffect(()=>{if(m){const T=setTimeout(()=>{document.addEventListener("click",U)},0);return()=>{clearTimeout(T),document.removeEventListener("click",U)}}},[m,U]);const O=a.useCallback(T=>{y(T),N(T.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,""))},[]),D=a.useCallback(async T=>{T.preventDefault(),k(null),P(!0);try{const R=await M(j,x);R&&(await C(R.id),n==null||n(R),f(!1),y(""),N(""),p(!1))}catch(R){k(R instanceof Error?R.message:"Failed to create organization")}finally{P(!1)}},[j,x,M,C,n]);if(!d)return null;const q=(d.name||d.email).charAt(0).toUpperCase();return s.jsx(B,{appearance:o,children:s.jsxs("div",{className:"ss-user-btn",ref:v,children:[s.jsx("button",{type:"button",className:"ss-avatar",onClick:()=>p(!m),"aria-label":"User menu",children:d.avatarUrl?s.jsx("img",{src:d.avatarUrl,alt:"",style:{width:"100%",height:"100%",borderRadius:"50%",objectFit:"cover"}}):q}),m&&s.jsxs("div",{className:"ss-dropdown",children:[s.jsxs("div",{className:"ss-dropdown-header",children:[d.name&&s.jsx("div",{style:{fontWeight:600,fontSize:"14px",color:"inherit"},children:d.name}),s.jsx("div",{className:"ss-dropdown-email",children:d.email})]}),s.jsx("button",{type:"button",className:"ss-dropdown-item",onClick:()=>{p(!1),h(!0)},children:"Profile"}),l&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"ss-dropdown-divider"}),s.jsx("div",{className:"ss-dropdown-section-title",children:"Organizations"}),S.map(T=>s.jsxs("button",{type:"button",className:`ss-dropdown-item${(b==null?void 0:b.id)===T.id?" ss-dropdown-item-active":""}`,onClick:async()=>{p(!1),f(!1),await C(T.id),n==null||n(T)},children:[(b==null?void 0:b.id)===T.id&&s.jsx("span",{className:"ss-org-check",children:"✓"}),T.name]},T.id)),w?s.jsxs("div",{className:"ss-inline-form",children:[$&&s.jsx("div",{className:"ss-global-error",style:{marginBottom:"8px",fontSize:"12px"},children:$}),s.jsxs("form",{onSubmit:D,children:[s.jsx("div",{className:"ss-field",children:s.jsx("input",{className:"ss-input",type:"text",placeholder:"Organization name",value:j,onChange:T=>O(T.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:x,onChange:T=>N(T.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:()=>{f(!1),k(null)},children:"Cancel"}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:E,children:[E&&s.jsx("span",{className:"ss-spinner"}),"Create"]})]})]})]}):s.jsx("button",{type:"button",className:"ss-dropdown-item",onClick:()=>f(!0),style:{fontWeight:500},children:"+ Create organization"}),b&&u&&s.jsx("button",{type:"button",className:"ss-dropdown-item",onClick:()=>{p(!1),u(b)},children:"Org settings"})]}),s.jsx("div",{className:"ss-dropdown-divider"}),s.jsx("button",{type:"button",className:"ss-dropdown-item ss-dropdown-item-danger",onClick:async()=>{p(!1),await c(),t&&(window.location.href=t)},children:"Sign out"})]}),g&&s.jsx(Ps,{onClose:()=>h(!1),afterDeleteAccountUrl:r})]})})}function Ps({onClose:e,afterDeleteAccountUrl:t}){const{user:r,updateProfile:l,uploadAvatar:n,changePassword:u,isLoading:i,error:d,success:c,setError:o,setSuccess:m}=Z(),{signOut:p}=W(),{deleteAccount:g,isLoading:h,error:w,setError:f}=ss(),[j,y]=a.useState((r==null?void 0:r.name)??""),[x,N]=a.useState((r==null?void 0:r.avatarUrl)??""),[$,k]=a.useState(!1),[E,P]=a.useState(""),[v,S]=a.useState(""),[b,C]=a.useState(""),[M,U]=a.useState(null),[O,D]=a.useState(!1),[q,T]=a.useState(""),R=a.useCallback(async L=>{L.preventDefault(),o(null),m(null),await l({name:j,avatarUrl:x||void 0})},[j,x,l,o,m]),ms=a.useCallback(async L=>{const _=await n(L);_&&(N(_.avatarUrl),k(!1))},[n]),xs=a.useCallback(async L=>{if(L.preventDefault(),U(null),o(null),m(null),v!==b){U("Passwords do not match");return}if(v.length<8){U("Password must be at least 8 characters");return}await u(E,v)&&(P(""),S(""),C(""))},[E,v,b,u,o,m]),gs=a.useCallback(async()=>{await g()&&(await p(),t&&(window.location.href=t))},[g,p,t]),hs=(r==null?void 0:r.provider)==="email",bs=q===(r==null?void 0:r.email);return s.jsx("div",{className:"ss-modal-overlay",onClick:L=>{L.target===L.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}),c&&s.jsx("div",{className:"ss-success-msg",children:c}),s.jsxs("div",{className:"ss-avatar-preview ss-avatar-hoverable",onClick:()=>k(!0),title:"Click to change avatar",children:[x?s.jsx("img",{src:x,alt:""}):(j||(r==null?void 0: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:R,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:j,onChange:L=>y(L.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==null?void 0: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==null?void 0:r.provider)??"",disabled:!0,readOnly:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i,children:[i&&s.jsx("span",{className:"ss-spinner"}),"Save changes"]})]}),hs&&s.jsxs("div",{className:"ss-modal-section",children:[s.jsx("div",{className:"ss-modal-section-title",children:"Change password"}),M&&s.jsx("div",{className:"ss-global-error",children:M}),s.jsxs("form",{onSubmit:xs,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:E,onChange:L=>P(L.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:v,onChange:L=>S(L.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:b,onChange:L=>C(L.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i,children:[i&&s.jsx("span",{className:"ss-spinner"}),"Update password"]})]})]}),s.jsxs("div",{className:"ss-danger-zone",children:[s.jsx("div",{className:"ss-modal-section-title",children:"Danger zone"}),s.jsx("p",{style:{fontSize:"13px",margin:"0 0 12px 0",opacity:.8},children:"Deleting your account is permanent. All organizations you own will also be deleted."}),w&&s.jsx("div",{className:"ss-global-error",children:w}),O?s.jsxs("div",{children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Type your email to confirm"}),s.jsx("input",{className:"ss-input",type:"email",placeholder:r==null?void 0:r.email,value:q,onChange:L=>T(L.target.value),autoFocus:!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:()=>{D(!1),T(""),f(null)},children:"Cancel"}),s.jsxs("button",{type:"button",className:"ss-btn ss-btn-sm ss-btn-danger",disabled:!bs||h,onClick:gs,children:[h&&s.jsx("span",{className:"ss-spinner"}),"Delete account"]})]})]}):s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger",onClick:()=>D(!0),children:"Delete my account"})]}),$&&s.jsx(rs,{onUpload:ms,onClose:()=>k(!1),isLoading:i})]})})}function Is({appearance:e}){const{appearance:t}=I(),{user:r,signOut:l}=W(),{updateProfile:n,uploadAvatar:u,changePassword:i,isLoading:d,error:c,success:o,setError:m,setSuccess:p}=Z(),g=e??t,[h,w]=a.useState((r==null?void 0:r.name)??""),[f,j]=a.useState((r==null?void 0:r.avatarUrl)??""),[y,x]=a.useState(!1),[N,$]=a.useState(""),[k,E]=a.useState(""),[P,v]=a.useState(""),[S,b]=a.useState(null),C=a.useCallback(async D=>{D.preventDefault(),m(null),p(null),await n({name:h,avatarUrl:f||void 0})},[h,f,n,m,p]),M=a.useCallback(async D=>{const q=await u(D);q&&(j(q.avatarUrl),x(!1))},[u]),U=a.useCallback(async D=>{if(D.preventDefault(),b(null),m(null),p(null),k!==P){b("Passwords do not match");return}if(k.length<8){b("Password must be at least 8 characters");return}await i(N,k)&&($(""),E(""),v(""))},[N,k,P,i,m,p]);if(!r)return null;const O=r.provider==="email";return s.jsx(B,{appearance:g,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Profile"}),c&&s.jsx("div",{className:"ss-global-error",children:c}),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:()=>x(!0),title:"Click to change avatar",children:[f?s.jsx("img",{src:f,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:C,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:D=>w(D.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:d,children:[d&&s.jsx("span",{className:"ss-spinner"}),"Save changes"]})]}),O&&s.jsxs("div",{className:"ss-modal-section",children:[s.jsx("div",{className:"ss-modal-section-title",children:"Change password"}),S&&s.jsx("div",{className:"ss-global-error",children:S}),s.jsxs("form",{onSubmit:U,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:N,onChange:D=>$(D.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:k,onChange:D=>E(D.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:P,onChange:D=>v(D.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:d,children:[d&&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:()=>l(),children:"Sign out"})}),y&&s.jsx(rs,{onUpload:M,onClose:()=>x(!1),isLoading:d})]})})}function zs({appearance:e,onOrgChange:t}){const{appearance:r}=I(),{orgs:l,selectedOrg:n,selectOrg:u,createOrg:i,isLoading:d}=Y(),c=e??r,[o,m]=a.useState(!1),[p,g]=a.useState(!1),[h,w]=a.useState(""),[f,j]=a.useState(""),[y,x]=a.useState(null),[N,$]=a.useState(!1),k=a.useRef(null),E=a.useCallback(b=>{k.current&&!b.composedPath().includes(k.current)&&(m(!1),g(!1))},[]);a.useEffect(()=>{if(o){const b=setTimeout(()=>{document.addEventListener("click",E)},0);return()=>{clearTimeout(b),document.removeEventListener("click",E)}}},[o,E]);const P=a.useCallback(b=>{w(b),j(b.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,""))},[]),v=a.useCallback(async b=>{b.preventDefault(),x(null),$(!0);try{const C=await i(h,f);C&&(await u(C.id),t==null||t(C),g(!1),w(""),j(""),m(!1))}catch(C){x(C instanceof Error?C.message:"Failed to create organization")}finally{$(!1)}},[h,f,i,u,t]);if(d)return null;const S=(n==null?void 0:n.name)??(l.length===0?"No organization":"Select organization");return s.jsx(B,{appearance:c,children:s.jsxs("div",{className:"ss-user-btn",ref:k,children:[s.jsxs("button",{type:"button",className:"ss-btn ss-btn-org-switcher",onClick:()=>m(!o),children:[S,s.jsx("span",{className:"ss-chevron",children:o?"▲":"▼"})]}),o&&s.jsxs("div",{className:"ss-dropdown ss-dropdown-org",children:[l.map(b=>s.jsx("button",{type:"button",className:`ss-dropdown-item ${(n==null?void 0:n.id)===b.id?"ss-dropdown-item-active":""}`,onClick:async()=>{m(!1),g(!1),await u(b.id),t==null||t(b)},children:b.name},b.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:v,children:[s.jsx("div",{className:"ss-field",children:s.jsx("input",{className:"ss-input",type:"text",placeholder:"Organization name",value:h,onChange:b=>P(b.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:f,onChange:b=>j(b.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),x(null)},children:"Cancel"}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:N,children:[N&&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 Ts(e,t="USD"){return new Intl.NumberFormat("en-US",{style:"currency",currency:t,minimumFractionDigits:e%100===0?0:2}).format(e/100)}function Ls({plans:e,currentPlanId:t,onSelectPlan:r,interval:l,appearance:n}){const{appearance:u}=I(),i=n??u,d=l?e.filter(c=>c.interval===l||c.isFree):e;return s.jsx(B,{appearance:i,children:s.jsx("div",{className:"ss-pricing-grid",children:d.map(c=>{const o=c.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:c.name}),c.trialDays>0&&s.jsxs("span",{className:"ss-badge ss-badge-trialing",children:[c.trialDays,"-day trial"]}),c.isFree&&s.jsx("span",{className:"ss-badge ss-badge-active",children:"Free"})]}),s.jsx("div",{className:"ss-pricing-price",children:c.isFree?s.jsx("span",{className:"ss-pricing-amount",children:"Free"}):s.jsxs(s.Fragment,{children:[s.jsx("span",{className:"ss-pricing-amount",children:Ts(c.amountCents,c.currency)}),s.jsxs("span",{className:"ss-pricing-interval",children:["/",c.interval]})]})}),c.description&&s.jsx("p",{className:"ss-pricing-desc",children:c.description}),c.features.length>0&&s.jsx("ul",{className:"ss-pricing-features",children:c.features.map((m,p)=>s.jsxs("li",{className:"ss-pricing-feature",children:[s.jsx("span",{className:"ss-check",children:"✓"})," ",m]},p))}),s.jsx("button",{type:"button",className:`ss-btn ${o?"ss-btn-current":"ss-btn-primary"}`,disabled:o,onClick:()=>r(c.id),children:o?"Current plan":"Select plan"})]},c.id)})})})}function Ms(){const{client:e}=I();return{billing:e.billing}}function H(e){const{client:t}=I();return a.useMemo(()=>{if(e){const r=new A.Transport("https://api.saas-support.com/v1",{type:"portalToken",token:e});return new A.BillingClient(r)}return t.billing},[t,e])}function ts(e,t){const r=H(t),[l,n]=a.useState(null),[u,i]=a.useState(!0),[d,c]=a.useState(null),o=a.useCallback(async()=>{i(!0),c(null);try{const m=await r.getCustomer(e);n(m)}catch(m){c(m instanceof Error?m.message:"Failed to load subscription")}finally{i(!1)}},[r,e]);return a.useEffect(()=>{o()},[o]),{customer:l,isLoading:u,error:d,refresh:o}}function ns(e,t){const r=H(t),[l,n]=a.useState([]),[u,i]=a.useState(!0),[d,c]=a.useState(null),o=a.useCallback(async()=>{i(!0),c(null);try{const m=await r.getInvoices(e);n(m)}catch(m){c(m instanceof Error?m.message:"Failed to load invoices")}finally{i(!1)}},[r,e]);return a.useEffect(()=>{o()},[o]),{invoices:l,isLoading:u,error:d,refresh:o}}function os(e,t){const r=H(t),[l,n]=a.useState([]),[u,i]=a.useState(!0),[d,c]=a.useState(null),o=a.useCallback(async()=>{i(!0),c(null);try{const m=await r.getCurrentUsage(e);n(m)}catch(m){c(m instanceof Error?m.message:"Failed to load usage")}finally{i(!1)}},[r,e]);return a.useEffect(()=>{o()},[o]),{usage:l,isLoading:u,error:d,refresh:o}}const Ds={active:"ss-badge-active"};function ls({customerId:e,portalToken:t,onChangePlan:r,onCancel:l,appearance:n}){const{appearance:u}=I(),{customer:i,isLoading:d,error:c}=ts(e,t),o=n??u;return s.jsx(B,{appearance:o,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Subscription"}),d&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),c&&s.jsx("div",{className:"ss-global-error",children:c}),i&&!d&&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:i.name||i.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 ${Ds.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"}),l&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger",onClick:l,children:"Cancel subscription"})]})]})]})})}const Bs={paid:"ss-badge-active",open:"ss-badge-trialing",draft:"ss-badge-paused",void:"ss-badge-canceled",uncollectible:"ss-badge-past-due"};function As(e){return new Date(e).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function Fs(e){return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2}).format(e/100)}function is({customerId:e,portalToken:t,appearance:r}){const{appearance:l}=I(),{invoices:n,isLoading:u,error:i}=ns(e,t),d=r??l,c=[...n].sort((o,m)=>new Date(m.createdAt).getTime()-new Date(o.createdAt).getTime());return s.jsx(B,{appearance:d,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..."]}),i&&s.jsx("div",{className:"ss-global-error",children:i}),!u&&c.length===0&&s.jsx("p",{className:"ss-empty",children:"No invoices yet."}),!u&&c.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:c.map(o=>s.jsxs("tr",{className:"ss-tr",children:[s.jsx("td",{className:"ss-td",children:As(o.createdAt)}),s.jsx("td",{className:"ss-td",children:Fs(o.amountCents)}),s.jsx("td",{className:"ss-td",children:s.jsx("span",{className:`ss-badge ${Bs[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 cs({customerId:e,limits:t,portalToken:r,appearance:l}){const{appearance:n}=I(),{usage:u,isLoading:i,error:d}=os(e,r),c=l??n;return s.jsx(B,{appearance:c,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Usage"}),i&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),!i&&u.length===0&&s.jsx("p",{className:"ss-empty",children:"No usage data."}),!i&&u.map(o=>{const m=t==null?void 0:t[o.metric],p=m?Math.min(100,o.total/m*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(),m?` / ${m.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 Us({customerId:e,portalToken:t,limits:r,onChangePlan:l,onCancel:n,appearance:u}){const{appearance:i}=I(),d=u??i,[c,o]=a.useState("subscription"),m=[{id:"subscription",label:"Subscription"},{id:"invoices",label:"Invoices"},{id:"usage",label:"Usage"}];return s.jsx(B,{appearance:d,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:m.map(p=>s.jsx("button",{type:"button",className:`ss-tab ${c===p.id?"ss-tab-active":""}`,onClick:()=>o(p.id),children:p.label},p.id))}),s.jsxs("div",{className:"ss-tab-content",children:[c==="subscription"&&s.jsx(ls,{customerId:e,portalToken:t,onChangePlan:l,onCancel:n}),c==="invoices"&&s.jsx(is,{customerId:e,portalToken:t}),c==="usage"&&s.jsx(cs,{customerId:e,portalToken:t,limits:r})]})]})})}function qs({customerId:e,portalToken:t,onApplied:r,appearance:l}){const{appearance:n}=I(),u=H(t),i=l??n,[d,c]=a.useState(""),[o,m]=a.useState(!1),[p,g]=a.useState(null),[h,w]=a.useState(null),f=a.useCallback(async j=>{if(j.preventDefault(),!!d.trim()){m(!0),g(null),w(null);try{const y=await u.applyCoupon(e,d.trim());w(`Coupon applied! ${y.discountType==="percent"?`${y.amount}% off`:`$${(y.amount/100).toFixed(2)} off`}`),c(""),r==null||r(y)}catch(y){g(y instanceof Error?y.message:"Invalid coupon code")}finally{m(!1)}}},[u,e,d,r]);return s.jsx(B,{appearance:i,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:f,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:d,onChange:j=>c(j.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:o||!d.trim(),children:[o&&s.jsx("span",{className:"ss-spinner"}),"Apply"]})]})]})})}function Rs(){const{client:e}=I();return{report:e.report}}function X(){const{client:e}=I(),[t,r]=a.useState(null),[l,n]=a.useState(!1),[u,i]=a.useState(null),d=a.useCallback(async c=>{n(!0),i(null);try{const o=await e.report.executeQuery(c);return r(o),o}catch(o){return i(o instanceof Error?o.message:"Query failed"),null}finally{n(!1)}},[e]);return{result:t,execute:d,isLoading:l,error:u}}function ds(e){const{client:t}=I(),[r,l]=a.useState(null),[n,u]=a.useState(!0),[i,d]=a.useState(null),c=a.useCallback(async()=>{u(!0),d(null);try{const o=await t.report.listQueries(e);l(o)}catch(o){d(o instanceof Error?o.message:"Failed to load queries")}finally{u(!1)}},[t,e]);return a.useEffect(()=>{c()},[c]),{queries:(r==null?void 0:r.data)??[],meta:r==null?void 0:r.meta,isLoading:n,error:i,refresh:c}}function Os(e){const{client:t}=I(),[r,l]=a.useState(null),[n,u]=a.useState(!0),[i,d]=a.useState(null),c=a.useCallback(async()=>{u(!0),d(null);try{const o=await t.report.getDashboard(e);l(o)}catch(o){d(o instanceof Error?o.message:"Failed to load dashboard")}finally{u(!1)}},[t,e]);return a.useEffect(()=>{c()},[c]),{dashboard:r,isLoading:n,error:i,refresh:c}}function Ws(e,t,r="https://api.saas-support.com/v1"){const l=a.useMemo(()=>{const p=new A.Transport(r,{type:"embedToken",token:e});return new A.ReportClient(p)},[e,r]),[n,u]=a.useState(null),[i,d]=a.useState(!0),[c,o]=a.useState(null),m=a.useCallback(async()=>{d(!0),o(null);try{const p=await l.getDashboard(t);u(p)}catch(p){o(p instanceof Error?p.message:"Failed to load dashboard")}finally{d(!1)}},[l,t]);return a.useEffect(()=>{m()},[m]),{dashboard:n,reportClient:l,isLoading:i,error:c,refresh:m}}function Hs({onResult:e,mode:t="both",placeholder:r,appearance:l}){const{appearance:n}=I(),{execute:u,isLoading:i,error:d}=X(),c=l??n,[o,m]=a.useState(""),[p,g]=a.useState(t==="sql"?"sql":"nl"),h=a.useCallback(async w=>{if(w.preventDefault(),!o.trim())return;const j=await u(p==="sql"?{sql:o}:{naturalLanguage:o});j&&(e==null||e(j))},[o,p,u,e]);return s.jsx(B,{appearance:c,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"})]}),d&&s.jsx("div",{className:"ss-global-error",children:d}),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:w=>m(w.target.value),rows:3})}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i||!o.trim(),children:[i&&s.jsx("span",{className:"ss-spinner"}),"Run query"]})]})]})})}function us({columns:e,rows:t,sortable:r=!0,maxRows:l,appearance:n}){const{appearance:u}=I(),i=n??u,[d,c]=a.useState(null),[o,m]=a.useState("asc"),p=a.useMemo(()=>d?[...t].sort((f,j)=>{const y=f[d],x=j[d];if(y==null&&x==null)return 0;if(y==null)return 1;if(x==null)return-1;if(typeof y=="number"&&typeof x=="number")return o==="asc"?y-x:x-y;const N=String(y),$=String(x);return o==="asc"?N.localeCompare($):$.localeCompare(N)}):t,[t,d,o]),g=l?p.slice(0,l):p,h=f=>{r&&(d===f?m(j=>j==="asc"?"desc":"asc"):(c(f),m("asc")))};function w(f){return f==null?"":typeof f=="object"?JSON.stringify(f):String(f)}return s.jsx(B,{appearance:i,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(f=>s.jsxs("th",{className:`ss-th ${r?"ss-th-sortable":""} ${d===f?o==="asc"?"ss-sorted-asc":"ss-sorted-desc":""}`,onClick:()=>h(f),children:[f,d===f&&s.jsx("span",{className:"ss-sort-indicator",children:o==="asc"?" ▲":" ▼"})]},f))})}),s.jsx("tbody",{children:g.map((f,j)=>s.jsx("tr",{className:"ss-tr",children:e.map(y=>s.jsx("td",{className:"ss-td",children:w(f[y])},y))},j))})]}),l&&t.length>l&&s.jsxs("div",{className:"ss-table-footer",children:["Showing ",l," of ",t.length," rows"]})]})})}function _s(e,t="#6366f1"){const r=parseInt(t.replace("#","").slice(0,2),16),l=[];for(let n=0;n<e;n++){const u=(r+n*Math.floor(360/Math.max(e,1)))%360;l.push(`hsl(${u}, 65%, 55%)`)}return l}function Vs({labels:e,values:t,w:r,h:l,colors:n}){const u=Math.max(...t,1),i=40,d=r-i*2,c=l-i*2,o=Math.max(1,d/e.length-4);return s.jsxs("g",{children:[s.jsx("line",{x1:i,y1:l-i,x2:r-i,y2:l-i,stroke:"#ccc",strokeWidth:1}),t.map((m,p)=>{const g=m/u*c,h=i+d/e.length*p+2,w=l-i-g;return s.jsxs("g",{children:[s.jsx("rect",{x:h,y:w,width:o,height:g,fill:n[p%n.length],rx:2}),s.jsx("text",{x:h+o/2,y:l-i+14,textAnchor:"middle",fontSize:10,fill:"#666",children:e[p].length>8?e[p].slice(0,8)+"...":e[p]})]},p)})]})}function Qs({labels:e,values:t,w:r,h:l,colors:n}){const u=Math.max(...t,1),i=40,d=r-i*2,c=l-i*2,o=e.length>1?d/(e.length-1):0,m=t.map((p,g)=>{const h=i+o*g,w=l-i-p/u*c;return`${h},${w}`});return s.jsxs("g",{children:[[.25,.5,.75,1].map(p=>{const g=l-i-p*c;return s.jsx("line",{x1:i,y1:g,x2:r-i,y2:g,stroke:"#eee",strokeWidth:1},p)}),s.jsx("polyline",{points:m.join(" "),fill:"none",stroke:n[0],strokeWidth:2}),t.map((p,g)=>{const h=i+o*g,w=l-i-p/u*c;return s.jsx("circle",{cx:h,cy:w,r:4,fill:n[0]},g)})]})}function Gs({labels:e,values:t,w:r,h:l,colors:n}){const u=t.reduce((g,h)=>g+h,0)||1,i=r/2,d=l/2-20,c=Math.min(r,l)/2-40,o=2*Math.PI*c;let m=0;const p=t.map((g,h)=>{const w=g/u,f=w*o,j={dash:f,offset:m,color:n[h%n.length],label:e[h],pct:w};return m+=f,j});return s.jsxs("g",{children:[p.map((g,h)=>s.jsx("circle",{cx:i,cy:d,r:c,fill:"none",stroke:g.color,strokeWidth:c*.6,strokeDasharray:`${g.dash} ${o-g.dash}`,strokeDashoffset:-g.offset,transform:`rotate(-90 ${i} ${d})`},h)),s.jsx("g",{transform:`translate(${i-e.length*30}, ${l-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 ps({type:e,data:t,title:r,width:l=400,height:n=300,appearance:u}){const{appearance:i}=I(),d=u??i,c=a.useMemo(()=>_s(t.labels.length),[t.labels.length]);return s.jsx(B,{appearance:d,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 ${l} ${n}`,width:"100%",style:{maxWidth:l},children:[e==="bar"&&s.jsx(Vs,{labels:t.labels,values:t.values,w:l,h:n,colors:c}),e==="line"&&s.jsx(Qs,{labels:t.labels,values:t.values,w:l,h:n,colors:c}),e==="pie"&&s.jsx(Gs,{labels:t.labels,values:t.values,w:l,h:n,colors:c})]})]})})}function Js({dashboardId:e,embedToken:t,baseUrl:r,refreshInterval:l,appearance:n}){const u=I(),i=n??(u==null?void 0:u.appearance),d=a.useMemo(()=>{if(t){const y=r??"https://api.saas-support.com/v1",x=new A.Transport(y,{type:"embedToken",token:t});return new A.ReportClient(x)}return u.client.report},[t,r,u]),[c,o]=a.useState([]),[m,p]=a.useState({}),[g,h]=a.useState(!0),[w,f]=a.useState(null),j=a.useCallback(async()=>{h(!0),f(null);try{const y=await d.getDashboard(e),x=JSON.parse(y.layoutJson||"[]");o(x);const N={};for(const $ of x)try{const k=await d.listQueries({search:$.queryId,perPage:1});if(k.data.length>0&&k.data[0].generatedSql){const E=await d.executeQuery({sql:k.data[0].generatedSql});N[$.queryId]=E}}catch{}p(N)}catch(y){f(y instanceof Error?y.message:"Failed to load dashboard")}finally{h(!1)}},[d,e]);return a.useEffect(()=>{j()},[j]),a.useEffect(()=>{if(!l||l<=0)return;const y=setInterval(j,l*1e3);return()=>clearInterval(y)},[l,j]),s.jsx(B,{appearance:i,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..."]}),w&&s.jsx("div",{className:"ss-global-error",children:w}),!g&&c.map((y,x)=>{const N=m[y.queryId];if(!N)return null;const $=N.columns.length>=2?{labels:N.rows.map(k=>String(k[N.columns[0]]??"")),values:N.rows.map(k=>Number(k[N.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(us,{columns:N.columns,rows:N.rows,maxRows:50}):s.jsx(ps,{type:y.chartType||"bar",data:$,width:y.w,height:y.h})]},x)})]})})}function Ys(e){return new Date(e).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function Zs({onSelectQuery:e,onRunQuery:t,appearance:r}){const{appearance:l}=I(),{queries:n,isLoading:u,error:i}=ds(),{execute:d,isLoading:c}=X(),o=r??l,m=a.useCallback(async p=>{if(!p.generatedSql)return;const g=await d({sql:p.generatedSql});g&&(t==null||t(g))},[d,t]);return s.jsx(B,{appearance:o,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..."]}),i&&s.jsx("div",{className:"ss-global-error",children:i}),!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:()=>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:Ys(p.createdAt)}),s.jsx("button",{type:"button",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:c||!p.generatedSql,onClick:g=>{g.stopPropagation(),m(p)},children:c?s.jsx("span",{className:"ss-spinner"}):"Run"})]})]},p.id))]})})}function Xs({embedToken:e,dashboardId:t,baseUrl:r="https://api.saas-support.com/v1",refreshInterval:l,appearance:n}){const u=a.useMemo(()=>{const f=new A.Transport(r,{type:"embedToken",token:e});return new A.ReportClient(f)},[e,r]),[i,d]=a.useState([]),[c,o]=a.useState(!0),[m,p]=a.useState(null),g=a.useMemo(()=>V(n),[n]),h=a.useMemo(()=>Q(g),[g]),w=a.useCallback(async()=>{o(!0),p(null);try{const f=await u.getDashboard(t),j=JSON.parse(f.layoutJson||"[]"),y=await Promise.all(j.map(async x=>{try{const N=await u.listQueries({search:x.queryId,perPage:1});if(N.data.length>0&&N.data[0].generatedSql){const $=await u.executeQuery({sql:N.data[0].generatedSql});return{...x,result:$}}}catch{}return x}));d(y)}catch(f){p(f instanceof Error?f.message:"Failed to load dashboard")}finally{o(!1)}},[u,t]);return a.useEffect(()=>{w()},[w]),a.useEffect(()=>{if(!l||l<=0)return;const f=setInterval(w,l*1e3);return()=>clearInterval(f)},[l,w]),s.jsx("div",{ref:f=>{if(!f||f.shadowRoot)return;const j=f.attachShadow({mode:"open"}),y=document.createElement("style");y.textContent=h,j.appendChild(y);const x=document.createElement("div");j.appendChild(x)},style:{display:"contents"},children:s.jsxs("div",{className:"ss-dashboard-grid",children:[c&&s.jsx("div",{className:"ss-loading",children:"Loading dashboard..."}),m&&s.jsx("div",{className:"ss-global-error",children:m}),!c&&i.map((f,j)=>{if(!f.result)return null;const{columns:y,rows:x}=f.result;return s.jsxs("div",{className:"ss-widget",children:[f.title&&s.jsx("h4",{className:"ss-widget-header",children:f.title}),s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:y.map(N=>s.jsx("th",{className:"ss-th",children:N},N))})}),s.jsx("tbody",{children:x.slice(0,50).map((N,$)=>s.jsx("tr",{className:"ss-tr",children:y.map(k=>s.jsx("td",{className:"ss-td",children:String(N[k]??"")},k))},$))})]})]},j)})]})})}exports.SaaSError=A.SaaSError;exports.SaaSSupport=A.SaaSSupport;exports.isMfaRequired=A.isMfaRequired;exports.Chart=ps;exports.CouponInput=qs;exports.DashboardView=Js;exports.DataTable=us;exports.InvoiceHistory=is;exports.OrgSwitcher=zs;exports.PaymentPortal=Us;exports.PricingTable=Ls;exports.QueryInput=Hs;exports.ReportEmbed=Xs;exports.SaaSContext=G;exports.SaaSProvider=ys;exports.SavedQueryList=Zs;exports.SignIn=Cs;exports.SignUp=ks;exports.SubscriptionStatus=ls;exports.UsageDisplay=cs;exports.UserButton=Es;exports.UserProfile=Is;exports.useAuth=W;exports.useBilling=Ms;exports.useDashboard=Os;exports.useDeleteAccount=ss;exports.useEmbedDashboard=Ws;exports.useInvoices=ns;exports.useOrg=Y;exports.useProfile=Z;exports.useQuery=X;exports.useReport=Rs;exports.useSaaSContext=I;exports.useSavedQueries=ds;exports.useSignIn=J;exports.useSignUp=K;exports.useSubscription=ts;exports.useUsage=os;exports.useUser=Ns;
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;