@insforge/react 0.3.4 → 0.4.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.
Files changed (63) hide show
  1. package/README.md +485 -604
  2. package/dist/atoms.cjs +818 -0
  3. package/dist/atoms.cjs.map +1 -0
  4. package/dist/atoms.d.cts +222 -0
  5. package/dist/atoms.d.ts +72 -237
  6. package/dist/atoms.js +382 -456
  7. package/dist/atoms.js.map +1 -1
  8. package/dist/components.cjs +2254 -0
  9. package/dist/components.cjs.map +1 -0
  10. package/dist/{components.d.mts → components.d.cts} +10 -32
  11. package/dist/components.d.ts +9 -31
  12. package/dist/components.js +1049 -1183
  13. package/dist/components.js.map +1 -1
  14. package/dist/forms.cjs +1287 -0
  15. package/dist/forms.cjs.map +1 -0
  16. package/dist/forms.d.cts +138 -0
  17. package/dist/forms.d.ts +115 -162
  18. package/dist/forms.js +728 -921
  19. package/dist/forms.js.map +1 -1
  20. package/dist/{hooks.mjs → hooks.cjs} +15 -13
  21. package/dist/hooks.cjs.map +1 -0
  22. package/dist/{hooks.d.mts → hooks.d.cts} +1 -1
  23. package/dist/hooks.js +9 -15
  24. package/dist/hooks.js.map +1 -1
  25. package/dist/index.cjs +2674 -0
  26. package/dist/index.cjs.map +1 -0
  27. package/dist/{index.d.mts → index.d.cts} +10 -10
  28. package/dist/index.d.ts +4 -4
  29. package/dist/index.js +1096 -1238
  30. package/dist/index.js.map +1 -1
  31. package/dist/{lib.mjs → lib.cjs} +13 -11
  32. package/dist/lib.cjs.map +1 -0
  33. package/dist/{lib.d.mts → lib.d.cts} +1 -8
  34. package/dist/lib.d.ts +1 -8
  35. package/dist/lib.js +4 -17
  36. package/dist/lib.js.map +1 -1
  37. package/dist/{router.mjs → router.cjs} +14 -16
  38. package/dist/router.cjs.map +1 -0
  39. package/dist/router.js +10 -16
  40. package/dist/router.js.map +1 -1
  41. package/dist/styles.css +655 -2
  42. package/dist/types.cjs +4 -0
  43. package/dist/{types.mjs.map → types.cjs.map} +1 -1
  44. package/dist/{types.d.mts → types.d.cts} +2 -2
  45. package/dist/types.d.ts +2 -2
  46. package/dist/types.js +0 -1
  47. package/package.json +106 -98
  48. package/dist/atoms.d.mts +0 -387
  49. package/dist/atoms.mjs +0 -861
  50. package/dist/atoms.mjs.map +0 -1
  51. package/dist/components.mjs +0 -2327
  52. package/dist/components.mjs.map +0 -1
  53. package/dist/forms.d.mts +0 -185
  54. package/dist/forms.mjs +0 -1468
  55. package/dist/forms.mjs.map +0 -1
  56. package/dist/hooks.mjs.map +0 -1
  57. package/dist/index.mjs +0 -2724
  58. package/dist/index.mjs.map +0 -1
  59. package/dist/lib.mjs.map +0 -1
  60. package/dist/router.mjs.map +0 -1
  61. package/dist/types.mjs +0 -3
  62. package/src/styles.css +0 -15
  63. /package/dist/{router.d.mts → router.d.cts} +0 -0
package/dist/components.js CHANGED
@@ -1,18 +1,12 @@
1
- 'use strict';
1
+ import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
2
+ import { createClient } from '@insforge/sdk';
3
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+ import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
5
+ import { z } from 'zod';
2
6
 
3
- var react = require('react');
4
- var sdk = require('@insforge/sdk');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var clsx = require('clsx');
7
- var tailwindMerge = require('tailwind-merge');
8
- var lucideReact = require('lucide-react');
9
- var zod = require('zod');
10
-
11
- var InsforgeContext = react.createContext(
12
- void 0
13
- );
7
+ var InsforgeContext = createContext(void 0);
14
8
  function useInsforge() {
15
- const context = react.useContext(InsforgeContext);
9
+ const context = useContext(InsforgeContext);
16
10
  if (!context) {
17
11
  throw new Error("useInsforge must be used within InsforgeProvider");
18
12
  }
@@ -20,9 +14,9 @@ function useInsforge() {
20
14
  }
21
15
  function usePublicAuthConfig() {
22
16
  const { getPublicAuthConfig } = useInsforge();
23
- const [authConfig, setAuthConfig] = react.useState(null);
24
- const [isLoaded, setIsLoaded] = react.useState(false);
25
- react.useEffect(() => {
17
+ const [authConfig, setAuthConfig] = useState(null);
18
+ const [isLoaded, setIsLoaded] = useState(false);
19
+ useEffect(() => {
26
20
  async function fetchConfig() {
27
21
  const result = await getPublicAuthConfig();
28
22
  if (result) {
@@ -38,236 +32,179 @@ function usePublicAuthConfig() {
38
32
  return { authConfig, isLoaded };
39
33
  }
40
34
  function AuthBranding() {
41
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[#FAFAFA] px-2 py-4 flex flex-row justify-center items-center gap-1", children: [
42
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-black font-manrope", children: "Secured by" }),
43
- /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "83", height: "20", viewBox: "0 0 83 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
44
- /* @__PURE__ */ jsxRuntime.jsx(
45
- "path",
46
- {
47
- d: "M2.16783 8.46797C1.9334 8.23325 1.9334 7.85269 2.16783 7.61797L8.11049 1.66797L16.6 1.66797L6.41259 11.868C6.17815 12.1027 5.79807 12.1027 5.56363 11.868L2.16783 8.46797Z",
48
- fill: "url(#paint0_linear_2976_9475)"
49
- }
50
- ),
51
- /* @__PURE__ */ jsxRuntime.jsx(
52
- "path",
53
- {
54
- d: "M12.8858 6.44922L16.6 10.168V18.668L8.64108 10.6992L12.8858 6.44922Z",
55
- fill: "url(#paint1_linear_2976_9475)"
56
- }
57
- ),
58
- /* @__PURE__ */ jsxRuntime.jsx(
59
- "path",
60
- {
61
- d: "M67.5439 6.48828C68.2894 6.48828 68.9145 6.67064 69.418 7.03516C69.5229 7.10943 69.6214 7.1907 69.7158 7.27637V6.70703H71.248V14.959C71.248 15.1583 71.2381 15.3485 71.2188 15.5283C71.2042 15.7129 71.1774 15.8925 71.1387 16.0674C71.0225 16.5776 70.7998 16.9957 70.4707 17.3213C70.1415 17.6518 69.7321 17.8972 69.2432 18.0576C68.7592 18.2179 68.2222 18.2988 67.6318 18.2988C67.1962 18.2988 66.7768 18.2308 66.375 18.0947C65.9782 17.9587 65.6202 17.7614 65.3008 17.5039C64.9813 17.2512 64.7199 16.9446 64.5166 16.585L66.1289 15.7832C66.2789 16.0698 66.4888 16.2819 66.7598 16.418C67.0356 16.5589 67.3289 16.6289 67.6387 16.6289C68.0016 16.6289 68.3258 16.5628 68.6113 16.4316C68.8969 16.3053 69.1176 16.116 69.2725 15.8633C69.4321 15.6155 69.5077 15.3047 69.498 14.9307V14.1797C69.4665 14.2037 69.4359 14.229 69.4033 14.252C68.8855 14.6164 68.2441 14.7988 67.4795 14.7988C66.7582 14.7988 66.1281 14.6165 65.5908 14.252C65.0537 13.8875 64.637 13.3915 64.3418 12.7646C64.0467 12.1378 63.8994 11.4307 63.8994 10.6436C63.8994 9.84651 64.0465 9.13673 64.3418 8.51465C64.6419 7.88768 65.0663 7.39481 65.6133 7.03516C66.1601 6.67077 66.8036 6.48836 67.5439 6.48828ZM37.5 6.48828C38.1099 6.48828 38.6496 6.58294 39.1191 6.77246C39.5935 6.96201 39.9762 7.2321 40.2666 7.58203C40.5569 7.93184 40.7359 8.34227 40.8037 8.81348L39.0176 9.13477C38.974 8.79951 38.8218 8.53424 38.5605 8.33984C38.304 8.14547 37.96 8.03605 37.5293 8.01172C37.1178 7.98742 36.7859 8.05051 36.5342 8.20117C36.2825 8.34698 36.1562 8.55398 36.1562 8.82129C36.1563 8.97184 36.208 9.10017 36.3096 9.20703C36.4112 9.31394 36.614 9.42141 36.9189 9.52832C37.2288 9.63524 37.6889 9.76635 38.2988 9.92188C38.9232 10.0823 39.4222 10.2666 39.7949 10.4756C40.1722 10.6796 40.4428 10.9254 40.6074 11.2119C40.7768 11.4987 40.8623 11.8466 40.8623 12.2549C40.8623 13.047 40.574 13.6691 39.998 14.1211C39.4268 14.5731 38.6348 14.7988 37.623 14.7988C36.6551 14.7988 35.8687 14.5799 35.2637 14.1426C34.6587 13.7052 34.2909 13.0908 34.1602 12.2988L35.9463 12.0215C36.0383 12.4102 36.2411 12.7169 36.5557 12.9404C36.8703 13.164 37.2678 13.2754 37.7471 13.2754C38.1681 13.2754 38.4922 13.1926 38.7197 13.0273C38.9521 12.8572 39.0684 12.6266 39.0684 12.335C39.0684 12.1552 39.0245 12.0122 38.9375 11.9053C38.8552 11.7935 38.6713 11.686 38.3857 11.584C38.1001 11.4819 37.6618 11.3528 37.0713 11.1973C36.4131 11.0223 35.8901 10.8359 35.5029 10.6367C35.1158 10.4327 34.8374 10.192 34.668 9.91504C34.4985 9.63801 34.4141 9.30188 34.4141 8.9082C34.4141 8.41746 34.5423 7.98943 34.7988 7.625C35.0553 7.26073 35.4135 6.98146 35.873 6.78711C36.3329 6.58784 36.8755 6.48828 37.5 6.48828ZM53.3047 6.48828C54.0937 6.48828 54.7815 6.66572 55.3672 7.02051C55.9527 7.37528 56.4072 7.86634 56.7314 8.49316C57.0558 9.11525 57.2187 9.83193 57.2188 10.6436C57.2188 11.46 57.0537 12.1817 56.7246 12.8086C56.4003 13.4307 55.9451 13.9196 55.3594 14.2744C54.7737 14.6242 54.0888 14.7988 53.3047 14.7988C52.5205 14.7988 51.8357 14.6214 51.25 14.2666C50.6643 13.9118 50.2091 13.4238 49.8848 12.8018C49.5653 12.1748 49.4053 11.4552 49.4053 10.6436C49.4053 9.81735 49.5703 9.09279 49.8994 8.4707C50.2286 7.8488 50.6859 7.36255 51.2715 7.0127C51.8572 6.66281 52.5351 6.48828 53.3047 6.48828ZM76.7471 6.48828C77.5603 6.48828 78.25 6.68053 78.8164 7.06445C79.3876 7.44351 79.812 7.97991 80.0879 8.6748C80.3638 9.36976 80.4672 10.189 80.3994 11.1318H74.7256C74.7843 11.6972 74.949 12.1516 75.2227 12.4951C75.5711 12.9325 76.0792 13.1513 76.7471 13.1514C77.1779 13.1514 77.5486 13.0567 77.8584 12.8672C78.173 12.6728 78.4146 12.3928 78.584 12.0283L80.3125 12.5537C80.0124 13.2633 79.5473 13.8153 78.918 14.209C78.2936 14.6025 77.6036 14.7988 76.8486 14.7988C76.0549 14.7988 75.358 14.6263 74.7578 14.2812C74.1576 13.9362 73.6875 13.458 73.3486 12.8457C73.0147 12.2334 72.8477 11.5284 72.8477 10.7314C72.8477 9.87126 73.0127 9.12495 73.3418 8.49316C73.671 7.85651 74.1282 7.36263 74.7139 7.0127C75.2995 6.6628 75.9775 6.48832 76.7471 6.48828ZM23.3301 14.5801H21.5801V4.08203H23.3301V14.5801ZM29.6152 6.48047C30.1959 6.48052 30.6753 6.5781 31.0527 6.77246C31.4301 6.96681 31.7305 7.21443 31.9531 7.51562C32.1758 7.81695 32.3398 8.13831 32.4463 8.47852C32.5528 8.81873 32.6213 9.14205 32.6504 9.44824C32.6843 9.74946 32.7012 9.99508 32.7012 10.1846V14.5801H30.9287V10.7891C30.9287 10.5413 30.9118 10.2669 30.8779 9.96582C30.844 9.66449 30.7645 9.37469 30.6387 9.09766C30.5177 8.81592 30.3337 8.58503 30.0869 8.40527C29.8449 8.22551 29.5157 8.13579 29.0996 8.13574C28.8769 8.13574 28.6563 8.17221 28.4385 8.24512C28.2206 8.31802 28.0219 8.4442 27.8428 8.62402C27.6685 8.79899 27.5284 9.04249 27.4219 9.35352C27.3154 9.65965 27.2617 10.0532 27.2617 10.5342V14.5801H25.4902V6.70703H27.0518V7.58301C27.2521 7.34675 27.486 7.14172 27.7559 6.96973C28.2593 6.64409 28.8794 6.48047 29.6152 6.48047ZM48.748 5.83887H44.2021V8.45605H47.876V10.2061H44.2021V14.5801H42.4521V4.08203H48.748V5.83887ZM62.5137 6.67773C62.7606 6.65829 63.001 6.66815 63.2334 6.70703V8.34766C63.001 8.27961 62.7317 8.25695 62.4268 8.28125C62.1267 8.30557 61.8553 8.39134 61.6133 8.53711C61.3715 8.66829 61.1733 8.83606 61.0186 9.04004C60.8686 9.24404 60.7572 9.47701 60.6846 9.73926C60.612 9.99685 60.5752 10.2768 60.5752 10.5781V14.5801H58.8184V6.70703H60.3652V7.96582C60.4243 7.85986 60.4888 7.75824 60.5605 7.66211C60.7251 7.4434 60.9219 7.26302 61.1494 7.12207C61.3429 6.99098 61.5559 6.88926 61.7881 6.81641C62.0251 6.73869 62.267 6.69235 62.5137 6.67773ZM67.8057 8.0625C67.3362 8.06252 66.9485 8.17982 66.6436 8.41309C66.3389 8.64144 66.1139 8.95232 65.9688 9.3457C65.8235 9.7345 65.751 10.1673 65.751 10.6436C65.751 11.1247 65.8215 11.5624 65.9619 11.9561C66.1071 12.3447 66.3269 12.6535 66.6221 12.8818C66.9174 13.1103 67.293 13.2246 67.748 13.2246C68.2174 13.2246 68.5953 13.1171 68.8809 12.9033C69.1711 12.6846 69.3811 12.3808 69.5117 11.9922C69.6473 11.6034 69.7158 11.1539 69.7158 10.6436C69.7158 10.1284 69.6473 9.67886 69.5117 9.29492C69.381 8.90617 69.1753 8.60445 68.8945 8.39062C68.6138 8.17213 68.2508 8.0625 67.8057 8.0625ZM53.3047 8.13574C52.8351 8.13574 52.4475 8.24222 52.1426 8.45605C51.8425 8.66504 51.6198 8.95977 51.4746 9.33887C51.3295 9.71303 51.2568 10.148 51.2568 10.6436C51.2568 11.4066 51.4288 12.0168 51.7725 12.4736C52.121 12.9256 52.6318 13.1514 53.3047 13.1514C54.0017 13.1514 54.5196 12.9177 54.8584 12.4512C55.1971 11.9846 55.3672 11.3822 55.3672 10.6436C55.3672 9.8807 55.1951 9.27324 54.8516 8.82129C54.5079 8.36444 53.9921 8.13575 53.3047 8.13574ZM76.8203 8.02637C76.1039 8.02637 75.5712 8.25013 75.2227 8.69727C74.9987 8.98144 74.8476 9.35094 74.7676 9.80566H78.6221C78.5589 9.29301 78.4236 8.89686 78.2139 8.61719C77.9186 8.22359 77.4543 8.02645 76.8203 8.02637Z",
62
- fill: "black"
63
- }
64
- ),
65
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
66
- /* @__PURE__ */ jsxRuntime.jsxs(
67
- "linearGradient",
68
- {
69
- id: "paint0_linear_2976_9475",
70
- x1: "1.85883",
71
- y1: "1.92425",
72
- x2: "24.3072",
73
- y2: "9.64016",
74
- gradientUnits: "userSpaceOnUse",
75
- children: [
76
- /* @__PURE__ */ jsxRuntime.jsx("stop", {}),
77
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopOpacity: "0.4" })
78
- ]
79
- }
80
- ),
81
- /* @__PURE__ */ jsxRuntime.jsxs(
82
- "linearGradient",
83
- {
84
- id: "paint1_linear_2976_9475",
85
- x1: "25.6475",
86
- y1: "8.65468",
87
- x2: "10.7901",
88
- y2: "8.65468",
89
- gradientUnits: "userSpaceOnUse",
90
- children: [
91
- /* @__PURE__ */ jsxRuntime.jsx("stop", {}),
92
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopOpacity: "0.4" })
93
- ]
94
- }
95
- )
96
- ] })
97
- ] }) })
35
+ return /* @__PURE__ */ jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
36
+ /* @__PURE__ */ jsx("p", { className: "if-authBranding-text", children: "Secured by" }),
37
+ /* @__PURE__ */ jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
38
+ "svg",
39
+ {
40
+ width: "83",
41
+ height: "20",
42
+ viewBox: "0 0 83 20",
43
+ fill: "none",
44
+ xmlns: "http://www.w3.org/2000/svg",
45
+ children: [
46
+ /* @__PURE__ */ jsx(
47
+ "path",
48
+ {
49
+ d: "M2.16783 8.46797C1.9334 8.23325 1.9334 7.85269 2.16783 7.61797L8.11049 1.66797L16.6 1.66797L6.41259 11.868C6.17815 12.1027 5.79807 12.1027 5.56363 11.868L2.16783 8.46797Z",
50
+ fill: "url(#paint0_linear_2976_9475)"
51
+ }
52
+ ),
53
+ /* @__PURE__ */ jsx(
54
+ "path",
55
+ {
56
+ d: "M12.8858 6.44922L16.6 10.168V18.668L8.64108 10.6992L12.8858 6.44922Z",
57
+ fill: "url(#paint1_linear_2976_9475)"
58
+ }
59
+ ),
60
+ /* @__PURE__ */ jsx(
61
+ "path",
62
+ {
63
+ d: "M67.5439 6.48828C68.2894 6.48828 68.9145 6.67064 69.418 7.03516C69.5229 7.10943 69.6214 7.1907 69.7158 7.27637V6.70703H71.248V14.959C71.248 15.1583 71.2381 15.3485 71.2188 15.5283C71.2042 15.7129 71.1774 15.8925 71.1387 16.0674C71.0225 16.5776 70.7998 16.9957 70.4707 17.3213C70.1415 17.6518 69.7321 17.8972 69.2432 18.0576C68.7592 18.2179 68.2222 18.2988 67.6318 18.2988C67.1962 18.2988 66.7768 18.2308 66.375 18.0947C65.9782 17.9587 65.6202 17.7614 65.3008 17.5039C64.9813 17.2512 64.7199 16.9446 64.5166 16.585L66.1289 15.7832C66.2789 16.0698 66.4888 16.2819 66.7598 16.418C67.0356 16.5589 67.3289 16.6289 67.6387 16.6289C68.0016 16.6289 68.3258 16.5628 68.6113 16.4316C68.8969 16.3053 69.1176 16.116 69.2725 15.8633C69.4321 15.6155 69.5077 15.3047 69.498 14.9307V14.1797C69.4665 14.2037 69.4359 14.229 69.4033 14.252C68.8855 14.6164 68.2441 14.7988 67.4795 14.7988C66.7582 14.7988 66.1281 14.6165 65.5908 14.252C65.0537 13.8875 64.637 13.3915 64.3418 12.7646C64.0467 12.1378 63.8994 11.4307 63.8994 10.6436C63.8994 9.84651 64.0465 9.13673 64.3418 8.51465C64.6419 7.88768 65.0663 7.39481 65.6133 7.03516C66.1601 6.67077 66.8036 6.48836 67.5439 6.48828ZM37.5 6.48828C38.1099 6.48828 38.6496 6.58294 39.1191 6.77246C39.5935 6.96201 39.9762 7.2321 40.2666 7.58203C40.5569 7.93184 40.7359 8.34227 40.8037 8.81348L39.0176 9.13477C38.974 8.79951 38.8218 8.53424 38.5605 8.33984C38.304 8.14547 37.96 8.03605 37.5293 8.01172C37.1178 7.98742 36.7859 8.05051 36.5342 8.20117C36.2825 8.34698 36.1562 8.55398 36.1562 8.82129C36.1563 8.97184 36.208 9.10017 36.3096 9.20703C36.4112 9.31394 36.614 9.42141 36.9189 9.52832C37.2288 9.63524 37.6889 9.76635 38.2988 9.92188C38.9232 10.0823 39.4222 10.2666 39.7949 10.4756C40.1722 10.6796 40.4428 10.9254 40.6074 11.2119C40.7768 11.4987 40.8623 11.8466 40.8623 12.2549C40.8623 13.047 40.574 13.6691 39.998 14.1211C39.4268 14.5731 38.6348 14.7988 37.623 14.7988C36.6551 14.7988 35.8687 14.5799 35.2637 14.1426C34.6587 13.7052 34.2909 13.0908 34.1602 12.2988L35.9463 12.0215C36.0383 12.4102 36.2411 12.7169 36.5557 12.9404C36.8703 13.164 37.2678 13.2754 37.7471 13.2754C38.1681 13.2754 38.4922 13.1926 38.7197 13.0273C38.9521 12.8572 39.0684 12.6266 39.0684 12.335C39.0684 12.1552 39.0245 12.0122 38.9375 11.9053C38.8552 11.7935 38.6713 11.686 38.3857 11.584C38.1001 11.4819 37.6618 11.3528 37.0713 11.1973C36.4131 11.0223 35.8901 10.8359 35.5029 10.6367C35.1158 10.4327 34.8374 10.192 34.668 9.91504C34.4985 9.63801 34.4141 9.30188 34.4141 8.9082C34.4141 8.41746 34.5423 7.98943 34.7988 7.625C35.0553 7.26073 35.4135 6.98146 35.873 6.78711C36.3329 6.58784 36.8755 6.48828 37.5 6.48828ZM53.3047 6.48828C54.0937 6.48828 54.7815 6.66572 55.3672 7.02051C55.9527 7.37528 56.4072 7.86634 56.7314 8.49316C57.0558 9.11525 57.2187 9.83193 57.2188 10.6436C57.2188 11.46 57.0537 12.1817 56.7246 12.8086C56.4003 13.4307 55.9451 13.9196 55.3594 14.2744C54.7737 14.6242 54.0888 14.7988 53.3047 14.7988C52.5205 14.7988 51.8357 14.6214 51.25 14.2666C50.6643 13.9118 50.2091 13.4238 49.8848 12.8018C49.5653 12.1748 49.4053 11.4552 49.4053 10.6436C49.4053 9.81735 49.5703 9.09279 49.8994 8.4707C50.2286 7.8488 50.6859 7.36255 51.2715 7.0127C51.8572 6.66281 52.5351 6.48828 53.3047 6.48828ZM76.7471 6.48828C77.5603 6.48828 78.25 6.68053 78.8164 7.06445C79.3876 7.44351 79.812 7.97991 80.0879 8.6748C80.3638 9.36976 80.4672 10.189 80.3994 11.1318H74.7256C74.7843 11.6972 74.949 12.1516 75.2227 12.4951C75.5711 12.9325 76.0792 13.1513 76.7471 13.1514C77.1779 13.1514 77.5486 13.0567 77.8584 12.8672C78.173 12.6728 78.4146 12.3928 78.584 12.0283L80.3125 12.5537C80.0124 13.2633 79.5473 13.8153 78.918 14.209C78.2936 14.6025 77.6036 14.7988 76.8486 14.7988C76.0549 14.7988 75.358 14.6263 74.7578 14.2812C74.1576 13.9362 73.6875 13.458 73.3486 12.8457C73.0147 12.2334 72.8477 11.5284 72.8477 10.7314C72.8477 9.87126 73.0127 9.12495 73.3418 8.49316C73.671 7.85651 74.1282 7.36263 74.7139 7.0127C75.2995 6.6628 75.9775 6.48832 76.7471 6.48828ZM23.3301 14.5801H21.5801V4.08203H23.3301V14.5801ZM29.6152 6.48047C30.1959 6.48052 30.6753 6.5781 31.0527 6.77246C31.4301 6.96681 31.7305 7.21443 31.9531 7.51562C32.1758 7.81695 32.3398 8.13831 32.4463 8.47852C32.5528 8.81873 32.6213 9.14205 32.6504 9.44824C32.6843 9.74946 32.7012 9.99508 32.7012 10.1846V14.5801H30.9287V10.7891C30.9287 10.5413 30.9118 10.2669 30.8779 9.96582C30.844 9.66449 30.7645 9.37469 30.6387 9.09766C30.5177 8.81592 30.3337 8.58503 30.0869 8.40527C29.8449 8.22551 29.5157 8.13579 29.0996 8.13574C28.8769 8.13574 28.6563 8.17221 28.4385 8.24512C28.2206 8.31802 28.0219 8.4442 27.8428 8.62402C27.6685 8.79899 27.5284 9.04249 27.4219 9.35352C27.3154 9.65965 27.2617 10.0532 27.2617 10.5342V14.5801H25.4902V6.70703H27.0518V7.58301C27.2521 7.34675 27.486 7.14172 27.7559 6.96973C28.2593 6.64409 28.8794 6.48047 29.6152 6.48047ZM48.748 5.83887H44.2021V8.45605H47.876V10.2061H44.2021V14.5801H42.4521V4.08203H48.748V5.83887ZM62.5137 6.67773C62.7606 6.65829 63.001 6.66815 63.2334 6.70703V8.34766C63.001 8.27961 62.7317 8.25695 62.4268 8.28125C62.1267 8.30557 61.8553 8.39134 61.6133 8.53711C61.3715 8.66829 61.1733 8.83606 61.0186 9.04004C60.8686 9.24404 60.7572 9.47701 60.6846 9.73926C60.612 9.99685 60.5752 10.2768 60.5752 10.5781V14.5801H58.8184V6.70703H60.3652V7.96582C60.4243 7.85986 60.4888 7.75824 60.5605 7.66211C60.7251 7.4434 60.9219 7.26302 61.1494 7.12207C61.3429 6.99098 61.5559 6.88926 61.7881 6.81641C62.0251 6.73869 62.267 6.69235 62.5137 6.67773ZM67.8057 8.0625C67.3362 8.06252 66.9485 8.17982 66.6436 8.41309C66.3389 8.64144 66.1139 8.95232 65.9688 9.3457C65.8235 9.7345 65.751 10.1673 65.751 10.6436C65.751 11.1247 65.8215 11.5624 65.9619 11.9561C66.1071 12.3447 66.3269 12.6535 66.6221 12.8818C66.9174 13.1103 67.293 13.2246 67.748 13.2246C68.2174 13.2246 68.5953 13.1171 68.8809 12.9033C69.1711 12.6846 69.3811 12.3808 69.5117 11.9922C69.6473 11.6034 69.7158 11.1539 69.7158 10.6436C69.7158 10.1284 69.6473 9.67886 69.5117 9.29492C69.381 8.90617 69.1753 8.60445 68.8945 8.39062C68.6138 8.17213 68.2508 8.0625 67.8057 8.0625ZM53.3047 8.13574C52.8351 8.13574 52.4475 8.24222 52.1426 8.45605C51.8425 8.66504 51.6198 8.95977 51.4746 9.33887C51.3295 9.71303 51.2568 10.148 51.2568 10.6436C51.2568 11.4066 51.4288 12.0168 51.7725 12.4736C52.121 12.9256 52.6318 13.1514 53.3047 13.1514C54.0017 13.1514 54.5196 12.9177 54.8584 12.4512C55.1971 11.9846 55.3672 11.3822 55.3672 10.6436C55.3672 9.8807 55.1951 9.27324 54.8516 8.82129C54.5079 8.36444 53.9921 8.13575 53.3047 8.13574ZM76.8203 8.02637C76.1039 8.02637 75.5712 8.25013 75.2227 8.69727C74.9987 8.98144 74.8476 9.35094 74.7676 9.80566H78.6221C78.5589 9.29301 78.4236 8.89686 78.2139 8.61719C77.9186 8.22359 77.4543 8.02645 76.8203 8.02637Z",
64
+ fill: "black"
65
+ }
66
+ ),
67
+ /* @__PURE__ */ jsxs("defs", { children: [
68
+ /* @__PURE__ */ jsxs(
69
+ "linearGradient",
70
+ {
71
+ id: "paint0_linear_2976_9475",
72
+ x1: "1.85883",
73
+ y1: "1.92425",
74
+ x2: "24.3072",
75
+ y2: "9.64016",
76
+ gradientUnits: "userSpaceOnUse",
77
+ children: [
78
+ /* @__PURE__ */ jsx("stop", {}),
79
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
80
+ ]
81
+ }
82
+ ),
83
+ /* @__PURE__ */ jsxs(
84
+ "linearGradient",
85
+ {
86
+ id: "paint1_linear_2976_9475",
87
+ x1: "25.6475",
88
+ y1: "8.65468",
89
+ x2: "10.7901",
90
+ y2: "8.65468",
91
+ gradientUnits: "userSpaceOnUse",
92
+ children: [
93
+ /* @__PURE__ */ jsx("stop", {}),
94
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
95
+ ]
96
+ }
97
+ )
98
+ ] })
99
+ ]
100
+ }
101
+ ) })
98
102
  ] });
99
103
  }
100
- function cn(...inputs) {
101
- return tailwindMerge.twMerge(clsx.clsx(inputs));
102
- }
103
- function AuthContainer({ children, appearance = {} }) {
104
- return /* @__PURE__ */ jsxRuntime.jsxs(
105
- "div",
106
- {
107
- className: cn(
108
- "w-full max-w-[400px] rounded-xl overflow-hidden shadow-lg",
109
- appearance.containerClassName
110
- ),
111
- children: [
112
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
113
- "bg-white p-6 flex flex-col justify-center items-stretch gap-6",
114
- appearance.cardClassName
115
- ), children }),
116
- /* @__PURE__ */ jsxRuntime.jsx(AuthBranding, {})
117
- ]
118
- }
119
- );
104
+ function AuthContainer({ children }) {
105
+ return /* @__PURE__ */ jsxs("div", { className: "if-authContainer if-internal-a8f3d2", children: [
106
+ /* @__PURE__ */ jsx("div", { className: "if-authCard if-internal-b2k9x1", children }),
107
+ /* @__PURE__ */ jsx(AuthBranding, {})
108
+ ] });
120
109
  }
121
- function AuthHeader({
122
- title,
123
- subtitle,
124
- appearance = {}
125
- }) {
126
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
127
- "flex flex-col justify-start items-start gap-2",
128
- appearance.containerClassName
129
- ), children: [
130
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(
131
- "text-2xl font-semibold text-black leading-8",
132
- appearance.titleClassName
133
- ), children: title }),
134
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
135
- "text-sm font-normal text-[#828282] leading-6",
136
- appearance.subtitleClassName
137
- ), children: subtitle })
110
+ function AuthHeader({ title, subtitle }) {
111
+ return /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
112
+ /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: title }),
113
+ subtitle && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: subtitle })
138
114
  ] });
139
115
  }
140
- function AuthErrorBanner({ error, className }) {
141
- if (!error) return null;
142
- return /* @__PURE__ */ jsxRuntime.jsxs(
143
- "div",
144
- {
145
- className: cn(
146
- "flex items-center gap-2 mb-4 pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded",
147
- className
148
- ),
149
- children: [
150
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-6 h-6 text-red-500 shrink-0" }),
151
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-red-600 flex-1", children: error })
152
- ]
153
- }
154
- );
116
+ function AuthErrorBanner({ error }) {
117
+ if (!error) {
118
+ return null;
119
+ }
120
+ return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
121
+ /* @__PURE__ */ jsx(
122
+ AlertTriangle,
123
+ {
124
+ style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#dc2626" }
125
+ }
126
+ ),
127
+ /* @__PURE__ */ jsx("span", { className: "if-errorBanner-text", children: error })
128
+ ] }) });
155
129
  }
156
130
  function AuthFormField({
157
131
  label,
158
132
  id,
159
- appearance = {},
160
133
  ...props
161
134
  }) {
162
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
163
- "flex flex-col justify-center items-stretch gap-1",
164
- appearance.containerClassName
165
- ), children: [
166
- /* @__PURE__ */ jsxRuntime.jsx(
167
- "label",
168
- {
169
- htmlFor: id,
170
- className: cn(
171
- "text-sm font-normal text-black leading-6",
172
- appearance.labelClassName
173
- ),
174
- children: label
175
- }
176
- ),
177
- /* @__PURE__ */ jsxRuntime.jsx(
178
- "input",
179
- {
180
- id,
181
- className: cn(
182
- "w-full flex items-center gap-2 self-stretch",
183
- "pl-3 pr-2 py-2 rounded-sm border border-[#D4D4D4] bg-white",
184
- "text-sm font-normal leading-5",
185
- "placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
186
- "focus:outline-none focus:border-black",
187
- appearance.inputClassName
188
- ),
189
- ...props
190
- }
191
- )
135
+ return /* @__PURE__ */ jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
136
+ /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
137
+ /* @__PURE__ */ jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
192
138
  ] });
193
139
  }
194
140
  function AuthPasswordStrengthIndicator({
195
141
  password,
196
- config,
197
- appearance = {}
142
+ config
198
143
  }) {
199
144
  const requirements = createRequirements(config);
200
- return /* @__PURE__ */ jsxRuntime.jsx(
145
+ return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs(
201
146
  "div",
202
147
  {
203
- className: cn("mt-3 flex flex-col gap-3", appearance.containerClassName),
204
- children: requirements.map((req) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
205
- /* @__PURE__ */ jsxRuntime.jsx(
148
+ className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
149
+ children: [
150
+ /* @__PURE__ */ jsx(
206
151
  "div",
207
152
  {
208
- className: cn(
209
- "flex items-center justify-center w-4 h-4 rounded-full border-2 transition-colors",
210
- req.test(password) ? "bg-[#059669] border-transparent" : "border-neutral-400 bg-white"
211
- ),
212
- children: req.test(password) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3 text-white" })
153
+ style: {
154
+ display: "flex",
155
+ alignItems: "center",
156
+ justifyContent: "center",
157
+ width: "1rem",
158
+ height: "1rem",
159
+ borderRadius: "50%",
160
+ border: "2px solid",
161
+ borderColor: req.test(password) ? "transparent" : "#9ca3af",
162
+ backgroundColor: req.test(password) ? "#059669" : "white",
163
+ transition: "all 0.2s"
164
+ },
165
+ children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
213
166
  }
214
167
  ),
215
- /* @__PURE__ */ jsxRuntime.jsx(
216
- "span",
217
- {
218
- className: cn(
219
- "text-sm font-normal leading-5 text-[#525252]",
220
- appearance.requirementClassName
221
- ),
222
- children: req.label
223
- }
224
- )
225
- ] }, req.label))
226
- }
227
- );
168
+ /* @__PURE__ */ jsx("span", { children: req.label })
169
+ ]
170
+ },
171
+ req.label
172
+ )) }) });
228
173
  }
229
174
  function createRequirements(config) {
230
175
  const requirements = [];
231
- const minLength = config.passwordMinLength;
232
- const requireUppercase = config.requireUppercase;
233
- const requireLowercase = config.requireLowercase;
234
- const requireNumber = config.requireNumber;
235
- const requireSpecialChar = config.requireSpecialChar;
236
- if (requireUppercase) {
176
+ if (config.passwordMinLength) {
237
177
  requirements.push({
238
- label: "At least 1 Uppercase letter",
239
- test: (pwd) => /[A-Z]/.test(pwd)
178
+ label: `At least ${config.passwordMinLength} characters`,
179
+ test: (password) => password.length >= config.passwordMinLength
240
180
  });
241
181
  }
242
- if (requireLowercase) {
182
+ if (config.requireLowercase) {
243
183
  requirements.push({
244
- label: "At least 1 Lowercase letter",
245
- test: (pwd) => /[a-z]/.test(pwd)
184
+ label: "Contains lowercase letter",
185
+ test: (password) => /[a-z]/.test(password)
246
186
  });
247
187
  }
248
- if (requireNumber) {
188
+ if (config.requireUppercase) {
249
189
  requirements.push({
250
- label: "At least 1 Number",
251
- test: (pwd) => /\d/.test(pwd)
190
+ label: "Contains uppercase letter",
191
+ test: (password) => /[A-Z]/.test(password)
252
192
  });
253
193
  }
254
- if (requireSpecialChar) {
194
+ if (config.requireNumber) {
255
195
  requirements.push({
256
- label: "Special character (e.g. !?<>@#$%)",
257
- test: (pwd) => /[!@#$%^&*()_+\-=[\]{};\\|,.<>/?]/.test(pwd)
196
+ label: "Contains number",
197
+ test: (password) => /\d/.test(password)
198
+ });
199
+ }
200
+ if (config.requireSpecialChar) {
201
+ requirements.push({
202
+ label: "Contains special character",
203
+ test: (password) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password)
258
204
  });
259
205
  }
260
- requirements.push({
261
- label: `${minLength} characters or more`,
262
- test: (pwd) => pwd.length >= minLength
263
- });
264
206
  return requirements;
265
207
  }
266
- function validatePasswordStrength(password, config) {
267
- if (!password) return false;
268
- const requirements = createRequirements(config);
269
- return requirements.every((req) => req.test(password));
270
- }
271
208
  function AuthPasswordField({
272
209
  label,
273
210
  id,
@@ -275,121 +212,78 @@ function AuthPasswordField({
275
212
  authConfig,
276
213
  forgotPasswordLink,
277
214
  value,
278
- appearance = {},
279
215
  onFocus,
280
216
  ...props
281
217
  }) {
282
- const [showPassword, setShowPassword] = react.useState(false);
283
- const [showStrength, setShowStrength] = react.useState(false);
218
+ const [showPassword, setShowPassword] = useState(false);
219
+ const [showStrength, setShowStrength] = useState(false);
284
220
  const handleFocus = (e) => {
285
221
  if (showStrengthIndicator) {
286
222
  setShowStrength(true);
287
223
  }
288
224
  onFocus?.(e);
289
225
  };
290
- return /* @__PURE__ */ jsxRuntime.jsxs(
291
- "div",
292
- {
293
- className: cn(
294
- "flex flex-col justify-center items-stretch gap-1",
295
- appearance.containerClassName
226
+ return /* @__PURE__ */ jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
227
+ (label || forgotPasswordLink) && /* @__PURE__ */ jsxs("div", { className: "if-passwordField-labelRow", children: [
228
+ /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
229
+ forgotPasswordLink && /* @__PURE__ */ jsx("a", { href: forgotPasswordLink.href, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
230
+ ] }),
231
+ /* @__PURE__ */ jsxs("div", { className: "if-passwordField-inputWrapper", children: [
232
+ /* @__PURE__ */ jsx(
233
+ "input",
234
+ {
235
+ id,
236
+ type: showPassword ? "text" : "password",
237
+ className: "if-passwordField-input",
238
+ value,
239
+ onFocus: handleFocus,
240
+ ...props
241
+ }
296
242
  ),
297
- children: [
298
- (label || forgotPasswordLink) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
299
- /* @__PURE__ */ jsxRuntime.jsx(
300
- "label",
301
- {
302
- htmlFor: id,
303
- className: cn(
304
- "text-sm font-normal text-black leading-6",
305
- appearance.labelClassName
306
- ),
307
- children: label
308
- }
309
- ),
310
- forgotPasswordLink && /* @__PURE__ */ jsxRuntime.jsx(
311
- "a",
312
- {
313
- href: forgotPasswordLink.href,
314
- className: "text-right text-sm font-normal text-[#737373] leading-6",
315
- children: forgotPasswordLink.text || "Forget Password?"
316
- }
317
- )
318
- ] }),
319
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
320
- /* @__PURE__ */ jsxRuntime.jsx(
321
- "input",
322
- {
323
- id,
324
- type: showPassword ? "text" : "password",
325
- className: cn(
326
- "w-full flex items-center gap-2 self-stretch",
327
- "pl-3 py-2 pr-8 rounded border border-[#D4D4D4] bg-white",
328
- "text-sm font-normal leading-5",
329
- "placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
330
- "focus:outline-none focus:border-black",
331
- appearance.inputClassName
332
- ),
333
- value,
334
- onFocus: handleFocus,
335
- ...props
336
- }
337
- ),
338
- /* @__PURE__ */ jsxRuntime.jsx(
339
- "button",
340
- {
341
- type: "button",
342
- onClick: () => setShowPassword(!showPassword),
343
- className: "absolute right-2 top-1/2 -translate-y-1/2 bg-transparent border-none text-[#A6A6A6] cursor-pointer transition-colors hover:text-gray-600 flex items-center justify-center",
344
- "aria-label": showPassword ? "Hide password" : "Show password",
345
- children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
346
- }
347
- )
348
- ] }),
349
- showStrengthIndicator && showStrength && /* @__PURE__ */ jsxRuntime.jsx(
350
- AuthPasswordStrengthIndicator,
351
- {
352
- password: String(value || ""),
353
- config: authConfig
354
- }
355
- )
356
- ]
357
- }
358
- );
243
+ /* @__PURE__ */ jsx(
244
+ "button",
245
+ {
246
+ type: "button",
247
+ onClick: () => setShowPassword(!showPassword),
248
+ className: "if-passwordField-toggleButton",
249
+ "aria-label": showPassword ? "Hide password" : "Show password",
250
+ children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
251
+ }
252
+ )
253
+ ] }),
254
+ showStrengthIndicator && showStrength && /* @__PURE__ */ jsx(AuthPasswordStrengthIndicator, { password: String(value || ""), config: authConfig })
255
+ ] });
359
256
  }
360
257
  function AuthSubmitButton({
361
258
  children,
362
259
  isLoading = false,
363
260
  confirmed = false,
364
- disabled = false,
365
- className
261
+ disabled = false
366
262
  }) {
367
- return /* @__PURE__ */ jsxRuntime.jsxs(
263
+ return /* @__PURE__ */ jsxs(
368
264
  "button",
369
265
  {
370
266
  type: "submit",
371
- className: cn(
372
- "rounded-sm bg-black w-full flex mt-4 px-4 py-2",
373
- "justify-center items-center gap-2.5 self-stretch",
374
- "text-white font-semibold font-manrope text-base leading-normal",
375
- "border-none cursor-pointer transition-colors",
376
- "hover:bg-gray-800",
377
- "disabled:opacity-50 disabled:cursor-not-allowed",
378
- className
379
- ),
267
+ className: "if-submitButton if-internal-b8p3m4",
380
268
  disabled: disabled || isLoading || confirmed,
381
269
  children: [
382
- isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-5 h-5 animate-spin", size: 20 }),
383
- confirmed && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "w-5 h-5", size: 20 }),
270
+ isLoading && /* @__PURE__ */ jsx(Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
271
+ confirmed && /* @__PURE__ */ jsx(CircleCheck, { className: "if-submitButton-icon", size: 20 }),
384
272
  children
385
273
  ]
386
274
  }
387
275
  );
388
276
  }
389
- function AuthLink({ text, linkText, href, appearance = {} }) {
277
+ function AuthLink({
278
+ text,
279
+ linkText,
280
+ href
281
+ }) {
390
282
  const currentSearch = typeof window !== "undefined" ? window.location.search : "";
391
283
  const finalHref = (() => {
392
- if (!currentSearch) return href;
284
+ if (!currentSearch) {
285
+ return href;
286
+ }
393
287
  try {
394
288
  const url = new URL(href, window.location.origin);
395
289
  const currentParams = new URLSearchParams(currentSearch);
@@ -403,59 +297,45 @@ function AuthLink({ text, linkText, href, appearance = {} }) {
403
297
  return href;
404
298
  }
405
299
  })();
406
- return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn(
407
- "text-center text-sm font-normal text-[#828282] leading-6",
408
- appearance.containerClassName
409
- ), children: [
410
- text,
411
- " ",
412
- /* @__PURE__ */ jsxRuntime.jsx(
413
- "a",
414
- {
415
- href: finalHref,
416
- className: cn(
417
- "text-sm font-medium text-black leading-6",
418
- appearance.linkClassName
419
- ),
420
- children: linkText
421
- }
422
- )
300
+ return /* @__PURE__ */ jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
301
+ text && /* @__PURE__ */ jsx("span", { className: "if-authLink-text", children: text }),
302
+ text && " ",
303
+ /* @__PURE__ */ jsx("a", { href: finalHref, className: "if-authLink-link", children: linkText })
423
304
  ] });
424
305
  }
425
- function AuthDivider({ text = "or", className }) {
426
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
427
- "flex justify-center items-center gap-6 self-stretch",
428
- "before:content-[''] before:flex-1 before:h-px before:bg-[#E5E5E5]",
429
- "after:content-[''] after:flex-1 after:h-px after:bg-[#E5E5E5]",
430
- className
431
- ), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold font-manrope text-[#A3A3A3] leading-normal", children: text }) });
306
+ function AuthDivider({ text = "or" }) {
307
+ return /* @__PURE__ */ jsxs("div", { className: "if-authDivider if-internal-ad7k3m", children: [
308
+ /* @__PURE__ */ jsx("div", { className: "if-authDivider-line" }),
309
+ /* @__PURE__ */ jsx("span", { className: "if-authDivider-text", children: text }),
310
+ /* @__PURE__ */ jsx("div", { className: "if-authDivider-line" })
311
+ ] });
432
312
  }
433
313
  var OAUTH_PROVIDER_CONFIG = {
434
314
  google: {
435
315
  name: "Google",
436
- svg: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
437
- /* @__PURE__ */ jsxRuntime.jsx(
316
+ svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
317
+ /* @__PURE__ */ jsx(
438
318
  "path",
439
319
  {
440
320
  d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z",
441
321
  fill: "#4285F4"
442
322
  }
443
323
  ),
444
- /* @__PURE__ */ jsxRuntime.jsx(
324
+ /* @__PURE__ */ jsx(
445
325
  "path",
446
326
  {
447
327
  d: "M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z",
448
328
  fill: "#34A853"
449
329
  }
450
330
  ),
451
- /* @__PURE__ */ jsxRuntime.jsx(
331
+ /* @__PURE__ */ jsx(
452
332
  "path",
453
333
  {
454
334
  d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.17.282-1.709V4.958H.957C.347 6.173 0 7.548 0 9c0 1.452.348 2.827.957 4.042l3.007-2.335z",
455
335
  fill: "#FBBC05"
456
336
  }
457
337
  ),
458
- /* @__PURE__ */ jsxRuntime.jsx(
338
+ /* @__PURE__ */ jsx(
459
339
  "path",
460
340
  {
461
341
  d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z",
@@ -467,12 +347,12 @@ var OAUTH_PROVIDER_CONFIG = {
467
347
  },
468
348
  github: {
469
349
  name: "GitHub",
470
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
350
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
471
351
  className: "insforge-oauth-github"
472
352
  },
473
353
  discord: {
474
354
  name: "Discord",
475
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
355
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
476
356
  "path",
477
357
  {
478
358
  d: "M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z",
@@ -483,7 +363,7 @@ var OAUTH_PROVIDER_CONFIG = {
483
363
  },
484
364
  facebook: {
485
365
  name: "Facebook",
486
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
366
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
487
367
  "path",
488
368
  {
489
369
  d: "M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047v-2.66c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.971H15.83c-1.49 0-1.955.93-1.955 1.886v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z",
@@ -494,7 +374,7 @@ var OAUTH_PROVIDER_CONFIG = {
494
374
  },
495
375
  linkedin: {
496
376
  name: "LinkedIn",
497
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
377
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
498
378
  "path",
499
379
  {
500
380
  d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
@@ -505,45 +385,45 @@ var OAUTH_PROVIDER_CONFIG = {
505
385
  },
506
386
  microsoft: {
507
387
  name: "Microsoft",
508
- svg: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 23 23", fill: "none", children: [
509
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0h11v11H0z", fill: "#F25022" }),
510
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 0h11v11H12z", fill: "#7FBA00" }),
511
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 12h11v11H0z", fill: "#00A4EF" }),
512
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12h11v11H12z", fill: "#FFB900" })
388
+ svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 23 23", fill: "none", children: [
389
+ /* @__PURE__ */ jsx("path", { d: "M0 0h11v11H0z", fill: "#F25022" }),
390
+ /* @__PURE__ */ jsx("path", { d: "M12 0h11v11H12z", fill: "#7FBA00" }),
391
+ /* @__PURE__ */ jsx("path", { d: "M0 12h11v11H0z", fill: "#00A4EF" }),
392
+ /* @__PURE__ */ jsx("path", { d: "M12 12h11v11H12z", fill: "#FFB900" })
513
393
  ] }),
514
394
  className: "insforge-oauth-microsoft"
515
395
  },
516
396
  apple: {
517
397
  name: "Apple",
518
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
398
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
519
399
  className: "insforge-oauth-apple"
520
400
  },
521
401
  x: {
522
402
  name: "X",
523
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }),
403
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }),
524
404
  className: "insforge-oauth-x"
525
405
  },
526
406
  instagram: {
527
407
  name: "Instagram",
528
- svg: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
529
- /* @__PURE__ */ jsxRuntime.jsx(
408
+ svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
409
+ /* @__PURE__ */ jsx(
530
410
  "path",
531
411
  {
532
412
  d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
533
413
  fill: "url(#instagram-gradient)"
534
414
  }
535
415
  ),
536
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "instagram-gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
537
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#FD5949" }),
538
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#D6249F" }),
539
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#285AEB" })
416
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "instagram-gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
417
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#FD5949" }),
418
+ /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#D6249F" }),
419
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#285AEB" })
540
420
  ] }) })
541
421
  ] }),
542
422
  className: "insforge-oauth-instagram"
543
423
  },
544
424
  tiktok: {
545
425
  name: "TikTok",
546
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
426
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
547
427
  "path",
548
428
  {
549
429
  d: "M19.589 6.686a4.793 4.793 0 01-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 01-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 013.183-4.51v-3.5a6.329 6.329 0 00-5.394 10.692 6.33 6.33 0 0010.857-4.424V8.687a8.182 8.182 0 004.773 1.526V6.79a4.831 4.831 0 01-1.003-.104z",
@@ -554,7 +434,7 @@ var OAUTH_PROVIDER_CONFIG = {
554
434
  },
555
435
  spotify: {
556
436
  name: "Spotify",
557
- svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
437
+ svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
558
438
  "path",
559
439
  {
560
440
  d: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z",
@@ -573,43 +453,39 @@ function AuthOAuthButton({
573
453
  disabled,
574
454
  loading,
575
455
  displayMode = "full",
576
- style,
577
- className
456
+ style
578
457
  }) {
579
458
  const config = getProviderConfig(provider);
580
459
  if (!config) {
581
460
  return null;
582
461
  }
583
462
  const getButtonText = () => {
584
- if (loading) return "Authenticating...";
585
- if (displayMode === "full") return `Continue with ${config.name}`;
586
- if (displayMode === "short") return config.name;
463
+ if (displayMode === "full") {
464
+ return `Continue with ${config.name}`;
465
+ }
466
+ if (displayMode === "short") {
467
+ return config.name;
468
+ }
587
469
  return "";
588
470
  };
589
- return /* @__PURE__ */ jsxRuntime.jsxs(
471
+ const className = [
472
+ "if-oauthButton",
473
+ "if-internal-o4k7w2",
474
+ displayMode === "full" && "if-oauthButton-full",
475
+ displayMode === "short" && "if-oauthButton-short",
476
+ displayMode === "icon" && "if-oauthButton-icon-only"
477
+ ].filter(Boolean).join(" ");
478
+ return /* @__PURE__ */ jsxs(
590
479
  "button",
591
480
  {
592
481
  type: "button",
593
482
  onClick: () => onClick(provider),
594
- className: cn(
595
- "flex w-full h-9 px-3 py-2",
596
- "flex-row justify-center items-center gap-3",
597
- "rounded-md border border-[#E4E4E7] bg-white",
598
- "shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]",
599
- "text-[#09090B] text-center text-sm font-medium leading-5",
600
- "cursor-pointer transition-all duration-200",
601
- "hover:bg-[#f9fafb] hover:border-[#9ca3af]",
602
- "disabled:opacity-60 disabled:cursor-not-allowed",
603
- displayMode === "full" && "justify-center",
604
- displayMode === "short" && "justify-center px-2 gap-2",
605
- displayMode === "icon" && "justify-center gap-0",
606
- className
607
- ),
483
+ className,
608
484
  disabled: disabled || loading,
609
485
  style,
610
486
  children: [
611
- loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-[18px] h-[18px] animate-spin", size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center shrink-0", children: config.svg }),
612
- getButtonText() && /* @__PURE__ */ jsxRuntime.jsx("span", { children: getButtonText() })
487
+ loading ? /* @__PURE__ */ jsx(Loader2, { className: "if-oauthButton-icon if-submitButton-spinner", size: 18 }) : /* @__PURE__ */ jsx("span", { className: "if-oauthButton-icon", children: config.svg }),
488
+ getButtonText() && /* @__PURE__ */ jsx("span", { children: getButtonText() })
613
489
  ]
614
490
  }
615
491
  );
@@ -618,16 +494,19 @@ function AuthOAuthProviders({
618
494
  providers,
619
495
  onClick,
620
496
  disabled,
621
- loading,
622
- appearance = {}
497
+ loading
623
498
  }) {
624
499
  if (!providers || providers.length === 0) {
625
500
  return null;
626
501
  }
627
502
  const count = providers.length;
628
503
  const getDisplayMode = () => {
629
- if (count === 1) return "full";
630
- if (count === 2 || count === 4) return "short";
504
+ if (count === 1) {
505
+ return "full";
506
+ }
507
+ if (count === 2 || count === 4) {
508
+ return "short";
509
+ }
631
510
  return "icon";
632
511
  };
633
512
  const getGridColumnStyle = (index) => {
@@ -663,22 +542,30 @@ function AuthOAuthProviders({
663
542
  return { gridColumn: "span 2 / span 2" };
664
543
  }
665
544
  };
666
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
667
- "grid gap-3 w-full grid-cols-6",
668
- appearance.containerClassName
669
- ), children: providers.map((provider, index) => /* @__PURE__ */ jsxRuntime.jsx(
670
- AuthOAuthButton,
545
+ return /* @__PURE__ */ jsx(
546
+ "div",
671
547
  {
672
- provider,
673
- onClick,
674
- disabled,
675
- loading: loading === provider,
676
- displayMode: getDisplayMode(),
677
- style: getGridColumnStyle(index),
678
- className: appearance.buttonClassName
679
- },
680
- provider
681
- )) });
548
+ className: "if-oauthProviders if-internal-op3m8k",
549
+ style: {
550
+ display: "grid",
551
+ gridTemplateColumns: "repeat(6, 1fr)",
552
+ gap: "0.75rem",
553
+ width: "100%"
554
+ },
555
+ children: providers.map((provider, index) => /* @__PURE__ */ jsx(
556
+ AuthOAuthButton,
557
+ {
558
+ provider,
559
+ onClick,
560
+ disabled,
561
+ loading: loading === provider,
562
+ displayMode: getDisplayMode(),
563
+ style: getGridColumnStyle(index)
564
+ },
565
+ provider
566
+ ))
567
+ }
568
+ );
682
569
  }
683
570
  function AuthVerificationCodeInput({
684
571
  length = 6,
@@ -686,13 +573,16 @@ function AuthVerificationCodeInput({
686
573
  email,
687
574
  onChange,
688
575
  disabled = false,
689
- onComplete,
690
- appearance = {}
576
+ onComplete
691
577
  }) {
692
- const inputRefs = react.useRef([]);
578
+ const inputRefs = useRef([]);
693
579
  const handleChange = (index, digit) => {
694
- if (digit.length > 1) return;
695
- if (digit && !/^\d$/.test(digit)) return;
580
+ if (digit.length > 1) {
581
+ return;
582
+ }
583
+ if (digit && !/^\d$/.test(digit)) {
584
+ return;
585
+ }
696
586
  const newValue = value.split("");
697
587
  newValue[index] = digit;
698
588
  const updatedValue = newValue.join("");
@@ -728,17 +618,14 @@ function AuthVerificationCodeInput({
728
618
  }
729
619
  }
730
620
  };
731
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
732
- "flex flex-col justify-center items-center gap-6",
733
- appearance.containerClassName
734
- ), children: [
735
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-normal text-[#525252] leading-5", children: [
621
+ return /* @__PURE__ */ jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
622
+ /* @__PURE__ */ jsxs("p", { className: "if-verificationCode-description", children: [
736
623
  "We've sent a verification code to your inbox at",
737
624
  " ",
738
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-black leading-5", children: email }),
625
+ /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email }),
739
626
  ". Enter it below to proceed."
740
627
  ] }),
741
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-3 justify-center items-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
628
+ /* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
742
629
  "input",
743
630
  {
744
631
  ref: (el) => {
@@ -752,14 +639,7 @@ function AuthVerificationCodeInput({
752
639
  onKeyDown: (e) => handleKeyDown(index, e),
753
640
  onPaste: handlePaste,
754
641
  disabled,
755
- className: cn(
756
- "w-full h-12 px-3 py-2 rounded border border-[#E0E0E0] bg-white",
757
- "text-center text-base font-semibold leading-5 text-black",
758
- "transition-all duration-200 outline-none",
759
- "focus:border-black focus:shadow-[0_0_0_2px_rgba(0,0,0,0.1)]",
760
- "disabled:bg-[#F5F5F5] disabled:cursor-not-allowed disabled:opacity-60",
761
- appearance.inputClassName
762
- ),
642
+ className: "if-verificationCode-input",
763
643
  autoComplete: "one-time-code"
764
644
  },
765
645
  index
@@ -773,15 +653,15 @@ function AuthEmailVerificationStep({
773
653
  onVerifyCode
774
654
  }) {
775
655
  const { baseUrl } = useInsforge();
776
- const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
777
- const [resendDisabled, setResendDisabled] = react.useState(true);
778
- const [resendCountdown, setResendCountdown] = react.useState(60);
779
- const [isSending, setIsSending] = react.useState(false);
780
- const [verificationCode, setVerificationCode] = react.useState("");
781
- const [isVerifying, setIsVerifying] = react.useState(false);
782
- const [verificationError, setVerificationError] = react.useState("");
656
+ const [insforge] = useState(() => createClient({ baseUrl }));
657
+ const [resendDisabled, setResendDisabled] = useState(true);
658
+ const [resendCountdown, setResendCountdown] = useState(60);
659
+ const [isSending, setIsSending] = useState(false);
660
+ const [verificationCode, setVerificationCode] = useState("");
661
+ const [isVerifying, setIsVerifying] = useState(false);
662
+ const [verificationError, setVerificationError] = useState("");
783
663
  const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
784
- react.useEffect(() => {
664
+ useEffect(() => {
785
665
  const sendInitialEmail = async () => {
786
666
  try {
787
667
  await insforge.auth.sendVerificationEmail({ email });
@@ -790,7 +670,7 @@ function AuthEmailVerificationStep({
790
670
  };
791
671
  void sendInitialEmail();
792
672
  }, [email, method, insforge.auth]);
793
- react.useEffect(() => {
673
+ useEffect(() => {
794
674
  if (resendCountdown > 0) {
795
675
  const timer = setInterval(() => {
796
676
  setResendCountdown((prev) => {
@@ -836,45 +716,105 @@ function AuthEmailVerificationStep({
836
716
  }
837
717
  };
838
718
  const displayDescription = description || defaultDescription;
839
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 items-stretch", children: [
840
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
719
+ return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem", alignItems: "stretch" }, children: [
720
+ /* @__PURE__ */ jsx("p", { className: "if-verificationCode-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
841
721
  part,
842
- index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
722
+ index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
843
723
  ] }, index)) }),
844
- verificationError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
845
- /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-6 h-6 text-red-500 shrink-0", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
846
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
847
- ] }) }),
848
- method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
849
- /* @__PURE__ */ jsxRuntime.jsx(
850
- AuthVerificationCodeInput,
724
+ verificationError && /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
725
+ /* @__PURE__ */ jsx(
726
+ "svg",
851
727
  {
852
- value: verificationCode,
853
- onChange: setVerificationCode,
854
- email,
855
- disabled: isVerifying,
856
- onComplete: (code) => {
857
- void handleVerifyCode(code);
858
- }
728
+ style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#DC2626" },
729
+ fill: "none",
730
+ strokeLinecap: "round",
731
+ strokeLinejoin: "round",
732
+ strokeWidth: "2",
733
+ viewBox: "0 0 24 24",
734
+ stroke: "currentColor",
735
+ children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" })
859
736
  }
860
737
  ),
861
- isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
862
- ] }),
863
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
864
- "Didn't receive the email?",
865
- " ",
866
- /* @__PURE__ */ jsxRuntime.jsx(
867
- "button",
868
- {
869
- onClick: () => {
870
- void handleResend();
871
- },
872
- disabled: resendDisabled || isSending,
873
- className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
874
- children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
875
- }
876
- )
877
- ] })
738
+ /* @__PURE__ */ jsx("p", { className: "if-errorBanner-text", children: verificationError })
739
+ ] }) }),
740
+ method === "code" && /* @__PURE__ */ jsxs(
741
+ "div",
742
+ {
743
+ style: {
744
+ width: "100%",
745
+ backgroundColor: "#F5F5F5",
746
+ borderRadius: "0.5rem",
747
+ padding: "1rem 1rem 1.5rem",
748
+ display: "flex",
749
+ flexDirection: "column",
750
+ gap: "1rem"
751
+ },
752
+ children: [
753
+ /* @__PURE__ */ jsx(
754
+ AuthVerificationCodeInput,
755
+ {
756
+ value: verificationCode,
757
+ onChange: setVerificationCode,
758
+ email,
759
+ disabled: isVerifying,
760
+ onComplete: (code) => {
761
+ void handleVerifyCode(code);
762
+ }
763
+ }
764
+ ),
765
+ isVerifying && /* @__PURE__ */ jsx(
766
+ "p",
767
+ {
768
+ style: {
769
+ fontSize: "0.875rem",
770
+ color: "#828282",
771
+ textAlign: "center",
772
+ fontFamily: "var(--if-font-family)"
773
+ },
774
+ children: "Verifying..."
775
+ }
776
+ )
777
+ ]
778
+ }
779
+ ),
780
+ /* @__PURE__ */ jsxs(
781
+ "div",
782
+ {
783
+ style: {
784
+ width: "100%",
785
+ fontSize: "0.875rem",
786
+ textAlign: "center",
787
+ color: "#828282",
788
+ fontFamily: "var(--if-font-family)"
789
+ },
790
+ children: [
791
+ "Didn't receive the email?",
792
+ " ",
793
+ /* @__PURE__ */ jsx(
794
+ "button",
795
+ {
796
+ onClick: () => {
797
+ void handleResend();
798
+ },
799
+ disabled: resendDisabled || isSending,
800
+ style: {
801
+ color: "#000",
802
+ fontWeight: 500,
803
+ transition: "all 0.2s",
804
+ cursor: resendDisabled || isSending ? "not-allowed" : "pointer",
805
+ background: "none",
806
+ border: "none",
807
+ padding: 0,
808
+ textDecoration: resendDisabled || isSending ? "none" : "underline",
809
+ opacity: resendDisabled || isSending ? 0.5 : 1,
810
+ fontFamily: "var(--if-font-family)"
811
+ },
812
+ children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
813
+ }
814
+ )
815
+ ]
816
+ }
817
+ )
878
818
  ] });
879
819
  }
880
820
  function SignInForm({
@@ -889,7 +829,6 @@ function SignInForm({
889
829
  availableProviders = [],
890
830
  onOAuthClick,
891
831
  authConfig,
892
- appearance = {},
893
832
  title = "Welcome Back",
894
833
  subtitle = "Login to your account",
895
834
  emailLabel = "Email",
@@ -904,161 +843,86 @@ function SignInForm({
904
843
  signUpLinkText = "Sign Up Now",
905
844
  signUpUrl = "/sign-up",
906
845
  dividerText = "or",
907
- // Email verification step props
908
846
  showVerificationStep = false,
909
847
  onVerifyCode,
910
848
  verificationDescription
911
849
  }) {
912
- return /* @__PURE__ */ jsxRuntime.jsxs(
913
- AuthContainer,
914
- {
915
- appearance: {
916
- containerClassName: appearance.container,
917
- cardClassName: appearance.card
918
- },
919
- children: [
920
- /* @__PURE__ */ jsxRuntime.jsx(
921
- AuthHeader,
922
- {
923
- title: showVerificationStep ? "Verify Your Email" : title,
924
- subtitle: showVerificationStep ? "" : subtitle,
925
- appearance: {
926
- containerClassName: appearance.header?.container,
927
- titleClassName: appearance.header?.title,
928
- subtitleClassName: appearance.header?.subtitle
929
- }
930
- }
931
- ),
932
- /* @__PURE__ */ jsxRuntime.jsx(
933
- AuthErrorBanner,
934
- {
935
- error: error || "",
936
- className: appearance.errorBanner
937
- }
938
- ),
939
- showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
940
- AuthEmailVerificationStep,
941
- {
942
- email,
943
- description: verificationDescription,
944
- onVerifyCode
945
- }
946
- ) : /* @__PURE__ */ jsxRuntime.jsxs(
947
- "form",
850
+ return /* @__PURE__ */ jsxs(AuthContainer, { children: [
851
+ /* @__PURE__ */ jsx(
852
+ AuthHeader,
853
+ {
854
+ title: showVerificationStep ? "Verify Your Email" : title,
855
+ subtitle: showVerificationStep ? "" : subtitle
856
+ }
857
+ ),
858
+ /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
859
+ showVerificationStep ? /* @__PURE__ */ jsx(
860
+ AuthEmailVerificationStep,
861
+ {
862
+ email,
863
+ description: verificationDescription,
864
+ onVerifyCode
865
+ }
866
+ ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
867
+ /* @__PURE__ */ jsx(
868
+ AuthFormField,
869
+ {
870
+ id: "email",
871
+ type: "email",
872
+ label: emailLabel,
873
+ placeholder: emailPlaceholder,
874
+ value: email,
875
+ onChange: (e) => onEmailChange(e.target.value),
876
+ required: true,
877
+ autoComplete: "email"
878
+ }
879
+ ),
880
+ /* @__PURE__ */ jsx(
881
+ AuthPasswordField,
882
+ {
883
+ id: "password",
884
+ label: passwordLabel,
885
+ placeholder: passwordPlaceholder,
886
+ value: password,
887
+ onChange: (e) => onPasswordChange(e.target.value),
888
+ required: true,
889
+ autoComplete: "current-password",
890
+ authConfig,
891
+ forgotPasswordLink: forgotPasswordUrl ? {
892
+ href: forgotPasswordUrl,
893
+ text: forgotPasswordText
894
+ } : void 0
895
+ }
896
+ ),
897
+ /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
898
+ ] }),
899
+ !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
900
+ /* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
901
+ availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
902
+ /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
903
+ /* @__PURE__ */ jsx(
904
+ AuthOAuthProviders,
948
905
  {
949
- onSubmit,
950
- noValidate: true,
951
- className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
952
- children: [
953
- /* @__PURE__ */ jsxRuntime.jsx(
954
- AuthFormField,
955
- {
956
- id: "email",
957
- type: "email",
958
- label: emailLabel,
959
- placeholder: emailPlaceholder,
960
- value: email,
961
- onChange: (e) => onEmailChange(e.target.value),
962
- required: true,
963
- autoComplete: "email",
964
- appearance: {
965
- containerClassName: appearance.form?.emailField?.container,
966
- labelClassName: appearance.form?.emailField?.label,
967
- inputClassName: appearance.form?.emailField?.input
968
- }
969
- }
970
- ),
971
- /* @__PURE__ */ jsxRuntime.jsx(
972
- AuthPasswordField,
973
- {
974
- id: "password",
975
- label: passwordLabel,
976
- placeholder: passwordPlaceholder,
977
- value: password,
978
- onChange: (e) => onPasswordChange(e.target.value),
979
- required: true,
980
- autoComplete: "current-password",
981
- authConfig,
982
- forgotPasswordLink: forgotPasswordUrl ? {
983
- href: forgotPasswordUrl,
984
- text: forgotPasswordText
985
- } : void 0,
986
- appearance: {
987
- containerClassName: appearance.form?.passwordField?.container,
988
- labelClassName: appearance.form?.passwordField?.label,
989
- inputClassName: appearance.form?.passwordField?.input
990
- }
991
- }
992
- ),
993
- /* @__PURE__ */ jsxRuntime.jsx(
994
- AuthSubmitButton,
995
- {
996
- isLoading: loading,
997
- disabled: loading || oauthLoading !== null,
998
- className: appearance.button,
999
- children: loading ? loadingButtonText : submitButtonText
1000
- }
1001
- )
1002
- ]
906
+ providers: availableProviders,
907
+ onClick: onOAuthClick,
908
+ disabled: loading || oauthLoading !== null,
909
+ loading: oauthLoading
1003
910
  }
1004
- ),
1005
- !showVerificationStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1006
- /* @__PURE__ */ jsxRuntime.jsx(
1007
- AuthLink,
1008
- {
1009
- text: signUpText,
1010
- linkText: signUpLinkText,
1011
- href: signUpUrl,
1012
- appearance: {
1013
- containerClassName: appearance.link?.container,
1014
- linkClassName: appearance.link?.link
1015
- }
1016
- }
1017
- ),
1018
- availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1019
- /* @__PURE__ */ jsxRuntime.jsx(
1020
- AuthDivider,
1021
- {
1022
- text: dividerText,
1023
- className: appearance.divider
1024
- }
1025
- ),
1026
- /* @__PURE__ */ jsxRuntime.jsx(
1027
- AuthOAuthProviders,
1028
- {
1029
- providers: availableProviders,
1030
- onClick: onOAuthClick,
1031
- disabled: loading || oauthLoading !== null,
1032
- loading: oauthLoading,
1033
- appearance: {
1034
- containerClassName: appearance.oauth?.container,
1035
- buttonClassName: appearance.oauth?.button
1036
- }
1037
- }
1038
- )
1039
- ] })
1040
- ] })
1041
- ]
1042
- }
1043
- );
911
+ )
912
+ ] })
913
+ ] })
914
+ ] });
1044
915
  }
1045
- function SignIn({
1046
- afterSignInUrl,
1047
- onSuccess,
1048
- onError,
1049
- ...uiProps
1050
- }) {
916
+ function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }) {
1051
917
  const { signIn, baseUrl } = useInsforge();
1052
918
  const { authConfig } = usePublicAuthConfig();
1053
- const [email, setEmail] = react.useState("");
1054
- const [password, setPassword] = react.useState("");
1055
- const [error, setError] = react.useState("");
1056
- const [loading, setLoading] = react.useState(false);
1057
- const [step, setStep] = react.useState("form");
1058
- const [oauthLoading, setOauthLoading] = react.useState(
1059
- null
1060
- );
1061
- const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
919
+ const [email, setEmail] = useState("");
920
+ const [password, setPassword] = useState("");
921
+ const [error, setError] = useState("");
922
+ const [loading, setLoading] = useState(false);
923
+ const [step, setStep] = useState("form");
924
+ const [oauthLoading, setOauthLoading] = useState(null);
925
+ const [insforge] = useState(() => createClient({ baseUrl }));
1062
926
  async function handleSubmit(e) {
1063
927
  e.preventDefault();
1064
928
  setLoading(true);
@@ -1075,12 +939,16 @@ function SignIn({
1075
939
  }
1076
940
  const { user, accessToken, redirectTo } = result;
1077
941
  if (onSuccess) {
1078
- if (user) onSuccess(user, accessToken || "", redirectTo);
942
+ if (user) {
943
+ onSuccess(user, accessToken || "", redirectTo);
944
+ }
1079
945
  }
1080
946
  } catch (err) {
1081
- const errorMessage = err.message || "Sign in failed";
947
+ const errorMessage = err instanceof Error ? err.message : "Sign in failed";
1082
948
  setError(errorMessage);
1083
- if (onError) onError(new Error(errorMessage));
949
+ if (onError) {
950
+ onError(new Error(errorMessage));
951
+ }
1084
952
  } finally {
1085
953
  setLoading(false);
1086
954
  }
@@ -1097,7 +965,8 @@ function SignIn({
1097
965
  }
1098
966
  }
1099
967
  } catch (err) {
1100
- throw new Error(err.message || "Invalid verification code");
968
+ const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
969
+ throw new Error(errorMessage);
1101
970
  }
1102
971
  }
1103
972
  async function handleOAuth(provider) {
@@ -1109,16 +978,18 @@ function SignIn({
1109
978
  redirectTo: afterSignInUrl
1110
979
  });
1111
980
  } catch (err) {
1112
- const errorMessage = err.message || `${provider} sign in failed`;
981
+ const errorMessage = err instanceof Error ? err.message : `${provider} sign in failed`;
1113
982
  setError(errorMessage);
1114
- if (onError) onError(new Error(errorMessage));
983
+ if (onError) {
984
+ onError(new Error(errorMessage));
985
+ }
1115
986
  setOauthLoading(null);
1116
987
  }
1117
988
  }
1118
989
  if (!authConfig) {
1119
990
  return null;
1120
991
  }
1121
- return /* @__PURE__ */ jsxRuntime.jsx(
992
+ return /* @__PURE__ */ jsx(
1122
993
  SignInForm,
1123
994
  {
1124
995
  email,
@@ -1150,7 +1021,6 @@ function SignUpForm({
1150
1021
  availableProviders = [],
1151
1022
  onOAuthClick,
1152
1023
  authConfig,
1153
- appearance = {},
1154
1024
  title = "Get Started",
1155
1025
  subtitle = "Create your account",
1156
1026
  emailLabel = "Email",
@@ -1163,143 +1033,75 @@ function SignUpForm({
1163
1033
  signInLinkText = "Login Now",
1164
1034
  signInUrl = "/sign-in",
1165
1035
  dividerText = "or",
1166
- // Email verification step props
1167
1036
  showVerificationStep = false,
1168
1037
  onVerifyCode,
1169
1038
  verificationDescription
1170
1039
  }) {
1171
- return /* @__PURE__ */ jsxRuntime.jsxs(
1172
- AuthContainer,
1173
- {
1174
- appearance: {
1175
- containerClassName: appearance.container,
1176
- cardClassName: appearance.card
1177
- },
1178
- children: [
1179
- /* @__PURE__ */ jsxRuntime.jsx(
1180
- AuthHeader,
1181
- {
1182
- title: showVerificationStep ? "Verify Your Email" : title,
1183
- subtitle: showVerificationStep ? "" : subtitle,
1184
- appearance: {
1185
- containerClassName: appearance.header?.container,
1186
- titleClassName: appearance.header?.title,
1187
- subtitleClassName: appearance.header?.subtitle
1188
- }
1189
- }
1190
- ),
1191
- /* @__PURE__ */ jsxRuntime.jsx(
1192
- AuthErrorBanner,
1193
- {
1194
- error: error || "",
1195
- className: appearance.errorBanner
1196
- }
1197
- ),
1198
- showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
1199
- AuthEmailVerificationStep,
1200
- {
1201
- email,
1202
- description: verificationDescription,
1203
- onVerifyCode
1204
- }
1205
- ) : /* @__PURE__ */ jsxRuntime.jsxs(
1206
- "form",
1040
+ return /* @__PURE__ */ jsxs(AuthContainer, { children: [
1041
+ /* @__PURE__ */ jsx(
1042
+ AuthHeader,
1043
+ {
1044
+ title: showVerificationStep ? "Verify Your Email" : title,
1045
+ subtitle: showVerificationStep ? "" : subtitle
1046
+ }
1047
+ ),
1048
+ /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
1049
+ showVerificationStep ? /* @__PURE__ */ jsx(
1050
+ AuthEmailVerificationStep,
1051
+ {
1052
+ email,
1053
+ description: verificationDescription,
1054
+ onVerifyCode
1055
+ }
1056
+ ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
1057
+ /* @__PURE__ */ jsx(
1058
+ AuthFormField,
1059
+ {
1060
+ id: "email",
1061
+ type: "email",
1062
+ label: emailLabel,
1063
+ placeholder: emailPlaceholder,
1064
+ value: email,
1065
+ onChange: (e) => onEmailChange(e.target.value),
1066
+ required: true,
1067
+ autoComplete: "email"
1068
+ }
1069
+ ),
1070
+ /* @__PURE__ */ jsx(
1071
+ AuthPasswordField,
1072
+ {
1073
+ id: "password",
1074
+ label: passwordLabel,
1075
+ placeholder: passwordPlaceholder,
1076
+ value: password,
1077
+ onChange: (e) => onPasswordChange(e.target.value),
1078
+ required: true,
1079
+ minLength: authConfig.passwordMinLength,
1080
+ autoComplete: "new-password",
1081
+ showStrengthIndicator: true,
1082
+ authConfig
1083
+ }
1084
+ ),
1085
+ /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
1086
+ ] }),
1087
+ !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
1088
+ /* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
1089
+ availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
1090
+ /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
1091
+ /* @__PURE__ */ jsx(
1092
+ AuthOAuthProviders,
1207
1093
  {
1208
- onSubmit,
1209
- noValidate: true,
1210
- className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
1211
- children: [
1212
- /* @__PURE__ */ jsxRuntime.jsx(
1213
- AuthFormField,
1214
- {
1215
- id: "email",
1216
- type: "email",
1217
- label: emailLabel,
1218
- placeholder: emailPlaceholder,
1219
- value: email,
1220
- onChange: (e) => onEmailChange(e.target.value),
1221
- required: true,
1222
- autoComplete: "email",
1223
- appearance: {
1224
- containerClassName: appearance.form?.emailField?.container,
1225
- labelClassName: appearance.form?.emailField?.label,
1226
- inputClassName: appearance.form?.emailField?.input
1227
- }
1228
- }
1229
- ),
1230
- /* @__PURE__ */ jsxRuntime.jsx(
1231
- AuthPasswordField,
1232
- {
1233
- id: "password",
1234
- label: passwordLabel,
1235
- placeholder: passwordPlaceholder,
1236
- value: password,
1237
- onChange: (e) => onPasswordChange(e.target.value),
1238
- required: true,
1239
- minLength: authConfig.passwordMinLength,
1240
- autoComplete: "new-password",
1241
- showStrengthIndicator: true,
1242
- authConfig,
1243
- appearance: {
1244
- containerClassName: appearance.form?.passwordField?.container,
1245
- labelClassName: appearance.form?.passwordField?.label,
1246
- inputClassName: appearance.form?.passwordField?.input
1247
- }
1248
- }
1249
- ),
1250
- /* @__PURE__ */ jsxRuntime.jsx(
1251
- AuthSubmitButton,
1252
- {
1253
- isLoading: loading,
1254
- disabled: loading || oauthLoading !== null,
1255
- className: appearance.button,
1256
- children: loading ? loadingButtonText : submitButtonText
1257
- }
1258
- )
1259
- ]
1094
+ providers: availableProviders,
1095
+ onClick: onOAuthClick,
1096
+ disabled: loading || oauthLoading !== null,
1097
+ loading: oauthLoading
1260
1098
  }
1261
- ),
1262
- !showVerificationStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1263
- /* @__PURE__ */ jsxRuntime.jsx(
1264
- AuthLink,
1265
- {
1266
- text: signInText,
1267
- linkText: signInLinkText,
1268
- href: signInUrl,
1269
- appearance: {
1270
- containerClassName: appearance.link?.container,
1271
- linkClassName: appearance.link?.link
1272
- }
1273
- }
1274
- ),
1275
- availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1276
- /* @__PURE__ */ jsxRuntime.jsx(
1277
- AuthDivider,
1278
- {
1279
- text: dividerText,
1280
- className: appearance.divider
1281
- }
1282
- ),
1283
- /* @__PURE__ */ jsxRuntime.jsx(
1284
- AuthOAuthProviders,
1285
- {
1286
- providers: availableProviders,
1287
- onClick: onOAuthClick,
1288
- disabled: loading || oauthLoading !== null,
1289
- loading: oauthLoading,
1290
- appearance: {
1291
- containerClassName: appearance.oauth?.container,
1292
- buttonClassName: appearance.oauth?.button
1293
- }
1294
- }
1295
- )
1296
- ] })
1297
- ] })
1298
- ]
1299
- }
1300
- );
1099
+ )
1100
+ ] })
1101
+ ] })
1102
+ ] });
1301
1103
  }
1302
- var emailSchema = zod.z.string().min(1, "Email is required").email("Invalid email address");
1104
+ var emailSchema = z.string().min(1, "Email is required").email("Invalid email address");
1303
1105
  function createPasswordSchema(options) {
1304
1106
  const {
1305
1107
  minLength = 6,
@@ -1308,7 +1110,7 @@ function createPasswordSchema(options) {
1308
1110
  requireNumber = false,
1309
1111
  requireSpecialChar = false
1310
1112
  } = options || {};
1311
- let schema = zod.z.string().min(minLength, `Password must be at least ${minLength} characters`);
1113
+ let schema = z.string().min(minLength, `Password must be at least ${minLength} characters`);
1312
1114
  if (requireUppercase) {
1313
1115
  schema = schema.regex(/[A-Z]/, "Password must contain at least one uppercase letter");
1314
1116
  }
@@ -1327,23 +1129,16 @@ function createPasswordSchema(options) {
1327
1129
  return schema;
1328
1130
  }
1329
1131
  createPasswordSchema();
1330
- function SignUp({
1331
- afterSignUpUrl,
1332
- onSuccess,
1333
- onError,
1334
- ...uiProps
1335
- }) {
1132
+ function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }) {
1336
1133
  const { signUp, baseUrl } = useInsforge();
1337
1134
  const { authConfig } = usePublicAuthConfig();
1338
- const [email, setEmail] = react.useState("");
1339
- const [password, setPassword] = react.useState("");
1340
- const [error, setError] = react.useState("");
1341
- const [loading, setLoading] = react.useState(false);
1342
- const [step, setStep] = react.useState("form");
1343
- const [oauthLoading, setOauthLoading] = react.useState(
1344
- null
1345
- );
1346
- const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
1135
+ const [email, setEmail] = useState("");
1136
+ const [password, setPassword] = useState("");
1137
+ const [error, setError] = useState("");
1138
+ const [loading, setLoading] = useState(false);
1139
+ const [step, setStep] = useState("form");
1140
+ const [oauthLoading, setOauthLoading] = useState(null);
1141
+ const [insforge] = useState(() => createClient({ baseUrl }));
1347
1142
  async function handleSubmit(e) {
1348
1143
  e.preventDefault();
1349
1144
  setLoading(true);
@@ -1379,7 +1174,7 @@ function SignUp({
1379
1174
  if ("error" in result) {
1380
1175
  throw new Error(result.error);
1381
1176
  }
1382
- if (result.requiresEmailVerification && !result.accessToken) {
1177
+ if (result.requireEmailVerification && !result.accessToken) {
1383
1178
  setStep("awaiting-verification");
1384
1179
  setLoading(false);
1385
1180
  return;
@@ -1390,9 +1185,11 @@ function SignUp({
1390
1185
  }
1391
1186
  }
1392
1187
  } catch (err) {
1393
- const errorMessage = err.message || "Sign up failed";
1188
+ const errorMessage = err instanceof Error ? err.message : "Sign up failed";
1394
1189
  setError(errorMessage);
1395
- if (onError) onError(new Error(errorMessage));
1190
+ if (onError) {
1191
+ onError(new Error(errorMessage));
1192
+ }
1396
1193
  } finally {
1397
1194
  setLoading(false);
1398
1195
  }
@@ -1409,7 +1206,8 @@ function SignUp({
1409
1206
  }
1410
1207
  }
1411
1208
  } catch (err) {
1412
- throw new Error(err.message || "Invalid verification code");
1209
+ const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
1210
+ throw new Error(errorMessage);
1413
1211
  }
1414
1212
  }
1415
1213
  async function handleOAuth(provider) {
@@ -1421,16 +1219,18 @@ function SignUp({
1421
1219
  redirectTo: afterSignUpUrl
1422
1220
  });
1423
1221
  } catch (err) {
1424
- const errorMessage = err.message || `${provider} sign up failed`;
1222
+ const errorMessage = err instanceof Error ? err.message : `${provider} sign up failed`;
1425
1223
  setError(errorMessage);
1426
- if (onError) onError(new Error(errorMessage));
1224
+ if (onError) {
1225
+ onError(new Error(errorMessage));
1226
+ }
1427
1227
  setOauthLoading(null);
1428
1228
  }
1429
1229
  }
1430
1230
  if (!authConfig) {
1431
1231
  return null;
1432
1232
  }
1433
- return /* @__PURE__ */ jsxRuntime.jsx(
1233
+ return /* @__PURE__ */ jsx(
1434
1234
  SignUpForm,
1435
1235
  {
1436
1236
  email,
@@ -1457,7 +1257,6 @@ function ForgotPasswordForm({
1457
1257
  error,
1458
1258
  loading = false,
1459
1259
  success = false,
1460
- appearance = {},
1461
1260
  title = "Forgot Password?",
1462
1261
  subtitle = "Enter your email address and we'll send you a code to reset your password.",
1463
1262
  emailLabel = "Email",
@@ -1470,101 +1269,66 @@ function ForgotPasswordForm({
1470
1269
  successMessage
1471
1270
  }) {
1472
1271
  if (success) {
1473
- return /* @__PURE__ */ jsxRuntime.jsx(
1474
- AuthContainer,
1272
+ return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
1273
+ "div",
1475
1274
  {
1476
- appearance: {
1477
- containerClassName: appearance.container,
1478
- cardClassName: appearance.card
1479
- },
1480
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
1481
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
1482
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
1483
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
1484
- /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
1485
- ] })
1486
- }
1487
- );
1488
- }
1489
- return /* @__PURE__ */ jsxRuntime.jsxs(
1490
- AuthContainer,
1491
- {
1492
- appearance: {
1493
- containerClassName: appearance.container,
1494
- cardClassName: appearance.card
1495
- },
1496
- children: [
1497
- /* @__PURE__ */ jsxRuntime.jsx(
1498
- AuthHeader,
1499
- {
1500
- title,
1501
- subtitle,
1502
- appearance: {
1503
- containerClassName: appearance.header?.container,
1504
- titleClassName: appearance.header?.title,
1505
- subtitleClassName: appearance.header?.subtitle
1506
- }
1507
- }
1508
- ),
1509
- /* @__PURE__ */ jsxRuntime.jsx(
1510
- AuthErrorBanner,
1511
- {
1512
- error: error || "",
1513
- className: appearance.errorBanner
1514
- }
1515
- ),
1516
- /* @__PURE__ */ jsxRuntime.jsxs(
1517
- "form",
1518
- {
1519
- onSubmit,
1520
- noValidate: true,
1521
- className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
1522
- children: [
1523
- /* @__PURE__ */ jsxRuntime.jsx(
1524
- AuthFormField,
1525
- {
1526
- id: "email",
1527
- type: "email",
1528
- label: emailLabel,
1529
- placeholder: emailPlaceholder,
1530
- value: email,
1531
- onChange: (e) => onEmailChange(e.target.value),
1532
- required: true,
1533
- autoComplete: "email",
1534
- appearance: {
1535
- containerClassName: appearance.form?.emailField?.container,
1536
- labelClassName: appearance.form?.emailField?.label,
1537
- inputClassName: appearance.form?.emailField?.input
1538
- }
1539
- }
1540
- ),
1541
- /* @__PURE__ */ jsxRuntime.jsx(
1542
- AuthSubmitButton,
1275
+ style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
1276
+ children: [
1277
+ /* @__PURE__ */ jsx(
1278
+ "div",
1279
+ {
1280
+ style: {
1281
+ width: "4rem",
1282
+ height: "4rem",
1283
+ borderRadius: "50%",
1284
+ backgroundColor: "#D1FAE5",
1285
+ display: "flex",
1286
+ alignItems: "center",
1287
+ justifyContent: "center"
1288
+ },
1289
+ children: /* @__PURE__ */ jsx(
1290
+ "svg",
1543
1291
  {
1544
- isLoading: loading,
1545
- disabled: loading,
1546
- className: appearance.button,
1547
- children: loading ? loadingButtonText : submitButtonText
1292
+ style: { width: "2rem", height: "2rem", color: "#059669" },
1293
+ fill: "none",
1294
+ strokeLinecap: "round",
1295
+ strokeLinejoin: "round",
1296
+ strokeWidth: "2",
1297
+ viewBox: "0 0 24 24",
1298
+ stroke: "currentColor",
1299
+ children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
1548
1300
  }
1549
1301
  )
1550
- ]
1551
- }
1552
- ),
1553
- /* @__PURE__ */ jsxRuntime.jsx(
1554
- AuthLink,
1555
- {
1556
- text: backToSignInText,
1557
- linkText: "Back to Sign In",
1558
- href: backToSignInUrl,
1559
- appearance: {
1560
- containerClassName: appearance.link?.container,
1561
- linkClassName: appearance.link?.link
1562
1302
  }
1563
- }
1564
- )
1565
- ]
1566
- }
1567
- );
1303
+ ),
1304
+ /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
1305
+ /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
1306
+ /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
1307
+ ]
1308
+ }
1309
+ ) });
1310
+ }
1311
+ return /* @__PURE__ */ jsxs(AuthContainer, { children: [
1312
+ /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
1313
+ /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
1314
+ /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
1315
+ /* @__PURE__ */ jsx(
1316
+ AuthFormField,
1317
+ {
1318
+ id: "email",
1319
+ type: "email",
1320
+ label: emailLabel,
1321
+ placeholder: emailPlaceholder,
1322
+ value: email,
1323
+ onChange: (e) => onEmailChange(e.target.value),
1324
+ required: true,
1325
+ autoComplete: "email"
1326
+ }
1327
+ ),
1328
+ /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
1329
+ ] }),
1330
+ /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
1331
+ ] });
1568
1332
  }
1569
1333
  function ResetPasswordForm({
1570
1334
  newPassword,
@@ -1576,7 +1340,6 @@ function ResetPasswordForm({
1576
1340
  loading = false,
1577
1341
  success = false,
1578
1342
  authConfig,
1579
- appearance = {},
1580
1343
  title = "Reset Password",
1581
1344
  subtitle = "Enter your new password below.",
1582
1345
  newPasswordLabel = "New Password",
@@ -1591,120 +1354,80 @@ function ResetPasswordForm({
1591
1354
  successMessage = "Your password has been successfully reset. You can now sign in with your new password."
1592
1355
  }) {
1593
1356
  if (success) {
1594
- return /* @__PURE__ */ jsxRuntime.jsx(
1595
- AuthContainer,
1357
+ return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
1358
+ "div",
1596
1359
  {
1597
- appearance: {
1598
- containerClassName: appearance.container,
1599
- cardClassName: appearance.card
1600
- },
1601
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
1602
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
1603
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
1604
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage }),
1605
- /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
1606
- ] })
1607
- }
1608
- );
1609
- }
1610
- return /* @__PURE__ */ jsxRuntime.jsxs(
1611
- AuthContainer,
1612
- {
1613
- appearance: {
1614
- containerClassName: appearance.container,
1615
- cardClassName: appearance.card
1616
- },
1617
- children: [
1618
- /* @__PURE__ */ jsxRuntime.jsx(
1619
- AuthHeader,
1620
- {
1621
- title,
1622
- subtitle,
1623
- appearance: {
1624
- containerClassName: appearance.header?.container,
1625
- titleClassName: appearance.header?.title,
1626
- subtitleClassName: appearance.header?.subtitle
1627
- }
1628
- }
1629
- ),
1630
- /* @__PURE__ */ jsxRuntime.jsx(
1631
- AuthErrorBanner,
1632
- {
1633
- error: error || "",
1634
- className: appearance.errorBanner
1635
- }
1636
- ),
1637
- /* @__PURE__ */ jsxRuntime.jsxs(
1638
- "form",
1639
- {
1640
- onSubmit,
1641
- noValidate: true,
1642
- className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
1643
- children: [
1644
- /* @__PURE__ */ jsxRuntime.jsx(
1645
- AuthPasswordField,
1646
- {
1647
- id: "newPassword",
1648
- label: newPasswordLabel,
1649
- placeholder: newPasswordPlaceholder,
1650
- value: newPassword,
1651
- onChange: (e) => onNewPasswordChange(e.target.value),
1652
- required: true,
1653
- autoComplete: "new-password",
1654
- showStrengthIndicator: true,
1655
- authConfig,
1656
- appearance: {
1657
- containerClassName: appearance.form?.newPasswordField?.container,
1658
- labelClassName: appearance.form?.newPasswordField?.label,
1659
- inputClassName: appearance.form?.newPasswordField?.input
1660
- }
1661
- }
1662
- ),
1663
- /* @__PURE__ */ jsxRuntime.jsx(
1664
- AuthPasswordField,
1665
- {
1666
- id: "confirmPassword",
1667
- label: confirmPasswordLabel,
1668
- placeholder: confirmPasswordPlaceholder,
1669
- value: confirmPassword,
1670
- onChange: (e) => onConfirmPasswordChange(e.target.value),
1671
- required: true,
1672
- autoComplete: "new-password",
1673
- authConfig,
1674
- appearance: {
1675
- containerClassName: appearance.form?.confirmPasswordField?.container,
1676
- labelClassName: appearance.form?.confirmPasswordField?.label,
1677
- inputClassName: appearance.form?.confirmPasswordField?.input
1678
- }
1679
- }
1680
- ),
1681
- /* @__PURE__ */ jsxRuntime.jsx(
1682
- AuthSubmitButton,
1360
+ style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
1361
+ children: [
1362
+ /* @__PURE__ */ jsx(
1363
+ "div",
1364
+ {
1365
+ style: {
1366
+ width: "4rem",
1367
+ height: "4rem",
1368
+ borderRadius: "50%",
1369
+ backgroundColor: "#D1FAE5",
1370
+ display: "flex",
1371
+ alignItems: "center",
1372
+ justifyContent: "center"
1373
+ },
1374
+ children: /* @__PURE__ */ jsx(
1375
+ "svg",
1683
1376
  {
1684
- isLoading: loading,
1685
- disabled: loading,
1686
- className: appearance.button,
1687
- children: loading ? loadingButtonText : submitButtonText
1377
+ style: { width: "2rem", height: "2rem", color: "#059669" },
1378
+ fill: "none",
1379
+ strokeLinecap: "round",
1380
+ strokeLinejoin: "round",
1381
+ strokeWidth: "2",
1382
+ viewBox: "0 0 24 24",
1383
+ stroke: "currentColor",
1384
+ children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
1688
1385
  }
1689
1386
  )
1690
- ]
1691
- }
1692
- ),
1693
- /* @__PURE__ */ jsxRuntime.jsx(
1694
- AuthLink,
1695
- {
1696
- text: backToSignInText,
1697
- linkText: "Back to Sign In",
1698
- href: backToSignInUrl,
1699
- appearance: {
1700
- containerClassName: appearance.link?.container,
1701
- linkClassName: appearance.link?.link
1702
1387
  }
1703
- }
1704
- )
1705
- ]
1706
- }
1707
- );
1388
+ ),
1389
+ /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
1390
+ /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage }),
1391
+ /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
1392
+ ]
1393
+ }
1394
+ ) });
1395
+ }
1396
+ return /* @__PURE__ */ jsxs(AuthContainer, { children: [
1397
+ /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
1398
+ /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
1399
+ /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
1400
+ /* @__PURE__ */ jsx(
1401
+ AuthPasswordField,
1402
+ {
1403
+ id: "newPassword",
1404
+ label: newPasswordLabel,
1405
+ placeholder: newPasswordPlaceholder,
1406
+ value: newPassword,
1407
+ onChange: (e) => onNewPasswordChange(e.target.value),
1408
+ required: true,
1409
+ autoComplete: "new-password",
1410
+ showStrengthIndicator: true,
1411
+ authConfig
1412
+ }
1413
+ ),
1414
+ /* @__PURE__ */ jsx(
1415
+ AuthPasswordField,
1416
+ {
1417
+ id: "confirmPassword",
1418
+ label: confirmPasswordLabel,
1419
+ placeholder: confirmPasswordPlaceholder,
1420
+ value: confirmPassword,
1421
+ onChange: (e) => onConfirmPasswordChange(e.target.value),
1422
+ required: true,
1423
+ autoComplete: "new-password",
1424
+ authConfig
1425
+ }
1426
+ ),
1427
+ /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
1428
+ ] }),
1429
+ /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
1430
+ ] });
1708
1431
  }
1709
1432
  function ResetPassword({
1710
1433
  token,
@@ -1715,11 +1438,11 @@ function ResetPassword({
1715
1438
  }) {
1716
1439
  const { resetPassword } = useInsforge();
1717
1440
  const { authConfig } = usePublicAuthConfig();
1718
- const [newPassword, setNewPassword] = react.useState("");
1719
- const [confirmPassword, setConfirmPassword] = react.useState("");
1720
- const [error, setError] = react.useState("");
1721
- const [loading, setLoading] = react.useState(false);
1722
- const [success, setSuccess] = react.useState(false);
1441
+ const [newPassword, setNewPassword] = useState("");
1442
+ const [confirmPassword, setConfirmPassword] = useState("");
1443
+ const [error, setError] = useState("");
1444
+ const [loading, setLoading] = useState(false);
1445
+ const [success, setSuccess] = useState(false);
1723
1446
  async function handleSubmit(e) {
1724
1447
  e.preventDefault();
1725
1448
  setLoading(true);
@@ -1768,7 +1491,7 @@ function ResetPassword({
1768
1491
  }
1769
1492
  }
1770
1493
  } catch (err) {
1771
- const errorMessage = err.message || "Failed to reset password";
1494
+ const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
1772
1495
  setError(errorMessage);
1773
1496
  if (onError) {
1774
1497
  onError(new Error(errorMessage));
@@ -1780,7 +1503,7 @@ function ResetPassword({
1780
1503
  if (!authConfig) {
1781
1504
  return null;
1782
1505
  }
1783
- return /* @__PURE__ */ jsxRuntime.jsx(
1506
+ return /* @__PURE__ */ jsx(
1784
1507
  ResetPasswordForm,
1785
1508
  {
1786
1509
  newPassword,
@@ -1805,19 +1528,19 @@ function ForgotPassword({
1805
1528
  }) {
1806
1529
  const { sendResetPasswordEmail, baseUrl } = useInsforge();
1807
1530
  const { authConfig } = usePublicAuthConfig();
1808
- const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
1809
- const [step, setStep] = react.useState("email");
1810
- const [email, setEmail] = react.useState("");
1811
- const [verificationCode, setVerificationCode] = react.useState("");
1812
- const [resetToken, setResetToken] = react.useState("");
1813
- const [error, setError] = react.useState("");
1814
- const [loading, setLoading] = react.useState(false);
1815
- const [success, setSuccess] = react.useState(false);
1816
- const [resendDisabled, setResendDisabled] = react.useState(true);
1817
- const [resendCountdown, setResendCountdown] = react.useState(60);
1818
- const [isSendingCode, setIsSendingCode] = react.useState(false);
1819
- const [isVerifyingCode, setIsVerifyingCode] = react.useState(false);
1820
- react.useEffect(() => {
1531
+ const [insforge] = useState(() => createClient({ baseUrl }));
1532
+ const [step, setStep] = useState("email");
1533
+ const [email, setEmail] = useState("");
1534
+ const [verificationCode, setVerificationCode] = useState("");
1535
+ const [resetToken, setResetToken] = useState("");
1536
+ const [error, setError] = useState("");
1537
+ const [loading, setLoading] = useState(false);
1538
+ const [success, setSuccess] = useState(false);
1539
+ const [resendDisabled, setResendDisabled] = useState(true);
1540
+ const [resendCountdown, setResendCountdown] = useState(60);
1541
+ const [isSendingCode, setIsSendingCode] = useState(false);
1542
+ const [isVerifyingCode, setIsVerifyingCode] = useState(false);
1543
+ useEffect(() => {
1821
1544
  if (resendCountdown > 0 && step === "code") {
1822
1545
  const timer = setInterval(() => {
1823
1546
  setResendCountdown((prev) => {
@@ -1863,7 +1586,7 @@ function ForgotPassword({
1863
1586
  }
1864
1587
  }
1865
1588
  } catch (err) {
1866
- const errorMessage = err.message || "Failed to send reset code";
1589
+ const errorMessage = err instanceof Error ? err.message : "Failed to send reset code";
1867
1590
  setError(errorMessage);
1868
1591
  if (onError) {
1869
1592
  onError(new Error(errorMessage));
@@ -1877,22 +1600,23 @@ function ForgotPassword({
1877
1600
  setError("");
1878
1601
  setVerificationCode(code);
1879
1602
  try {
1880
- const result = await insforge.auth.verifyResetPasswordCode({ email, code });
1603
+ const result = await insforge.auth.exchangeResetPasswordToken({ email, code });
1881
1604
  if (result.error) {
1882
1605
  throw new Error(result.error.message || "Failed to verify code");
1883
1606
  }
1884
1607
  if (result.data) {
1885
- setResetToken(result.data.resetToken);
1608
+ setResetToken(result.data.token);
1886
1609
  setStep("password");
1887
1610
  }
1888
1611
  } catch (err) {
1889
- setError(err.message || "Invalid verification code");
1612
+ const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
1613
+ setError(errorMessage);
1890
1614
  setVerificationCode("");
1891
1615
  } finally {
1892
1616
  setIsVerifyingCode(false);
1893
1617
  }
1894
1618
  }
1895
- const handleResendCode = react.useCallback(async () => {
1619
+ const handleResendCode = useCallback(async () => {
1896
1620
  setResendDisabled(true);
1897
1621
  setResendCountdown(60);
1898
1622
  setIsSendingCode(true);
@@ -1900,7 +1624,8 @@ function ForgotPassword({
1900
1624
  try {
1901
1625
  await sendResetPasswordEmail(email);
1902
1626
  } catch (err) {
1903
- setError(err.message || "Failed to resend code");
1627
+ const errorMessage = err instanceof Error ? err.message : "Failed to resend code";
1628
+ setError(errorMessage);
1904
1629
  setResendDisabled(false);
1905
1630
  setResendCountdown(0);
1906
1631
  } finally {
@@ -1920,12 +1645,14 @@ function ForgotPassword({
1920
1645
  return null;
1921
1646
  }
1922
1647
  if (step === "email") {
1923
- return /* @__PURE__ */ jsxRuntime.jsx(
1648
+ return /* @__PURE__ */ jsx(
1924
1649
  ForgotPasswordForm,
1925
1650
  {
1926
1651
  email,
1927
1652
  onEmailChange: setEmail,
1928
- onSubmit: handleEmailSubmit,
1653
+ onSubmit: (e) => {
1654
+ void handleEmailSubmit(e);
1655
+ },
1929
1656
  error,
1930
1657
  loading,
1931
1658
  success,
@@ -1935,115 +1662,236 @@ function ForgotPassword({
1935
1662
  );
1936
1663
  }
1937
1664
  if (step === "code") {
1938
- return /* @__PURE__ */ jsxRuntime.jsxs(
1939
- AuthContainer,
1940
- {
1941
- appearance: {
1942
- containerClassName: uiProps.appearance?.container,
1943
- cardClassName: uiProps.appearance?.card
1944
- },
1945
- children: [
1946
- /* @__PURE__ */ jsxRuntime.jsx(
1947
- AuthHeader,
1948
- {
1949
- title: "Enter Reset Code",
1950
- subtitle: `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`,
1951
- appearance: {
1952
- containerClassName: uiProps.appearance?.header?.container,
1953
- titleClassName: uiProps.appearance?.header?.title,
1954
- subtitleClassName: uiProps.appearance?.header?.subtitle
1955
- }
1956
- }
1957
- ),
1958
- /* @__PURE__ */ jsxRuntime.jsx(AuthErrorBanner, { error, className: uiProps.appearance?.errorBanner }),
1959
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
1960
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
1961
- /* @__PURE__ */ jsxRuntime.jsx(
1962
- AuthVerificationCodeInput,
1963
- {
1964
- value: verificationCode,
1965
- onChange: setVerificationCode,
1966
- email,
1967
- disabled: isVerifyingCode,
1968
- onComplete: (code) => {
1969
- void handleVerifyCode(code);
1665
+ return /* @__PURE__ */ jsxs(AuthContainer, { children: [
1666
+ /* @__PURE__ */ jsx(
1667
+ AuthHeader,
1668
+ {
1669
+ title: "Enter Reset Code",
1670
+ subtitle: `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`
1671
+ }
1672
+ ),
1673
+ /* @__PURE__ */ jsx(AuthErrorBanner, { error }),
1674
+ /* @__PURE__ */ jsxs(
1675
+ "div",
1676
+ {
1677
+ style: {
1678
+ width: "100%",
1679
+ display: "flex",
1680
+ flexDirection: "column",
1681
+ gap: "1.5rem",
1682
+ alignItems: "center"
1683
+ },
1684
+ children: [
1685
+ /* @__PURE__ */ jsx(
1686
+ "div",
1687
+ {
1688
+ style: {
1689
+ width: "100%",
1690
+ backgroundColor: "#F5F5F5",
1691
+ borderRadius: "0.5rem",
1692
+ padding: "1rem 1rem 1.5rem",
1693
+ display: "flex",
1694
+ flexDirection: "column",
1695
+ gap: "1rem"
1696
+ },
1697
+ children: /* @__PURE__ */ jsxs(
1698
+ "div",
1699
+ {
1700
+ style: {
1701
+ display: "flex",
1702
+ flexDirection: "column",
1703
+ gap: "0.75rem",
1704
+ marginTop: "0.5rem"
1705
+ },
1706
+ children: [
1707
+ /* @__PURE__ */ jsx(
1708
+ AuthVerificationCodeInput,
1709
+ {
1710
+ value: verificationCode,
1711
+ onChange: setVerificationCode,
1712
+ email,
1713
+ disabled: isVerifyingCode,
1714
+ onComplete: (code) => {
1715
+ void handleVerifyCode(code);
1716
+ }
1717
+ }
1718
+ ),
1719
+ isVerifyingCode && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: "Verifying..." })
1720
+ ]
1970
1721
  }
1971
- }
1972
- ),
1973
- isVerifyingCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
1974
- ] }) }),
1975
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
1976
- "Didn't receive the email?",
1977
- " ",
1978
- /* @__PURE__ */ jsxRuntime.jsx(
1979
- "button",
1980
- {
1981
- onClick: () => {
1982
- void handleResendCode();
1983
- },
1984
- disabled: resendDisabled || isSendingCode,
1985
- className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
1986
- children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
1987
- }
1988
- )
1989
- ] })
1990
- ] }),
1991
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" }) })
1992
- ]
1993
- }
1994
- );
1722
+ )
1723
+ }
1724
+ ),
1725
+ /* @__PURE__ */ jsxs(
1726
+ "div",
1727
+ {
1728
+ style: {
1729
+ width: "100%",
1730
+ fontSize: "0.875rem",
1731
+ textAlign: "center",
1732
+ color: "#828282",
1733
+ fontFamily: "var(--if-font-family)"
1734
+ },
1735
+ children: [
1736
+ "Didn't receive the email?",
1737
+ " ",
1738
+ /* @__PURE__ */ jsx(
1739
+ "button",
1740
+ {
1741
+ onClick: () => {
1742
+ void handleResendCode();
1743
+ },
1744
+ disabled: resendDisabled || isSendingCode,
1745
+ style: {
1746
+ color: "#000",
1747
+ fontWeight: 500,
1748
+ transition: "all 0.2s",
1749
+ cursor: resendDisabled || isSendingCode ? "not-allowed" : "pointer",
1750
+ background: "none",
1751
+ border: "none",
1752
+ padding: 0,
1753
+ textDecoration: resendDisabled || isSendingCode ? "none" : "underline",
1754
+ opacity: resendDisabled || isSendingCode ? 0.5 : 1,
1755
+ fontFamily: "var(--if-font-family)"
1756
+ },
1757
+ children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
1758
+ }
1759
+ )
1760
+ ]
1761
+ }
1762
+ )
1763
+ ]
1764
+ }
1765
+ ),
1766
+ /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", children: "Back to Sign In" }) })
1767
+ ] });
1995
1768
  }
1996
- return /* @__PURE__ */ jsxRuntime.jsx(
1769
+ return /* @__PURE__ */ jsx(
1997
1770
  ResetPassword,
1998
1771
  {
1999
1772
  token: resetToken,
2000
1773
  backToSignInUrl,
2001
1774
  onSuccess: handlePasswordResetSuccess,
2002
- onError,
2003
- appearance: uiProps.appearance
1775
+ onError
2004
1776
  }
2005
1777
  );
2006
1778
  }
2007
1779
  function VerifyEmailStatus({
2008
1780
  status,
2009
1781
  error,
2010
- appearance = {},
2011
1782
  verifyingTitle = "Verifying your email...",
2012
1783
  successTitle = "Email Verified!",
2013
1784
  successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
2014
1785
  errorTitle = "Verification Failed"
2015
1786
  }) {
2016
1787
  if (status === "verifying") {
2017
- return /* @__PURE__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-6", children: [
2018
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: verifyingTitle }),
2019
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white" })
2020
- ] }) });
1788
+ return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
1789
+ "div",
1790
+ {
1791
+ style: {
1792
+ width: "100%",
1793
+ display: "flex",
1794
+ flexDirection: "column",
1795
+ alignItems: "center",
1796
+ justifyContent: "center",
1797
+ gap: "1.5rem"
1798
+ },
1799
+ children: [
1800
+ /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
1801
+ /* @__PURE__ */ jsx(
1802
+ "div",
1803
+ {
1804
+ className: "if-submitButton-spinner",
1805
+ style: {
1806
+ borderRadius: "50%",
1807
+ height: "3rem",
1808
+ width: "3rem",
1809
+ borderBottom: "2px solid black"
1810
+ }
1811
+ }
1812
+ )
1813
+ ]
1814
+ }
1815
+ ) });
2021
1816
  }
2022
1817
  if (status === "error") {
2023
- return /* @__PURE__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-center gap-2", children: [
2024
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-black dark:text-white", children: errorTitle }),
2025
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: [
2026
- error || "The verification link is invalid or has expired.",
2027
- " Please try again or contact support if the problem persists. You can close this page and return to your app."
2028
- ] })
2029
- ] }) }) });
1818
+ return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
1819
+ "div",
1820
+ {
1821
+ style: {
1822
+ width: "100%",
1823
+ display: "flex",
1824
+ flexDirection: "column",
1825
+ alignItems: "stretch",
1826
+ justifyContent: "center",
1827
+ gap: "1.5rem"
1828
+ },
1829
+ children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
1830
+ /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
1831
+ /* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", style: { lineHeight: "1.5" }, children: [
1832
+ error || "The verification link is invalid or has expired.",
1833
+ " Please try again or contact support if the problem persists. You can close this page and return to your app."
1834
+ ] })
1835
+ ] })
1836
+ }
1837
+ ) });
2030
1838
  }
2031
- return /* @__PURE__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
2032
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
2033
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
2034
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage })
2035
- ] }) }) });
1839
+ return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
1840
+ "div",
1841
+ {
1842
+ style: {
1843
+ width: "100%",
1844
+ display: "flex",
1845
+ flexDirection: "column",
1846
+ alignItems: "stretch",
1847
+ justifyContent: "center",
1848
+ gap: "1.5rem"
1849
+ },
1850
+ children: /* @__PURE__ */ jsxs(
1851
+ "div",
1852
+ {
1853
+ style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
1854
+ children: [
1855
+ /* @__PURE__ */ jsx(
1856
+ "div",
1857
+ {
1858
+ style: {
1859
+ width: "4rem",
1860
+ height: "4rem",
1861
+ borderRadius: "50%",
1862
+ backgroundColor: "#D1FAE5",
1863
+ display: "flex",
1864
+ alignItems: "center",
1865
+ justifyContent: "center"
1866
+ },
1867
+ children: /* @__PURE__ */ jsx(
1868
+ "svg",
1869
+ {
1870
+ style: { width: "2rem", height: "2rem", color: "#059669" },
1871
+ fill: "none",
1872
+ strokeLinecap: "round",
1873
+ strokeLinejoin: "round",
1874
+ strokeWidth: "2",
1875
+ viewBox: "0 0 24 24",
1876
+ stroke: "currentColor",
1877
+ children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
1878
+ }
1879
+ )
1880
+ }
1881
+ ),
1882
+ /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
1883
+ /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
1884
+ ]
1885
+ }
1886
+ )
1887
+ }
1888
+ ) });
2036
1889
  }
2037
- function VerifyEmail({
2038
- token,
2039
- onSuccess,
2040
- onError,
2041
- ...uiProps
2042
- }) {
1890
+ function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
2043
1891
  const { verifyEmail } = useInsforge();
2044
- const [status, setStatus] = react.useState("verifying");
2045
- const [error, setError] = react.useState("");
2046
- react.useEffect(() => {
1892
+ const [status, setStatus] = useState("verifying");
1893
+ const [error, setError] = useState("");
1894
+ useEffect(() => {
2047
1895
  const verifyEmailFn = async () => {
2048
1896
  if (!token) {
2049
1897
  const errorMessage = "Invalid verification link. Missing required token.";
@@ -2074,7 +1922,7 @@ function VerifyEmail({
2074
1922
  });
2075
1923
  }
2076
1924
  } catch (err) {
2077
- const errorMessage = err.message || "Email verification failed";
1925
+ const errorMessage = err instanceof Error ? err.message : "Email verification failed";
2078
1926
  setError(errorMessage);
2079
1927
  setStatus("error");
2080
1928
  if (onError) {
@@ -2084,21 +1932,19 @@ function VerifyEmail({
2084
1932
  };
2085
1933
  void verifyEmailFn();
2086
1934
  }, [token, verifyEmail, onSuccess, onError]);
2087
- return /* @__PURE__ */ jsxRuntime.jsx(VerifyEmailStatus, { status, error, ...uiProps });
1935
+ return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
2088
1936
  }
2089
- function UserButton({
2090
- afterSignOutUrl = "/",
2091
- mode = "detailed",
2092
- appearance = {}
2093
- }) {
1937
+ function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
2094
1938
  const { user, signOut } = useInsforge();
2095
- const [isOpen, setIsOpen] = react.useState(false);
2096
- const [imageError, setImageError] = react.useState(false);
2097
- const dropdownRef = react.useRef(null);
2098
- react.useEffect(() => {
1939
+ const [isOpen, setIsOpen] = useState(false);
1940
+ const [imageError, setImageError] = useState(false);
1941
+ const dropdownRef = useRef(null);
1942
+ useEffect(() => {
2099
1943
  setImageError(false);
2100
1944
  const avatarUrl = user?.avatarUrl;
2101
- if (!avatarUrl) return;
1945
+ if (!avatarUrl) {
1946
+ return;
1947
+ }
2102
1948
  const checkImageUrl = async () => {
2103
1949
  try {
2104
1950
  const response = await fetch(avatarUrl, {
@@ -2109,12 +1955,15 @@ function UserButton({
2109
1955
  setImageError(true);
2110
1956
  }
2111
1957
  } catch (error) {
1958
+ if (error instanceof Error) {
1959
+ console.error("Error checking image URL:", error.message);
1960
+ }
2112
1961
  setImageError(true);
2113
1962
  }
2114
1963
  };
2115
1964
  checkImageUrl();
2116
1965
  }, [user?.avatarUrl]);
2117
- react.useEffect(() => {
1966
+ useEffect(() => {
2118
1967
  function handleClickOutside(event) {
2119
1968
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
2120
1969
  setIsOpen(false);
@@ -2132,84 +1981,95 @@ function UserButton({
2132
1981
  setIsOpen(false);
2133
1982
  window.location.href = afterSignOutUrl;
2134
1983
  }
2135
- if (!user) return null;
1984
+ if (!user) {
1985
+ return null;
1986
+ }
2136
1987
  const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
2137
- return /* @__PURE__ */ jsxRuntime.jsxs(
1988
+ const buttonClassName = mode === "detailed" ? "if-userButton if-userButton-detailed" : "if-userButton";
1989
+ return /* @__PURE__ */ jsxs(
2138
1990
  "div",
2139
1991
  {
2140
- className: cn("relative inline-block", appearance.containerClassName),
1992
+ className: "if-userButton if-internal-ub3k8p",
1993
+ style: { position: "relative", display: "inline-block" },
2141
1994
  ref: dropdownRef,
2142
1995
  children: [
2143
- /* @__PURE__ */ jsxRuntime.jsxs(
1996
+ /* @__PURE__ */ jsxs(
2144
1997
  "button",
2145
1998
  {
2146
- className: cn(
2147
- "p-1 bg-transparent border-0 rounded-full cursor-pointer transition-all duration-200",
2148
- "flex items-center justify-center gap-2",
2149
- "hover:bg-black/5",
2150
- mode === "detailed" && "rounded-lg p-2",
2151
- appearance.buttonClassName
2152
- ),
1999
+ className: buttonClassName,
2000
+ style: {
2001
+ display: "flex",
2002
+ alignItems: "center",
2003
+ justifyContent: "center",
2004
+ gap: "0.5rem",
2005
+ ...mode === "detailed" ? { borderRadius: "0.5rem", padding: "0.5rem" } : {}
2006
+ },
2153
2007
  onClick: () => setIsOpen(!isOpen),
2154
2008
  "aria-expanded": isOpen,
2155
2009
  "aria-haspopup": "true",
2156
2010
  children: [
2157
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
2011
+ /* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
2158
2012
  "img",
2159
2013
  {
2160
2014
  src: user.avatarUrl,
2161
2015
  alt: user.email,
2162
2016
  onError: () => setImageError(true),
2163
- className: "rounded-full object-cover w-full h-full"
2017
+ style: { borderRadius: "50%", objectFit: "cover", width: "100%", height: "100%" }
2164
2018
  }
2165
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-semibold text-sm", children: initials }) }),
2166
- mode === "detailed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
2167
- user.name && /* @__PURE__ */ jsxRuntime.jsx(
2168
- "div",
2169
- {
2170
- className: cn(
2171
- "text-sm font-semibold text-gray-900 leading-5 text-left",
2172
- appearance.nameClassName
2173
- ),
2174
- children: user.name
2175
- }
2176
- ),
2177
- /* @__PURE__ */ jsxRuntime.jsx(
2178
- "div",
2179
- {
2180
- className: cn(
2181
- "text-xs text-gray-500 leading-4 text-left",
2182
- appearance.emailClassName
2019
+ ) : /* @__PURE__ */ jsx("span", { style: { color: "white", fontWeight: 600, fontSize: "0.875rem" }, children: initials }) }),
2020
+ mode === "detailed" && /* @__PURE__ */ jsxs(
2021
+ "div",
2022
+ {
2023
+ style: {
2024
+ display: "flex",
2025
+ flexDirection: "column",
2026
+ alignItems: "flex-start",
2027
+ gap: "0.125rem"
2028
+ },
2029
+ children: [
2030
+ user.name && /* @__PURE__ */ jsx(
2031
+ "div",
2032
+ {
2033
+ style: {
2034
+ fontSize: "0.875rem",
2035
+ fontWeight: 600,
2036
+ color: "#1f1f1f",
2037
+ lineHeight: "1.25rem",
2038
+ textAlign: "left"
2039
+ },
2040
+ children: user.name
2041
+ }
2183
2042
  ),
2184
- children: user.email
2185
- }
2186
- )
2187
- ] })
2043
+ /* @__PURE__ */ jsx(
2044
+ "div",
2045
+ {
2046
+ style: {
2047
+ fontSize: "0.75rem",
2048
+ color: "#828282",
2049
+ lineHeight: "1rem",
2050
+ textAlign: "left"
2051
+ },
2052
+ children: user.email
2053
+ }
2054
+ )
2055
+ ]
2056
+ }
2057
+ )
2188
2058
  ]
2189
2059
  }
2190
2060
  ),
2191
- isOpen && /* @__PURE__ */ jsxRuntime.jsx(
2192
- "div",
2061
+ isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
2062
+ "button",
2193
2063
  {
2194
- className: cn(
2195
- "absolute top-full right-0 mt-2 min-w-40",
2196
- "bg-white border border-gray-200 rounded-lg",
2197
- "shadow-lg z-50 overflow-hidden p-1",
2198
- appearance.dropdownClassName
2199
- ),
2200
- children: /* @__PURE__ */ jsxRuntime.jsxs(
2201
- "button",
2202
- {
2203
- onClick: handleSignOut,
2204
- className: "flex items-center justify-start gap-2 w-full px-3 py-2 text-sm font-normal text-red-600 bg-transparent border-0 rounded-md cursor-pointer transition-colors hover:bg-red-50 text-left",
2205
- children: [
2206
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" }),
2207
- "Sign out"
2208
- ]
2209
- }
2210
- )
2064
+ onClick: handleSignOut,
2065
+ className: "if-userButton-menuItem",
2066
+ style: { color: "#DC2626" },
2067
+ children: [
2068
+ /* @__PURE__ */ jsx(LogOut, { style: { width: "1.25rem", height: "1.25rem" } }),
2069
+ "Sign out"
2070
+ ]
2211
2071
  }
2212
- )
2072
+ ) })
2213
2073
  ]
2214
2074
  }
2215
2075
  );
@@ -2222,7 +2082,7 @@ function Protect({
2222
2082
  onRedirect
2223
2083
  }) {
2224
2084
  const { isSignedIn, isLoaded, user } = useInsforge();
2225
- react.useEffect(() => {
2085
+ useEffect(() => {
2226
2086
  if (isLoaded && !isSignedIn) {
2227
2087
  if (onRedirect) {
2228
2088
  onRedirect(redirectTo);
@@ -2240,7 +2100,7 @@ function Protect({
2240
2100
  }
2241
2101
  }, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
2242
2102
  if (!isLoaded) {
2243
- return fallback || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "insforge-loading", children: "Loading..." });
2103
+ return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
2244
2104
  }
2245
2105
  if (!isSignedIn) {
2246
2106
  return fallback || null;
@@ -2248,19 +2108,27 @@ function Protect({
2248
2108
  if (condition && user && !condition(user)) {
2249
2109
  return fallback || null;
2250
2110
  }
2251
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
2111
+ return /* @__PURE__ */ jsx(Fragment, { children });
2252
2112
  }
2253
2113
  function SignedIn({ children }) {
2254
2114
  const { isSignedIn, isLoaded } = useInsforge();
2255
- if (!isLoaded) return null;
2256
- if (!isSignedIn) return null;
2257
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
2115
+ if (!isLoaded) {
2116
+ return null;
2117
+ }
2118
+ if (!isSignedIn) {
2119
+ return null;
2120
+ }
2121
+ return /* @__PURE__ */ jsx(Fragment, { children });
2258
2122
  }
2259
2123
  function SignedOut({ children }) {
2260
2124
  const { isSignedIn, isLoaded } = useInsforge();
2261
- if (!isLoaded) return null;
2262
- if (isSignedIn) return null;
2263
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
2125
+ if (!isLoaded) {
2126
+ return null;
2127
+ }
2128
+ if (isSignedIn) {
2129
+ return null;
2130
+ }
2131
+ return /* @__PURE__ */ jsx(Fragment, { children });
2264
2132
  }
2265
2133
  function InsforgeCallback({
2266
2134
  redirectTo = "/",
@@ -2269,13 +2137,17 @@ function InsforgeCallback({
2269
2137
  loadingComponent,
2270
2138
  onRedirect
2271
2139
  }) {
2272
- const isProcessingRef = react.useRef(false);
2140
+ const isProcessingRef = useRef(false);
2273
2141
  const { isLoaded, isSignedIn } = useInsforge();
2274
- react.useEffect(() => {
2275
- if (!isLoaded) return;
2276
- if (isProcessingRef.current) return;
2142
+ useEffect(() => {
2143
+ if (!isLoaded) {
2144
+ return;
2145
+ }
2146
+ if (isProcessingRef.current) {
2147
+ return;
2148
+ }
2277
2149
  isProcessingRef.current = true;
2278
- const processCallback = async () => {
2150
+ const processCallback = () => {
2279
2151
  const searchParams = new URLSearchParams(window.location.search);
2280
2152
  const error = searchParams.get("error");
2281
2153
  if (error) {
@@ -2317,42 +2189,36 @@ function InsforgeCallback({
2317
2189
  };
2318
2190
  processCallback();
2319
2191
  }, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
2320
- const defaultLoading = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
2321
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
2322
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })
2323
- ] }) });
2192
+ const defaultLoading = /* @__PURE__ */ jsx(
2193
+ "div",
2194
+ {
2195
+ style: {
2196
+ display: "flex",
2197
+ alignItems: "center",
2198
+ justifyContent: "center",
2199
+ minHeight: "100vh"
2200
+ },
2201
+ children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
2202
+ /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { marginBottom: "1rem" }, children: "Completing authentication..." }),
2203
+ /* @__PURE__ */ jsx(
2204
+ "div",
2205
+ {
2206
+ className: "if-submitButton-spinner",
2207
+ style: {
2208
+ borderRadius: "50%",
2209
+ height: "3rem",
2210
+ width: "3rem",
2211
+ borderBottom: "2px solid #2563EB",
2212
+ margin: "0 auto"
2213
+ }
2214
+ }
2215
+ )
2216
+ ] })
2217
+ }
2218
+ );
2324
2219
  return loadingComponent || defaultLoading;
2325
2220
  }
2326
2221
 
2327
- exports.AuthBranding = AuthBranding;
2328
- exports.AuthContainer = AuthContainer;
2329
- exports.AuthDivider = AuthDivider;
2330
- exports.AuthEmailVerificationStep = AuthEmailVerificationStep;
2331
- exports.AuthErrorBanner = AuthErrorBanner;
2332
- exports.AuthFormField = AuthFormField;
2333
- exports.AuthHeader = AuthHeader;
2334
- exports.AuthLink = AuthLink;
2335
- exports.AuthOAuthButton = AuthOAuthButton;
2336
- exports.AuthOAuthProviders = AuthOAuthProviders;
2337
- exports.AuthPasswordField = AuthPasswordField;
2338
- exports.AuthPasswordStrengthIndicator = AuthPasswordStrengthIndicator;
2339
- exports.AuthSubmitButton = AuthSubmitButton;
2340
- exports.AuthVerificationCodeInput = AuthVerificationCodeInput;
2341
- exports.ForgotPassword = ForgotPassword;
2342
- exports.ForgotPasswordForm = ForgotPasswordForm;
2343
- exports.InsforgeCallback = InsforgeCallback;
2344
- exports.Protect = Protect;
2345
- exports.ResetPassword = ResetPassword;
2346
- exports.ResetPasswordForm = ResetPasswordForm;
2347
- exports.SignIn = SignIn;
2348
- exports.SignInForm = SignInForm;
2349
- exports.SignUp = SignUp;
2350
- exports.SignUpForm = SignUpForm;
2351
- exports.SignedIn = SignedIn;
2352
- exports.SignedOut = SignedOut;
2353
- exports.UserButton = UserButton;
2354
- exports.VerifyEmail = VerifyEmail;
2355
- exports.VerifyEmailStatus = VerifyEmailStatus;
2356
- exports.validatePasswordStrength = validatePasswordStrength;
2222
+ export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, InsforgeCallback, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus };
2357
2223
  //# sourceMappingURL=components.js.map
2358
2224
  //# sourceMappingURL=components.js.map