@insforge/react 0.3.5 → 0.4.5

package/dist/index.js

@@ -5,38 +5,33 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
   if (!document.getElementById(styleId)) {
     const style = document.createElement('style');
     style.id = styleId;
-    style.textContent = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n@import \"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-content:\"\"}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-600:oklch(62.7% .194 149.214);--color-green-900:oklch(39.3% .095 152.535);--color-blue-50:oklch(97% .014 254.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-900:oklch(38.1% .176 304.987);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-neutral-100:oklch(97% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-manrope:\"Manrope\",sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1\\/2{top:50%}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-\\[18px\\]{height:18px}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-\\[18px\\]{width:18px}.w-full{width:100%}.max-w-\\[400px\\]{max-width:400px}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.min-w-40{min-width:calc(var(--spacing)*40)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-0{gap:calc(var(--spacing)*0)}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-none{--tw-border-style:none;border-style:none}.border-\\[\\#D4D4D4\\]{border-color:#d4d4d4}.border-\\[\\#E0E0E0\\]{border-color:#e0e0e0}.border-\\[\\#E4E4E7\\]{border-color:#e4e4e7}.border-black{border-color:var(--color-black)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-gray-200{border-color:var(--color-gray-200)}.border-neutral-400{border-color:var(--color-neutral-400)}.border-purple-300{border-color:var(--color-purple-300)}.border-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.bg-\\[\\#059669\\]{background-color:#059669}.bg-\\[\\#FAFAFA\\]{background-color:#fafafa}.bg-black{background-color:var(--color-black)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-neutral-100{background-color:var(--color-neutral-100)}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-50{background-color:var(--color-red-50)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from:var(--color-blue-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-indigo-50{--tw-gradient-from:var(--color-indigo-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-white{--tw-gradient-to:var(--color-white);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pl-3{padding-left:calc(var(--spacing)*3)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-manrope{font-family:var(--font-manrope)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-4{--tw-leading:calc(var(--spacing)*4);line-height:calc(var(--spacing)*4)}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-8{--tw-leading:calc(var(--spacing)*8);line-height:calc(var(--spacing)*8)}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-\\[\\#09090B\\]{color:#09090b}.text-\\[\\#525252\\]{color:#525252}.text-\\[\\#737373\\]{color:#737373}.text-\\[\\#828282\\]{color:#828282}.text-\\[\\#A3A3A3\\]{color:#a3a3a3}.text-\\[\\#A6A6A6\\]{color:#a6a6a6}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-neutral-600{color:var(--color-neutral-600)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-purple-900{color:var(--color-purple-900)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_1px_2px_0_rgba\\(0\\,0\\,0\\,0\\.10\\)\\]{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.placeholder\\:font-normal::placeholder{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.placeholder\\:text-\\[\\#A3A3A3\\]::placeholder{color:#a3a3a3}.before\\:h-px:before{content:var(--tw-content);height:1px}.before\\:flex-1:before{content:var(--tw-content);flex:1}.before\\:bg-\\[\\#E5E5E5\\]:before{content:var(--tw-content);background-color:#e5e5e5}.before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}.after\\:h-px:after{content:var(--tw-content);height:1px}.after\\:flex-1:after{content:var(--tw-content);flex:1}.after\\:bg-\\[\\#E5E5E5\\]:after{content:var(--tw-content);background-color:#e5e5e5}.after\\:content-\\[\\'\\'\\]:after{--tw-content:\"\";content:var(--tw-content)}@media (hover:hover){.hover\\:border-\\[\\#9ca3af\\]:hover{border-color:#9ca3af}.hover\\:bg-\\[\\#f9fafb\\]:hover{background-color:#f9fafb}.hover\\:bg-black\\/5:hover{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-black\\/5:hover{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.hover\\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\\:bg-purple-700:hover{background-color:var(--color-purple-700)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-white\\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-purple-800:hover{color:var(--color-purple-800)}.hover\\:underline:hover{text-decoration-line:underline}}.focus\\:border-black:focus{border-color:var(--color-black)}.focus\\:border-purple-500:focus{border-color:var(--color-purple-500)}.focus\\:shadow-\\[0_0_0_2px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]:focus{--tw-shadow:0 0 0 2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:bg-\\[\\#F5F5F5\\]:disabled{background-color:#f5f5f5}.disabled\\:no-underline:disabled{text-decoration-line:none}.disabled\\:opacity-50:disabled{opacity:.5}.disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-color-scheme:dark){.dark\\:border-white{border-color:var(--color-white)}.dark\\:bg-green-900{background-color:var(--color-green-900)}.dark\\:bg-neutral-800{background-color:var(--color-neutral-800)}.dark\\:text-gray-400{color:var(--color-gray-400)}.dark\\:text-green-400{color:var(--color-green-400)}.dark\\:text-neutral-400{color:var(--color-neutral-400)}.dark\\:text-white{color:var(--color-white)}}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:\"*\";inherits:false}@property --tw-gradient-from{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:\"*\";inherits:false}@property --tw-gradient-via-stops{syntax:\"*\";inherits:false}@property --tw-gradient-from-position{syntax:\"<length-percentage>\";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:\"<length-percentage>\";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:\"<length-percentage>\";inherits:false;initial-value:100%}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@keyframes spin{to{transform:rotate(360deg)}}";
+    style.textContent = "/**\n * InsForge React Component Library Styles\n * Traditional CSS with scoped class names (no Tailwind)\n */\n\n/* ============================================\n   FONTS\n   ============================================ */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');\n\n/* ============================================\n   CSS VARIABLES\n   ============================================ */\n:root {\n  /* Colors */\n  --if-color-primary: #000000;\n  --if-color-primary-hover: #1f1f1f;\n  --if-color-text: #000000;\n  --if-color-text-secondary: #828282;\n  --if-color-text-muted: #a3a3a3;\n  --if-color-border: #d4d4d4;\n  --if-color-border-focus: #000000;\n  --if-color-bg-white: #ffffff;\n  --if-color-bg-light: #fafafa;\n  --if-color-bg-hover: #f9fafb;\n  --if-color-error: #dc2626;\n  --if-color-error-bg: #fee2e2;\n  --if-color-success: #16a34a;\n\n  /* Spacing */\n  --if-space-1: 0.25rem; /* 4px */\n  --if-space-2: 0.5rem; /* 8px */\n  --if-space-3: 0.75rem; /* 12px */\n  --if-space-4: 1rem; /* 16px */\n  --if-space-6: 1.5rem; /* 24px */\n  --if-space-8: 2rem; /* 32px */\n\n  /* Border Radius */\n  --if-radius-xs: 0.125rem; /* 2px */\n  --if-radius-sm: 0.25rem; /* 4px */\n  --if-radius-md: 0.375rem; /* 6px */\n  --if-radius-lg: 0.5rem; /* 8px */\n  --if-radius-xl: 0.75rem; /* 12px */\n\n  /* Typography */\n  --if-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  --if-font-family-manrope:\n    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  --if-font-size-xs: 0.75rem; /* 12px */\n  --if-font-size-sm: 0.875rem; /* 14px */\n  --if-font-size-base: 1rem; /* 16px */\n  --if-font-size-lg: 1.125rem; /* 18px */\n  --if-font-size-xl: 1.25rem; /* 20px */\n  --if-font-size-2xl: 1.5rem; /* 24px */\n\n  /* Shadows */\n  --if-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --if-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n  --if-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n\n  /* Transitions */\n  --if-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  --if-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ============================================\n   AUTH CONTAINER\n   ============================================ */\n.if-authContainer {\n  width: 100%;\n  max-width: 400px;\n  border-radius: var(--if-radius-xl);\n  overflow: hidden;\n  box-shadow: var(--if-shadow-lg);\n}\n\n.if-authCard {\n  background-color: var(--if-color-bg-white);\n  padding: var(--if-space-6);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: var(--if-space-6);\n}\n\n/* ============================================\n   AUTH HEADER\n   ============================================ */\n.if-authHeader {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: var(--if-space-2);\n}\n\n.if-authHeader-title {\n  font-size: var(--if-font-size-2xl);\n  font-weight: 600;\n  color: var(--if-color-text);\n  line-height: 2rem;\n  margin: 0;\n  font-family: var(--if-font-family);\n}\n\n.if-authHeader-subtitle {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text-secondary);\n  line-height: 1.5rem;\n  margin: 0;\n  font-family: var(--if-font-family);\n}\n\n/* ============================================\n   FORM FIELD\n   ============================================ */\n.if-formField {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: var(--if-space-1);\n}\n\n.if-formField-label {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text);\n  line-height: 1.5rem;\n  font-family: var(--if-font-family);\n}\n\n.if-formField-input {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n  align-self: stretch;\n  padding: var(--if-space-2) var(--if-space-3);\n  border-radius: var(--if-radius-sm);\n  border: 1px solid var(--if-color-border);\n  background-color: var(--if-color-bg-white);\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  line-height: 1.25rem;\n  color: var(--if-color-text);\n  font-family: var(--if-font-family);\n  transition: border-color var(--if-transition-base);\n}\n\n.if-formField-input::placeholder {\n  color: var(--if-color-text-muted);\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n}\n\n.if-formField-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n   PASSWORD FIELD\n   ============================================ */\n.if-passwordField {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: var(--if-space-1);\n}\n\n.if-passwordField-labelRow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.if-passwordField-label {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text);\n  line-height: 1.5rem;\n  font-family: var(--if-font-family);\n}\n\n.if-passwordField-forgotLink {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text-secondary);\n  text-decoration: none;\n  transition: color var(--if-transition-fast);\n  font-family: var(--if-font-family);\n}\n\n.if-passwordField-inputWrapper {\n  position: relative;\n  width: 100%;\n}\n\n.if-passwordField-input {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  padding: var(--if-space-2) var(--if-space-3);\n  padding-right: 2.5rem; /* Space for toggle button */\n  border-radius: var(--if-radius-sm);\n  border: 1px solid var(--if-color-border);\n  background-color: var(--if-color-bg-white);\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  line-height: 1.25rem;\n  color: var(--if-color-text);\n  font-family: var(--if-font-family);\n  transition: border-color var(--if-transition-base);\n}\n\n.if-passwordField-input::placeholder {\n  color: var(--if-color-text-muted);\n}\n\n.if-passwordField-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n.if-passwordField-toggleButton {\n  position: absolute;\n  right: var(--if-space-1);\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: var(--if-space-1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--if-color-text-secondary);\n  transition: color var(--if-transition-fast);\n}\n\n/* ============================================\n   SUBMIT BUTTON\n   ============================================ */\n.if-submitButton {\n  border-radius: var(--if-radius-sm);\n  background-color: var(--if-color-primary);\n  height: 2.5rem;\n  width: 100%;\n  display: flex;\n  margin-top: var(--if-space-4);\n  padding: var(--if-space-2) var(--if-space-4);\n  justify-content: center;\n  align-items: center;\n  gap: 0.625rem;\n  align-self: stretch;\n  color: var(--if-color-bg-white);\n  font-weight: 600;\n  font-family: var(--if-font-family-manrope);\n  font-size: var(--if-font-size-base);\n  line-height: normal;\n  border: none;\n  cursor: pointer;\n  transition: background-color var(--if-transition-base);\n}\n\n.if-submitButton:hover:not(:disabled) {\n  background-color: var(--if-color-primary-hover);\n}\n\n.if-submitButton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.if-submitButton-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* Spinner animation */\n@keyframes if-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.if-submitButton-spinner {\n  animation: if-spin 1s linear infinite;\n}\n\n/* ============================================\n   OAUTH BUTTON\n   ============================================ */\n.if-oauthButton {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: var(--if-space-2) var(--if-space-3);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--if-space-3);\n  border-radius: var(--if-radius-md);\n  border: 1px solid #e4e4e7;\n  background-color: var(--if-color-bg-white);\n  box-shadow: var(--if-shadow-md);\n  color: #09090b;\n  text-align: center;\n  font-size: var(--if-font-size-sm);\n  font-weight: 500;\n  line-height: 1.25rem;\n  cursor: pointer;\n  transition: all var(--if-transition-base);\n  font-family: var(--if-font-family);\n}\n\n.if-oauthButton:hover:not(:disabled) {\n  background-color: var(--if-color-bg-hover);\n  border-color: #9ca3af;\n}\n\n.if-oauthButton:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.if-oauthButton-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.125rem;\n  height: 1.125rem;\n}\n\n.if-oauthButton-full {\n  justify-content: center;\n}\n\n.if-oauthButton-short {\n  justify-content: center;\n  padding: var(--if-space-2);\n  gap: var(--if-space-2);\n}\n\n.if-oauthButton-icon-only {\n  justify-content: center;\n  gap: 0;\n}\n\n/* ============================================\n   OAUTH PROVIDERS CONTAINER\n   ============================================ */\n.if-oauthProviders {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-3);\n  width: 100%;\n}\n\n/* ============================================\n   AUTH LINK\n   ============================================ */\n.if-authLink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--if-space-1);\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-authLink-text {\n  font-weight: 400;\n}\n\n.if-authLink-link {\n  font-weight: 600;\n  color: var(--if-color-text);\n  text-decoration: none;\n  transition: opacity var(--if-transition-fast);\n}\n\n/* ============================================\n   AUTH DIVIDER\n   ============================================ */\n.if-authDivider {\n  display: flex;\n  align-items: center;\n  text-align: center;\n  width: 100%;\n  gap: var(--if-space-3);\n}\n\n.if-authDivider-line {\n  flex: 1;\n  border-top: 1px solid var(--if-color-border);\n}\n\n.if-authDivider-text {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  font-weight: 400;\n  font-family: var(--if-font-family-manrope);\n}\n\n/* ============================================\n   ERROR BANNER\n   ============================================ */\n.if-errorBanner {\n  padding: var(--if-space-3);\n  background-color: var(--if-color-error-bg);\n  border-radius: var(--if-radius-md);\n  border: 1px solid var(--if-color-error);\n}\n\n.if-errorBanner-content {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n}\n\n.if-errorBanner-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  color: var(--if-color-error);\n}\n\n.if-errorBanner-text {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-error);\n  font-weight: 400;\n  font-family: var(--if-font-family);\n  margin: 0;\n}\n\n/* ============================================\n   AUTH BRANDING\n   ============================================ */\n.if-authBranding {\n  background-color: var(--if-color-bg-light);\n  padding: var(--if-space-4) var(--if-space-2);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--if-space-1);\n}\n\n.if-authBranding-text {\n  font-size: var(--if-font-size-xs);\n  font-weight: 500;\n  color: var(--if-color-text);\n  font-family: var(--if-font-family-manrope);\n  margin: 0;\n}\n\n/* ============================================\n   VERIFICATION CODE INPUT\n   ============================================ */\n.if-verificationCode {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-4);\n}\n\n.if-verificationCode-description {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  text-align: center;\n  font-family: var(--if-font-family);\n}\n\n.if-verificationCode-email {\n  font-weight: 600;\n  color: var(--if-color-text);\n}\n\n.if-verificationCode-inputContainer {\n  display: flex;\n  gap: var(--if-space-2);\n  justify-content: center;\n}\n\n.if-verificationCode-input {\n  width: 3rem;\n  height: 3rem;\n  text-align: center;\n  font-size: var(--if-font-size-xl);\n  font-weight: 600;\n  border: 2px solid var(--if-color-border);\n  border-radius: var(--if-radius-md);\n  transition: border-color var(--if-transition-base);\n  font-family: var(--if-font-family);\n}\n\n.if-verificationCode-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n   VERIFICATION STEP\n   ============================================ */\n.if-verificationStep {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-6);\n  align-items: stretch;\n}\n\n.if-verificationStep-description {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  text-align: center;\n  margin: 0;\n  font-family: var(--if-font-family);\n}\n\n.if-verificationStep-codeContainer {\n  width: 100%;\n  background-color: #f5f5f5;\n  border-radius: var(--if-radius-lg);\n  padding: var(--if-space-4) var(--if-space-4) var(--if-space-6);\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-4);\n}\n\n.if-verificationStep-codeInputWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-3);\n  margin-top: var(--if-space-2);\n}\n\n.if-verificationStep-verifyingText {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  text-align: center;\n  font-family: var(--if-font-family);\n}\n\n.if-verificationStep-resendContainer {\n  width: 100%;\n  font-size: var(--if-font-size-sm);\n  text-align: center;\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-verificationStep-resendButton {\n  color: var(--if-color-text);\n  font-weight: 500;\n  transition: all var(--if-transition-base);\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--if-font-family);\n  font-size: var(--if-font-size-sm);\n}\n\n.if-verificationStep-resendButton:not(:disabled) {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n.if-verificationStep-resendButton:disabled {\n  cursor: not-allowed;\n  text-decoration: none;\n  opacity: 0.5;\n}\n\n/* ============================================\n   PASSWORD STRENGTH INDICATOR\n   ============================================ */\n.if-passwordStrength {\n  margin-top: var(--if-space-2);\n}\n\n.if-passwordStrength-bar {\n  height: 4px;\n  background-color: #e5e7eb;\n  border-radius: 2px;\n  overflow: hidden;\n  margin-bottom: var(--if-space-2);\n}\n\n.if-passwordStrength-fill {\n  height: 100%;\n  transition:\n    width var(--if-transition-base),\n    background-color var(--if-transition-base);\n}\n\n.if-passwordStrength-fill.weak {\n  background-color: #ef4444;\n  width: 33%;\n}\n\n.if-passwordStrength-fill.medium {\n  background-color: #f59e0b;\n  width: 66%;\n}\n\n.if-passwordStrength-fill.strong {\n  background-color: var(--if-color-success);\n  width: 100%;\n}\n\n.if-passwordStrength-text {\n  font-size: var(--if-font-size-xs);\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-passwordStrength-requirements {\n  margin-top: var(--if-space-2);\n  font-size: var(--if-font-size-xs);\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-passwordStrength-requirement {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-1);\n  margin-bottom: var(--if-space-1);\n}\n\n.if-passwordStrength-requirement.met {\n  color: var(--if-color-success);\n}\n\n.if-passwordStrength-requirement.unmet {\n  color: var(--if-color-text-muted);\n}\n\n/* ============================================\n   FORM CONTAINER\n   ============================================ */\n.if-form {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  gap: var(--if-space-6);\n}\n\n/* ============================================\n   USER BUTTON\n   ============================================ */\n.if-userButton-container {\n  position: relative;\n  display: inline-block;\n}\n\n.if-userButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--if-space-2);\n  padding: var(--if-space-2);\n  border-radius: 9999px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: all var(--if-transition-base);\n}\n\n.if-userButton:hover {\n  opacity: 0.8;\n}\n\n.if-userButton-detailed {\n  background-color: var(--if-color-bg-white);\n  border: 1px solid var(--if-color-border);\n  border-radius: var(--if-radius-sm);\n  padding: var(--if-space-2);\n}\n\n.if-userButton-detailed:hover {\n  background-color: var(--if-color-bg-light);\n  opacity: 1;\n}\n\n.if-userButton-avatar {\n  width: 2rem;\n  height: 2rem;\n  border-radius: 9999px;\n  background-color: var(--if-color-primary);\n  color: var(--if-color-bg-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: var(--if-font-size-sm);\n  font-family: var(--if-font-family);\n  overflow: hidden;\n}\n\n.if-userButton-avatarImage {\n  border-radius: 9999px;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.if-userButton-avatarInitials {\n  color: var(--if-color-bg-white);\n  font-weight: 600;\n  font-size: var(--if-font-size-sm);\n}\n\n.if-userButton-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n.if-userButton-name {\n  font-size: var(--if-font-size-sm);\n  font-weight: 600;\n  color: var(--if-color-text);\n  line-height: 1.25rem;\n  text-align: left;\n  font-family: var(--if-font-family);\n}\n\n.if-userButton-email {\n  font-size: var(--if-font-size-xs);\n  color: var(--if-color-text-secondary);\n  line-height: 1rem;\n  text-align: left;\n  font-family: var(--if-font-family);\n}\n\n.if-userButton-menu {\n  position: absolute;\n  margin-top: var(--if-space-2);\n  background-color: var(--if-color-bg-white);\n  border: 1px solid var(--if-color-border);\n  border-radius: var(--if-radius-md);\n  box-shadow: var(--if-shadow-lg);\n  padding: var(--if-space-2);\n  min-width: 200px;\n  z-index: 50;\n}\n\n.if-userButton-menuItem {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n  padding: var(--if-space-2);\n  border-radius: var(--if-radius-sm);\n  cursor: pointer;\n  transition: background-color var(--if-transition-fast);\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text);\n  font-family: var(--if-font-family);\n  background: none;\n  border: none;\n  width: 100%;\n  text-align: left;\n}\n\n.if-userButton-menuItem:hover {\n  background-color: var(--if-color-bg-light);\n}\n\n.if-userButton-menuItem-signout {\n  color: var(--if-color-error);\n}\n\n.if-userButton-menuItem-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* ============================================\n   EMAIL VERIFICATION STATUS\n   ============================================ */\n.if-verifyStatus-container {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--if-space-6);\n}\n\n.if-verifyStatus-container-stretch {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  gap: var(--if-space-6);\n}\n\n.if-verifyStatus-spinner {\n  border-radius: 9999px;\n  height: 3rem;\n  width: 3rem;\n  border-bottom: 2px solid var(--if-color-primary);\n}\n\n.if-verifyStatus-successContent {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--if-space-4);\n}\n\n.if-verifyStatus-successIcon {\n  width: 4rem;\n  height: 4rem;\n  border-radius: 9999px;\n  background-color: #d1fae5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.if-verifyStatus-successIconSvg {\n  width: 2rem;\n  height: 2rem;\n  color: #059669;\n}\n\n.if-verifyStatus-textCenter {\n  text-align: center;\n}\n\n/* ============================================\n   UTILITY CLASSES\n   ============================================ */\n.if-hidden {\n  display: none;\n}\n\n.if-visuallyHidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
     if (document.head) {
       document.head.appendChild(style);
     }
   }
 }
 
-'use strict';
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { createClient } from '@insforge/sdk';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
+import { z } from 'zod';
 
-var react = require('react');
-var sdk = require('@insforge/sdk');
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var lucideReact = require('lucide-react');
-var zod = require('zod');
-
-var InsforgeContext = react.createContext(
-  void 0
-);
+var InsforgeContext = createContext(void 0);
 function InsforgeProvider({
   children,
   baseUrl,
   onAuthChange,
-  syncTokenToCookie,
-  clearCookie
+  onSignIn,
+  onSignOut
 }) {
-  const [user, setUser] = react.useState(null);
-  const [isLoaded, setIsLoaded] = react.useState(false);
-  const refreshIntervalRef = react.useRef(null);
-  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
-  const loadAuthState = react.useCallback(async () => {
+  const [user, setUser] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const refreshIntervalRef = useRef(null);
+  const [insforge] = useState(() => createClient({ baseUrl }));
+  const loadAuthState = useCallback(async () => {
     try {
       const sessionResult = insforge.auth.getCurrentSession();
       const session = sessionResult.data?.session;
@@ -66,10 +61,13 @@ function InsforgeProvider({
         return { success: true };
       } else {
         await insforge.auth.signOut();
-        if (clearCookie) {
+        if (onSignOut) {
           try {
-            await clearCookie();
+            await onSignOut();
           } catch (error) {
+            if (error instanceof Error) {
+              console.error("[InsforgeProvider] Error clearing cookie:", error.message);
+            }
           }
         }
         setUser(null);
@@ -82,10 +80,13 @@ function InsforgeProvider({
     } catch (error) {
       console.error("[InsforgeProvider] Token validation failed:", error);
       await insforge.auth.signOut();
-      if (clearCookie) {
+      if (onSignOut) {
         try {
-          await clearCookie();
+          await onSignOut();
         } catch (error2) {
+          if (error2 instanceof Error) {
+            console.error("[InsforgeProvider] Error clearing cookie:", error2.message);
+          }
         }
       }
       setUser(null);
@@ -95,19 +96,20 @@ function InsforgeProvider({
       setIsLoaded(true);
       return {
         success: false,
-        error: error instanceof Error ? error.message : "authentication_failed"
+        error: error instanceof Error ? error.message : "Authentication failed"
       };
     }
-  }, [insforge, onAuthChange, syncTokenToCookie, clearCookie]);
-  react.useEffect(() => {
+  }, [insforge, onAuthChange, onSignOut]);
+  useEffect(() => {
     loadAuthState();
+    const intervalId = refreshIntervalRef.current;
     return () => {
-      if (refreshIntervalRef.current) {
-        clearInterval(refreshIntervalRef.current);
+      if (intervalId) {
+        clearInterval(intervalId);
       }
     };
-  }, []);
-  const getPublicAuthConfig = react.useCallback(async () => {
+  }, [loadAuthState]);
+  const getPublicAuthConfig = useCallback(async () => {
     try {
       const result = await insforge.auth.getPublicAuthConfig();
       if (result.data) {
@@ -117,14 +119,11 @@ function InsforgeProvider({
         return null;
       }
     } catch (error) {
-      console.error(
-        "[InsforgeProvider] Failed to get public auth config:",
-        error
-      );
+      console.error("[InsforgeProvider] Failed to get public auth config:", error);
       return null;
     }
   }, [insforge]);
-  const handleAuthSuccess = react.useCallback(
+  const handleAuthSuccess = useCallback(
     async (authToken, fallbackUser) => {
       const userResult = await insforge.auth.getCurrentUser();
       if (userResult.data) {
@@ -139,10 +138,13 @@ function InsforgeProvider({
         if (onAuthChange) {
           onAuthChange(userData);
         }
-        if (syncTokenToCookie) {
+        if (onSignIn) {
           try {
-            await syncTokenToCookie(authToken);
+            await onSignIn(authToken);
           } catch (error) {
+            if (error instanceof Error) {
+              console.error("[InsforgeProvider] Error syncing token to cookie:", error.message);
+            }
           }
         }
       } else if (fallbackUser) {
@@ -158,9 +160,9 @@ function InsforgeProvider({
         }
       }
     },
-    [insforge, onAuthChange, syncTokenToCookie]
+    [insforge, onAuthChange, onSignIn]
   );
-  const signIn = react.useCallback(
+  const signIn = useCallback(
     async (email, password) => {
       const sdkResult = await insforge.auth.signInWithPassword({
         email,
@@ -186,7 +188,7 @@ function InsforgeProvider({
     },
     [insforge, handleAuthSuccess]
   );
-  const signUp = react.useCallback(
+  const signUp = useCallback(
     async (email, password) => {
       const sdkResult = await insforge.auth.signUp({ email, password });
       if (sdkResult.data) {
@@ -211,12 +213,15 @@ function InsforgeProvider({
     },
     [insforge, handleAuthSuccess]
   );
-  const signOut = react.useCallback(async () => {
+  const signOut = useCallback(async () => {
     await insforge.auth.signOut();
-    if (clearCookie) {
+    if (onSignOut) {
       try {
-        await clearCookie();
+        await onSignOut();
       } catch (error) {
+        if (error instanceof Error) {
+          console.error("[InsforgeProvider] Error clearing cookie:", error.message);
+        }
       }
     }
     if (refreshIntervalRef.current) {
@@ -226,10 +231,12 @@ function InsforgeProvider({
     if (onAuthChange) {
       onAuthChange(null);
     }
-  }, [insforge, onAuthChange, clearCookie]);
-  const updateUser = react.useCallback(
+  }, [insforge, onAuthChange, onSignOut]);
+  const updateUser = useCallback(
     async (data) => {
-      if (!user) throw new Error("No user signed in");
+      if (!user) {
+        throw new Error("No user signed in");
+      }
       const profileUpdate = {
         nickname: data.name,
         avatarUrl: data.avatarUrl
@@ -254,14 +261,21 @@ function InsforgeProvider({
     },
     [user, onAuthChange, insforge]
   );
-  const sendResetPasswordEmail = react.useCallback(
+  const sendVerificationEmail = useCallback(
+    async (email) => {
+      const sdkResult = await insforge.auth.sendVerificationEmail({ email });
+      return sdkResult.data;
+    },
+    [insforge]
+  );
+  const sendResetPasswordEmail = useCallback(
     async (email) => {
       const sdkResult = await insforge.auth.sendResetPasswordEmail({ email });
       return sdkResult.data;
     },
     [insforge]
   );
-  const resetPassword = react.useCallback(
+  const resetPassword = useCallback(
     async (token, newPassword) => {
       const sdkResult = await insforge.auth.resetPassword({
         newPassword,
@@ -271,14 +285,45 @@ function InsforgeProvider({
     },
     [insforge]
   );
-  const verifyEmail = react.useCallback(
-    async (token) => {
-      const sdkResult = await insforge.auth.verifyEmail({ otp: token });
+  const verifyEmail = useCallback(
+    async (otp, email) => {
+      const sdkResult = await insforge.auth.verifyEmail({ otp, email: email || void 0 });
+      if (sdkResult.data) {
+        return sdkResult.data;
+      } else {
+        return {
+          accessToken: "",
+          error: {
+            message: sdkResult.error?.message || "Email verification failed"
+          }
+        };
+      }
+    },
+    [insforge]
+  );
+  const exchangeResetPasswordToken = useCallback(
+    async (email, code) => {
+      const sdkResult = await insforge.auth.exchangeResetPasswordToken({ email, code });
+      if (sdkResult.data) {
+        return sdkResult.data;
+      } else {
+        return {
+          error: {
+            message: sdkResult.error?.message || "Failed to exchange reset password token"
+          }
+        };
+      }
+    },
+    [insforge]
+  );
+  const loginWithOAuth = useCallback(
+    async (provider, redirectTo) => {
+      const sdkResult = await insforge.auth.signInWithOAuth({ provider, redirectTo });
       return sdkResult.data;
     },
     [insforge]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     InsforgeContext.Provider,
     {
       value: {
@@ -292,17 +337,20 @@ function InsforgeProvider({
         updateUser,
         reloadAuth: loadAuthState,
         baseUrl,
+        sendVerificationEmail,
         sendResetPasswordEmail,
         resetPassword,
         verifyEmail,
-        getPublicAuthConfig
+        exchangeResetPasswordToken,
+        getPublicAuthConfig,
+        loginWithOAuth
       },
       children
     }
   );
 }
 function useInsforge() {
-  const context = react.useContext(InsforgeContext);
+  const context = useContext(InsforgeContext);
   if (!context) {
     throw new Error("useInsforge must be used within InsforgeProvider");
   }
@@ -310,9 +358,9 @@ function useInsforge() {
 }
 function usePublicAuthConfig() {
   const { getPublicAuthConfig } = useInsforge();
-  const [authConfig, setAuthConfig] = react.useState(null);
-  const [isLoaded, setIsLoaded] = react.useState(false);
-  react.useEffect(() => {
+  const [authConfig, setAuthConfig] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  useEffect(() => {
     async function fetchConfig() {
       const result = await getPublicAuthConfig();
       if (result) {
@@ -328,236 +376,170 @@ function usePublicAuthConfig() {
   return { authConfig, isLoaded };
 }
 function AuthBranding() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[#FAFAFA] px-2 py-4 flex flex-row justify-center items-center gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-black font-manrope", children: "Secured by" }),
-    /* @__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: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          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",
-          fill: "url(#paint0_linear_2976_9475)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M12.8858 6.44922L16.6 10.168V18.668L8.64108 10.6992L12.8858 6.44922Z",
-          fill: "url(#paint1_linear_2976_9475)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          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",
-          fill: "black"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "linearGradient",
-          {
-            id: "paint0_linear_2976_9475",
-            x1: "1.85883",
-            y1: "1.92425",
-            x2: "24.3072",
-            y2: "9.64016",
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("stop", {}),
-              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopOpacity: "0.4" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "linearGradient",
-          {
-            id: "paint1_linear_2976_9475",
-            x1: "25.6475",
-            y1: "8.65468",
-            x2: "10.7901",
-            y2: "8.65468",
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("stop", {}),
-              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopOpacity: "0.4" })
-            ]
-          }
-        )
-      ] })
-    ] }) })
+  return /* @__PURE__ */ jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-authBranding-text", children: "Secured by" }),
+    /* @__PURE__ */ jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "83",
+        height: "20",
+        viewBox: "0 0 83 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              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",
+              fill: "url(#paint0_linear_2976_9475)"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12.8858 6.44922L16.6 10.168V18.668L8.64108 10.6992L12.8858 6.44922Z",
+              fill: "url(#paint1_linear_2976_9475)"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              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",
+              fill: "black"
+            }
+          ),
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: "paint0_linear_2976_9475",
+                x1: "1.85883",
+                y1: "1.92425",
+                x2: "24.3072",
+                y2: "9.64016",
+                gradientUnits: "userSpaceOnUse",
+                children: [
+                  /* @__PURE__ */ jsx("stop", {}),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: "paint1_linear_2976_9475",
+                x1: "25.6475",
+                y1: "8.65468",
+                x2: "10.7901",
+                y2: "8.65468",
+                gradientUnits: "userSpaceOnUse",
+                children: [
+                  /* @__PURE__ */ jsx("stop", {}),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
   ] });
 }
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-function AuthContainer({ children, appearance = {} }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "w-full max-w-[400px] rounded-xl overflow-hidden shadow-lg",
-        appearance.containerClassName
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-          "bg-white p-6 flex flex-col justify-center items-stretch gap-6",
-          appearance.cardClassName
-        ), children }),
-        /* @__PURE__ */ jsxRuntime.jsx(AuthBranding, {})
-      ]
-    }
-  );
+function AuthContainer({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "if-authContainer if-internal-a8f3d2", children: [
+    /* @__PURE__ */ jsx("div", { className: "if-authCard if-internal-b2k9x1", children }),
+    /* @__PURE__ */ jsx(AuthBranding, {})
+  ] });
 }
-function AuthHeader({
-  title,
-  subtitle,
-  appearance = {}
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-    "flex flex-col justify-start items-start gap-2",
-    appearance.containerClassName
-  ), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(
-      "text-2xl font-semibold text-black leading-8",
-      appearance.titleClassName
-    ), children: title }),
-    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
-      "text-sm font-normal text-[#828282] leading-6",
-      appearance.subtitleClassName
-    ), children: subtitle })
+function AuthHeader({ title, subtitle }) {
+  return /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
+    /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: subtitle })
   ] });
 }
-function AuthErrorBanner({ error, className }) {
-  if (!error) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-2 mb-4 pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-6 h-6 text-red-500 shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-red-600 flex-1", children: error })
-      ]
-    }
-  );
+function AuthErrorBanner({ error }) {
+  if (!error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { className: "if-errorBanner-content", children: [
+    /* @__PURE__ */ jsx(AlertTriangle, { className: "if-errorBanner-icon" }),
+    /* @__PURE__ */ jsx("span", { className: "if-errorBanner-text", children: error })
+  ] }) });
 }
-function AuthFormField({
-  label,
-  id,
-  appearance = {},
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-    "flex flex-col justify-center items-stretch gap-1",
-    appearance.containerClassName
-  ), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        htmlFor: id,
-        className: cn(
-          "text-sm font-normal text-black leading-6",
-          appearance.labelClassName
-        ),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id,
-        className: cn(
-          "w-full flex items-center gap-2 self-stretch",
-          "pl-3 pr-2 py-2 rounded-sm border border-[#D4D4D4] bg-white",
-          "text-sm font-normal leading-5",
-          "placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
-          "focus:outline-none focus:border-black",
-          appearance.inputClassName
-        ),
-        ...props
-      }
-    )
+function AuthFormField({ label, id, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
+    /* @__PURE__ */ jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
   ] });
 }
 function AuthPasswordStrengthIndicator({
   password,
-  config,
-  appearance = {}
+  config
 }) {
   const requirements = createRequirements(config);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("mt-3 flex flex-col gap-3", appearance.containerClassName),
-      children: requirements.map((req) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+      className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
+      children: [
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-full border-2 transition-colors",
-              req.test(password) ? "bg-[#059669] border-transparent" : "border-neutral-400 bg-white"
-            ),
-            children: req.test(password) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3 text-white" })
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "1rem",
+              height: "1rem",
+              borderRadius: "50%",
+              border: "2px solid",
+              borderColor: req.test(password) ? "transparent" : "#9ca3af",
+              backgroundColor: req.test(password) ? "#059669" : "white",
+              transition: "all 0.2s"
+            },
+            children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "text-sm font-normal leading-5 text-[#525252]",
-              appearance.requirementClassName
-            ),
-            children: req.label
-          }
-        )
-      ] }, req.label))
-    }
-  );
+        /* @__PURE__ */ jsx("span", { children: req.label })
+      ]
+    },
+    req.label
+  )) }) });
 }
 function createRequirements(config) {
   const requirements = [];
-  const minLength = config.passwordMinLength;
-  const requireUppercase = config.requireUppercase;
-  const requireLowercase = config.requireLowercase;
-  const requireNumber = config.requireNumber;
-  const requireSpecialChar = config.requireSpecialChar;
-  if (requireUppercase) {
+  if (config.passwordMinLength) {
     requirements.push({
-      label: "At least 1 Uppercase letter",
-      test: (pwd) => /[A-Z]/.test(pwd)
+      label: `At least ${config.passwordMinLength} characters`,
+      test: (password) => password.length >= config.passwordMinLength
     });
   }
-  if (requireLowercase) {
+  if (config.requireLowercase) {
     requirements.push({
-      label: "At least 1 Lowercase letter",
-      test: (pwd) => /[a-z]/.test(pwd)
+      label: "Contains lowercase letter",
+      test: (password) => /[a-z]/.test(password)
     });
   }
-  if (requireNumber) {
+  if (config.requireUppercase) {
     requirements.push({
-      label: "At least 1 Number",
-      test: (pwd) => /\d/.test(pwd)
+      label: "Contains uppercase letter",
+      test: (password) => /[A-Z]/.test(password)
     });
   }
-  if (requireSpecialChar) {
+  if (config.requireNumber) {
     requirements.push({
-      label: "Special character (e.g. !?<>@#$%)",
-      test: (pwd) => /[!@#$%^&*()_+\-=[\]{};\\|,.<>/?]/.test(pwd)
+      label: "Contains number",
+      test: (password) => /\d/.test(password)
+    });
+  }
+  if (config.requireSpecialChar) {
+    requirements.push({
+      label: "Contains special character",
+      test: (password) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password)
     });
   }
-  requirements.push({
-    label: `${minLength} characters or more`,
-    test: (pwd) => pwd.length >= minLength
-  });
   return requirements;
 }
-function validatePasswordStrength(password, config) {
-  if (!password) return false;
-  const requirements = createRequirements(config);
-  return requirements.every((req) => req.test(password));
-}
 function AuthPasswordField({
   label,
   id,
@@ -565,187 +547,125 @@ function AuthPasswordField({
   authConfig,
   forgotPasswordLink,
   value,
-  appearance = {},
   onFocus,
   ...props
 }) {
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [showStrength, setShowStrength] = react.useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showStrength, setShowStrength] = useState(false);
   const handleFocus = (e) => {
     if (showStrengthIndicator) {
       setShowStrength(true);
     }
     onFocus?.(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-col justify-center items-stretch gap-1",
-        appearance.containerClassName
+  return /* @__PURE__ */ jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
+    (label || forgotPasswordLink) && /* @__PURE__ */ jsxs("div", { className: "if-passwordField-labelRow", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
+      forgotPasswordLink && /* @__PURE__ */ jsx("a", { href: forgotPasswordLink.href, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "if-passwordField-inputWrapper", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: showPassword ? "text" : "password",
+          className: "if-passwordField-input",
+          value,
+          onFocus: handleFocus,
+          ...props
+        }
       ),
-      children: [
-        (label || forgotPasswordLink) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
-            {
-              htmlFor: id,
-              className: cn(
-                "text-sm font-normal text-black leading-6",
-                appearance.labelClassName
-              ),
-              children: label
-            }
-          ),
-          forgotPasswordLink && /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: forgotPasswordLink.href,
-              className: "text-right text-sm font-normal text-[#737373] leading-6",
-              children: forgotPasswordLink.text || "Forget Password?"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id,
-              type: showPassword ? "text" : "password",
-              className: cn(
-                "w-full flex items-center gap-2 self-stretch",
-                "pl-3 py-2 pr-8 rounded border border-[#D4D4D4] bg-white",
-                "text-sm font-normal leading-5",
-                "placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
-                "focus:outline-none focus:border-black",
-                appearance.inputClassName
-              ),
-              value,
-              onFocus: handleFocus,
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowPassword(!showPassword),
-              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",
-              "aria-label": showPassword ? "Hide password" : "Show password",
-              children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
-            }
-          )
-        ] }),
-        showStrengthIndicator && showStrength && /* @__PURE__ */ jsxRuntime.jsx(
-          AuthPasswordStrengthIndicator,
-          {
-            password: String(value || ""),
-            config: authConfig
-          }
-        )
-      ]
-    }
-  );
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          className: "if-passwordField-toggleButton",
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
+        }
+      )
+    ] }),
+    showStrengthIndicator && showStrength && /* @__PURE__ */ jsx(AuthPasswordStrengthIndicator, { password: String(value || ""), config: authConfig })
+  ] });
 }
 function AuthSubmitButton({
   children,
   isLoading = false,
   confirmed = false,
   disabled = false,
-  className
+  type = "submit",
+  onClick
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
-      type: "submit",
-      className: cn(
-        "rounded-sm bg-black w-full flex mt-4 px-4 py-2",
-        "justify-center items-center gap-2.5 self-stretch",
-        "text-white font-semibold font-manrope text-base leading-normal",
-        "border-none cursor-pointer transition-colors",
-        "hover:bg-gray-800",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ),
+      type,
+      className: "if-submitButton if-internal-b8p3m4",
       disabled: disabled || isLoading || confirmed,
+      onClick,
       children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-5 h-5 animate-spin", size: 20 }),
-        confirmed && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "w-5 h-5", size: 20 }),
+        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
+        confirmed && /* @__PURE__ */ jsx(CircleCheck, { className: "if-submitButton-icon", size: 20 }),
         children
       ]
     }
   );
 }
-function AuthLink({ text, linkText, href, appearance = {} }) {
-  const currentSearch = typeof window !== "undefined" ? window.location.search : "";
+function AuthLink({ text, linkText, href }) {
+  const [searchParams] = useSearchParams();
+  const currentSearch = searchParams.toString();
   const finalHref = (() => {
-    if (!currentSearch) return href;
+    if (!currentSearch) {
+      return href;
+    }
     try {
       const url = new URL(href, window.location.origin);
-      const currentParams = new URLSearchParams(currentSearch);
-      currentParams.forEach((value, key) => {
-        if (!url.searchParams.has(key)) {
-          url.searchParams.set(key, value);
-        }
-      });
+      url.search = currentSearch;
       return url.pathname + url.search;
     } catch {
       return href;
     }
   })();
-  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn(
-    "text-center text-sm font-normal text-[#828282] leading-6",
-    appearance.containerClassName
-  ), children: [
-    text,
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: finalHref,
-        className: cn(
-          "text-sm font-medium text-black leading-6",
-          appearance.linkClassName
-        ),
-        children: linkText
-      }
-    )
+  return /* @__PURE__ */ jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
+    text && /* @__PURE__ */ jsx("span", { className: "if-authLink-text", children: text }),
+    text && " ",
+    /* @__PURE__ */ jsx("a", { href: finalHref, className: "if-authLink-link", children: linkText })
   ] });
 }
-function AuthDivider({ text = "or", className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-    "flex justify-center items-center gap-6 self-stretch",
-    "before:content-[''] before:flex-1 before:h-px before:bg-[#E5E5E5]",
-    "after:content-[''] after:flex-1 after:h-px after:bg-[#E5E5E5]",
-    className
-  ), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold font-manrope text-[#A3A3A3] leading-normal", children: text }) });
+function AuthDivider({ text = "or" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "if-authDivider if-internal-ad7k3m", children: [
+    /* @__PURE__ */ jsx("div", { className: "if-authDivider-line" }),
+    /* @__PURE__ */ jsx("span", { className: "if-authDivider-text", children: text }),
+    /* @__PURE__ */ jsx("div", { className: "if-authDivider-line" })
+  ] });
 }
 var OAUTH_PROVIDER_CONFIG = {
   google: {
     name: "Google",
-    svg: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+      /* @__PURE__ */ jsx(
         "path",
         {
           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",
           fill: "#4285F4"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         "path",
         {
           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",
           fill: "#34A853"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         "path",
         {
           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",
           fill: "#FBBC05"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         "path",
         {
           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",
@@ -757,12 +677,12 @@ var OAUTH_PROVIDER_CONFIG = {
   },
   github: {
     name: "GitHub",
-    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" }) }),
+    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" }) }),
     className: "insforge-oauth-github"
   },
   discord: {
     name: "Discord",
-    svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
       "path",
       {
         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",
@@ -773,7 +693,7 @@ var OAUTH_PROVIDER_CONFIG = {
   },
   facebook: {
     name: "Facebook",
-    svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
       "path",
       {
         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",
@@ -784,7 +704,7 @@ var OAUTH_PROVIDER_CONFIG = {
   },
   linkedin: {
     name: "LinkedIn",
-    svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
       "path",
       {
         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",
@@ -795,45 +715,45 @@ var OAUTH_PROVIDER_CONFIG = {
   },
   microsoft: {
     name: "Microsoft",
-    svg: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 23 23", fill: "none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0h11v11H0z", fill: "#F25022" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 0h11v11H12z", fill: "#7FBA00" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 12h11v11H0z", fill: "#00A4EF" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12h11v11H12z", fill: "#FFB900" })
+    svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 23 23", fill: "none", children: [
+      /* @__PURE__ */ jsx("path", { d: "M0 0h11v11H0z", fill: "#F25022" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 0h11v11H12z", fill: "#7FBA00" }),
+      /* @__PURE__ */ jsx("path", { d: "M0 12h11v11H0z", fill: "#00A4EF" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 12h11v11H12z", fill: "#FFB900" })
     ] }),
     className: "insforge-oauth-microsoft"
   },
   apple: {
     name: "Apple",
-    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" }) }),
+    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" }) }),
     className: "insforge-oauth-apple"
   },
   x: {
     name: "X",
-    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" }) }),
+    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" }) }),
     className: "insforge-oauth-x"
   },
   instagram: {
     name: "Instagram",
-    svg: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ jsx(
         "path",
         {
           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",
           fill: "url(#instagram-gradient)"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "instagram-gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#FD5949" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#D6249F" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#285AEB" })
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "instagram-gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#FD5949" }),
+        /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#D6249F" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#285AEB" })
       ] }) })
     ] }),
     className: "insforge-oauth-instagram"
   },
   tiktok: {
     name: "TikTok",
-    svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
       "path",
       {
         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",
@@ -844,7 +764,7 @@ var OAUTH_PROVIDER_CONFIG = {
   },
   spotify: {
     name: "Spotify",
-    svg: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
       "path",
       {
         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",
@@ -866,43 +786,39 @@ function AuthOAuthButton({
   disabled,
   loading,
   displayMode = "full",
-  style,
-  className
+  style
 }) {
   const config = getProviderConfig(provider);
   if (!config) {
     return null;
   }
   const getButtonText = () => {
-    if (loading) return "Authenticating...";
-    if (displayMode === "full") return `Continue with ${config.name}`;
-    if (displayMode === "short") return config.name;
+    if (displayMode === "full") {
+      return `Continue with ${config.name}`;
+    }
+    if (displayMode === "short") {
+      return config.name;
+    }
     return "";
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const className = [
+    "if-oauthButton",
+    "if-internal-o4k7w2",
+    displayMode === "full" && "if-oauthButton-full",
+    displayMode === "short" && "if-oauthButton-short",
+    displayMode === "icon" && "if-oauthButton-icon-only"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick: () => onClick(provider),
-      className: cn(
-        "flex w-full h-9 px-3 py-2",
-        "flex-row justify-center items-center gap-3",
-        "rounded-md border border-[#E4E4E7] bg-white",
-        "shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]",
-        "text-[#09090B] text-center text-sm font-medium leading-5",
-        "cursor-pointer transition-all duration-200",
-        "hover:bg-[#f9fafb] hover:border-[#9ca3af]",
-        "disabled:opacity-60 disabled:cursor-not-allowed",
-        displayMode === "full" && "justify-center",
-        displayMode === "short" && "justify-center px-2 gap-2",
-        displayMode === "icon" && "justify-center gap-0",
-        className
-      ),
+      className,
       disabled: disabled || loading,
       style,
       children: [
-        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 }),
-        getButtonText() && /* @__PURE__ */ jsxRuntime.jsx("span", { children: getButtonText() })
+        loading ? /* @__PURE__ */ jsx(Loader2, { className: "if-oauthButton-icon if-submitButton-spinner", size: 18 }) : /* @__PURE__ */ jsx("span", { className: "if-oauthButton-icon", children: config.svg }),
+        getButtonText() && /* @__PURE__ */ jsx("span", { children: getButtonText() })
       ]
     }
   );
@@ -911,16 +827,19 @@ function AuthOAuthProviders({
   providers,
   onClick,
   disabled,
-  loading,
-  appearance = {}
+  loading
 }) {
   if (!providers || providers.length === 0) {
     return null;
   }
   const count = providers.length;
   const getDisplayMode = () => {
-    if (count === 1) return "full";
-    if (count === 2 || count === 4) return "short";
+    if (count === 1) {
+      return "full";
+    }
+    if (count === 2 || count === 4) {
+      return "short";
+    }
     return "icon";
   };
   const getGridColumnStyle = (index) => {
@@ -956,22 +875,30 @@ function AuthOAuthProviders({
       return { gridColumn: "span 2 / span 2" };
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-    "grid gap-3 w-full grid-cols-6",
-    appearance.containerClassName
-  ), children: providers.map((provider, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    AuthOAuthButton,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      provider,
-      onClick,
-      disabled,
-      loading: loading === provider,
-      displayMode: getDisplayMode(),
-      style: getGridColumnStyle(index),
-      className: appearance.buttonClassName
-    },
-    provider
-  )) });
+      className: "if-oauthProviders if-internal-op3m8k",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(6, 1fr)",
+        gap: "0.75rem",
+        width: "100%"
+      },
+      children: providers.map((provider, index) => /* @__PURE__ */ jsx(
+        AuthOAuthButton,
+        {
+          provider,
+          onClick,
+          disabled,
+          loading: loading === provider,
+          displayMode: getDisplayMode(),
+          style: getGridColumnStyle(index)
+        },
+        provider
+      ))
+    }
+  );
 }
 function AuthVerificationCodeInput({
   length = 6,
@@ -979,13 +906,16 @@ function AuthVerificationCodeInput({
   email,
   onChange,
   disabled = false,
-  onComplete,
-  appearance = {}
+  onComplete
 }) {
-  const inputRefs = react.useRef([]);
+  const inputRefs = useRef([]);
   const handleChange = (index, digit) => {
-    if (digit.length > 1) return;
-    if (digit && !/^\d$/.test(digit)) return;
+    if (digit.length > 1) {
+      return;
+    }
+    if (digit && !/^\d$/.test(digit)) {
+      return;
+    }
     const newValue = value.split("");
     newValue[index] = digit;
     const updatedValue = newValue.join("");
@@ -1021,17 +951,14 @@ function AuthVerificationCodeInput({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-    "flex flex-col justify-center items-center gap-6",
-    appearance.containerClassName
-  ), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-normal text-[#525252] leading-5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
+    /* @__PURE__ */ jsxs("p", { className: "if-verificationCode-description", children: [
       "We've sent a verification code to your inbox at",
       " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-black leading-5", children: email }),
+      /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email }),
       ". Enter it below to proceed."
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-3 justify-center items-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
       "input",
       {
         ref: (el) => {
@@ -1045,14 +972,7 @@ function AuthVerificationCodeInput({
         onKeyDown: (e) => handleKeyDown(index, e),
         onPaste: handlePaste,
         disabled,
-        className: cn(
-          "w-full h-12 px-3 py-2 rounded border border-[#E0E0E0] bg-white",
-          "text-center text-base font-semibold leading-5 text-black",
-          "transition-all duration-200 outline-none",
-          "focus:border-black focus:shadow-[0_0_0_2px_rgba(0,0,0,0.1)]",
-          "disabled:bg-[#F5F5F5] disabled:cursor-not-allowed disabled:opacity-60",
-          appearance.inputClassName
-        ),
+        className: "if-verificationCode-input",
         autoComplete: "one-time-code"
       },
       index
@@ -1061,29 +981,27 @@ function AuthVerificationCodeInput({
 }
 function AuthEmailVerificationStep({
   email,
-  description,
   method = "code",
   onVerifyCode
 }) {
-  const { baseUrl } = useInsforge();
-  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
-  const [resendDisabled, setResendDisabled] = react.useState(true);
-  const [resendCountdown, setResendCountdown] = react.useState(60);
-  const [isSending, setIsSending] = react.useState(false);
-  const [verificationCode, setVerificationCode] = react.useState("");
-  const [isVerifying, setIsVerifying] = react.useState(false);
-  const [verificationError, setVerificationError] = react.useState("");
+  const { sendVerificationEmail } = useInsforge();
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSending, setIsSending] = useState(false);
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
   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.";
-  react.useEffect(() => {
+  useEffect(() => {
     const sendInitialEmail = async () => {
       try {
-        await insforge.auth.sendVerificationEmail({ email });
-      } catch {
+        await sendVerificationEmail(email);
+      } catch (error) {
+        console.error("Failed to send verification email:", error);
       }
     };
     void sendInitialEmail();
-  }, [email, method, insforge.auth]);
-  react.useEffect(() => {
+  }, [email, sendVerificationEmail]);
+  useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
         setResendCountdown((prev) => {
@@ -1101,9 +1019,8 @@ function AuthEmailVerificationStep({
     setResendDisabled(true);
     setResendCountdown(60);
     setIsSending(true);
-    setVerificationError("");
     try {
-      await insforge.auth.sendVerificationEmail({ email });
+      await sendVerificationEmail(email);
     } catch {
       setResendDisabled(false);
       setResendCountdown(0);
@@ -1111,59 +1028,153 @@ function AuthEmailVerificationStep({
       setIsSending(false);
     }
   };
-  const handleVerifyCode = async (code) => {
-    if (!onVerifyCode) {
+  const handleSubmit = async () => {
+    if (!onVerifyCode || verificationCode.length !== 6) {
       return;
     }
     setIsVerifying(true);
-    setVerificationError("");
     try {
-      await onVerifyCode(code);
-    } catch (error) {
-      setVerificationError(
-        error instanceof Error ? error.message : "Invalid verification code. Please try again."
-      );
-      setVerificationCode("");
+      await onVerifyCode(verificationCode);
     } finally {
       setIsVerifying(false);
+      setVerificationCode("");
     }
   };
-  const displayDescription = description || defaultDescription;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 items-stretch", children: [
-    /* @__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: [
+  const displayDescription = defaultDescription;
+  const isLinkMethod = method === "link";
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
       part,
-      index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+      index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
     ] }, index)) }),
-    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: [
-      /* @__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" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
-    ] }) }),
-    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: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
+      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
         AuthVerificationCodeInput,
         {
           value: verificationCode,
           onChange: setVerificationCode,
           email,
-          disabled: isVerifying,
-          onComplete: (code) => {
-            void handleVerifyCode(code);
+          disabled: isVerifying
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        AuthSubmitButton,
+        {
+          type: "button",
+          isLoading: isVerifying,
+          disabled: isVerifying || verificationCode.length !== 6,
+          onClick: () => {
+            void handleSubmit();
+          },
+          children: isVerifying ? "Verifying..." : "Verify Code"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "if-verificationStep-resendButton",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
+  ] });
+}
+function AuthResetPasswordVerificationStep({
+  email,
+  method,
+  onVerifyCode,
+  onResendEmail
+}) {
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSending, setIsSending] = useState(false);
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
           }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown]);
+  const handleResend = useCallback(async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSending(true);
+    try {
+      await onResendEmail();
+    } catch {
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSending(false);
+    }
+  }, [onResendEmail]);
+  const handleSubmit = async () => {
+    if (!onVerifyCode || verificationCode.length !== 6) {
+      return;
+    }
+    setIsVerifying(true);
+    try {
+      await onVerifyCode(verificationCode);
+    } finally {
+      setIsVerifying(false);
+      setVerificationCode("");
+    }
+  };
+  const isLinkMethod = method === "link";
+  const description = isLinkMethod ? `We've sent a password reset link to ${email}. Please check your email and click the link to reset your password. The link will expire in 10 minutes.` : `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.`;
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: description }),
+    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
+      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying
         }
-      ),
-      isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+      ) }),
+      /* @__PURE__ */ jsx(
+        AuthSubmitButton,
+        {
+          type: "button",
+          isLoading: isVerifying,
+          disabled: isVerifying || verificationCode.length !== 6,
+          onClick: () => {
+            void handleSubmit();
+          },
+          children: isVerifying ? "Verifying..." : "Continue"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
       "Didn't receive the email?",
       " ",
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => {
             void handleResend();
           },
           disabled: resendDisabled || isSending,
-          className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
+          className: "if-verificationStep-resendButton",
           children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
         }
       )
@@ -1182,7 +1193,6 @@ function SignInForm({
   availableProviders = [],
   onOAuthClick,
   authConfig,
-  appearance = {},
   title = "Welcome Back",
   subtitle = "Login to your account",
   emailLabel = "Email",
@@ -1197,161 +1207,79 @@ function SignInForm({
   signUpLinkText = "Sign Up Now",
   signUpUrl = "/sign-up",
   dividerText = "or",
-  // Email verification step props
   showVerificationStep = false,
-  onVerifyCode,
-  verificationDescription
+  onVerifyCode
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    AuthContainer,
-    {
-      appearance: {
-        containerClassName: appearance.container,
-        cardClassName: appearance.card
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthHeader,
-          {
-            title: showVerificationStep ? "Verify Your Email" : title,
-            subtitle: showVerificationStep ? "" : subtitle,
-            appearance: {
-              containerClassName: appearance.header?.container,
-              titleClassName: appearance.header?.title,
-              subtitleClassName: appearance.header?.subtitle
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthErrorBanner,
-          {
-            error: error || "",
-            className: appearance.errorBanner
-          }
-        ),
-        showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
-          AuthEmailVerificationStep,
-          {
-            email,
-            description: verificationDescription,
-            onVerifyCode
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(
+      AuthHeader,
+      {
+        title: showVerificationStep ? "Verify Your Email" : title,
+        subtitle: showVerificationStep ? "" : subtitle
+      }
+    ),
+    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
+    showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+      /* @__PURE__ */ jsx(
+        AuthFormField,
+        {
+          id: "email",
+          type: "email",
+          label: emailLabel,
+          placeholder: emailPlaceholder,
+          value: email,
+          onChange: (e) => onEmailChange(e.target.value),
+          required: true,
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AuthPasswordField,
+        {
+          id: "password",
+          label: passwordLabel,
+          placeholder: passwordPlaceholder,
+          value: password,
+          onChange: (e) => onPasswordChange(e.target.value),
+          required: true,
+          autoComplete: "current-password",
+          authConfig,
+          forgotPasswordLink: forgotPasswordUrl ? {
+            href: forgotPasswordUrl,
+            text: forgotPasswordText
+          } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
+    ] }),
+    !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
+      availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
+        /* @__PURE__ */ jsx(
+          AuthOAuthProviders,
           {
-            onSubmit,
-            noValidate: true,
-            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthFormField,
-                {
-                  id: "email",
-                  type: "email",
-                  label: emailLabel,
-                  placeholder: emailPlaceholder,
-                  value: email,
-                  onChange: (e) => onEmailChange(e.target.value),
-                  required: true,
-                  autoComplete: "email",
-                  appearance: {
-                    containerClassName: appearance.form?.emailField?.container,
-                    labelClassName: appearance.form?.emailField?.label,
-                    inputClassName: appearance.form?.emailField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthPasswordField,
-                {
-                  id: "password",
-                  label: passwordLabel,
-                  placeholder: passwordPlaceholder,
-                  value: password,
-                  onChange: (e) => onPasswordChange(e.target.value),
-                  required: true,
-                  autoComplete: "current-password",
-                  authConfig,
-                  forgotPasswordLink: forgotPasswordUrl ? {
-                    href: forgotPasswordUrl,
-                    text: forgotPasswordText
-                  } : void 0,
-                  appearance: {
-                    containerClassName: appearance.form?.passwordField?.container,
-                    labelClassName: appearance.form?.passwordField?.label,
-                    inputClassName: appearance.form?.passwordField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthSubmitButton,
-                {
-                  isLoading: loading,
-                  disabled: loading || oauthLoading !== null,
-                  className: appearance.button,
-                  children: loading ? loadingButtonText : submitButtonText
-                }
-              )
-            ]
+            providers: availableProviders,
+            onClick: onOAuthClick,
+            disabled: loading || oauthLoading !== null,
+            loading: oauthLoading
           }
-        ),
-        !showVerificationStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AuthLink,
-            {
-              text: signUpText,
-              linkText: signUpLinkText,
-              href: signUpUrl,
-              appearance: {
-                containerClassName: appearance.link?.container,
-                linkClassName: appearance.link?.link
-              }
-            }
-          ),
-          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AuthDivider,
-              {
-                text: dividerText,
-                className: appearance.divider
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AuthOAuthProviders,
-              {
-                providers: availableProviders,
-                onClick: onOAuthClick,
-                disabled: loading || oauthLoading !== null,
-                loading: oauthLoading,
-                appearance: {
-                  containerClassName: appearance.oauth?.container,
-                  buttonClassName: appearance.oauth?.button
-                }
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
+        )
+      ] })
+    ] })
+  ] });
 }
-function SignIn({
-  afterSignInUrl,
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
-  const { signIn, baseUrl } = useInsforge();
+function SignIn({ onError, ...uiProps }) {
+  const { signIn, verifyEmail, loginWithOAuth } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [error, setError] = react.useState("");
-  const [loading, setLoading] = react.useState(false);
-  const [step, setStep] = react.useState("form");
-  const [oauthLoading, setOauthLoading] = react.useState(
-    null
-  );
-  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState("form");
+  const [oauthLoading] = useState(null);
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
   async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
@@ -1367,51 +1295,51 @@ function SignIn({
         throw new Error(result.error);
       }
       const { user, accessToken, redirectTo } = result;
-      if (onSuccess) {
-        if (user) onSuccess(user, accessToken || "", redirectTo);
+      if (user) {
+        const finalUrl = new URL(redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", accessToken);
+        finalUrl.searchParams.set("user_id", user.id);
+        finalUrl.searchParams.set("email", user.email);
+        finalUrl.searchParams.set("name", user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
-      const errorMessage = err.message || "Sign in failed";
+      const errorMessage = err instanceof Error ? err.message : "Sign in failed";
       setError(errorMessage);
-      if (onError) onError(new Error(errorMessage));
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
     } finally {
       setLoading(false);
     }
   }
   async function handleVerifyCode(code) {
+    setError("");
     try {
-      const result = await insforge.auth.verifyEmail({ email, otp: code });
-      if (result.error) {
+      const result = await verifyEmail(email, code);
+      if (result?.error) {
         throw new Error(result.error.message || "Verification failed");
       }
-      if (result.data?.accessToken) {
-        if (onSuccess && result.data.user) {
-          onSuccess(result.data.user, result.data.accessToken);
-        }
+      if (result?.user) {
+        const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", result.accessToken);
+        finalUrl.searchParams.set("user_id", result.user.id);
+        finalUrl.searchParams.set("email", result.user.email);
+        finalUrl.searchParams.set("name", result.user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
-      throw new Error(err.message || "Invalid verification code");
-    }
-  }
-  async function handleOAuth(provider) {
-    try {
-      setOauthLoading(provider);
-      setError("");
-      await insforge.auth.signInWithOAuth({
-        provider,
-        redirectTo: afterSignInUrl
-      });
-    } catch (err) {
-      const errorMessage = err.message || `${provider} sign in failed`;
+      const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
       setError(errorMessage);
-      if (onError) onError(new Error(errorMessage));
-      setOauthLoading(null);
     }
   }
+  function handleOAuth(provider) {
+    loginWithOAuth(provider, redirectUrl || "");
+  }
   if (!authConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     SignInForm,
     {
       email,
@@ -1443,7 +1371,6 @@ function SignUpForm({
   availableProviders = [],
   onOAuthClick,
   authConfig,
-  appearance = {},
   title = "Get Started",
   subtitle = "Create your account",
   emailLabel = "Email",
@@ -1456,143 +1383,67 @@ function SignUpForm({
   signInLinkText = "Login Now",
   signInUrl = "/sign-in",
   dividerText = "or",
-  // Email verification step props
   showVerificationStep = false,
-  onVerifyCode,
-  verificationDescription
+  onVerifyCode
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    AuthContainer,
-    {
-      appearance: {
-        containerClassName: appearance.container,
-        cardClassName: appearance.card
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthHeader,
-          {
-            title: showVerificationStep ? "Verify Your Email" : title,
-            subtitle: showVerificationStep ? "" : subtitle,
-            appearance: {
-              containerClassName: appearance.header?.container,
-              titleClassName: appearance.header?.title,
-              subtitleClassName: appearance.header?.subtitle
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthErrorBanner,
-          {
-            error: error || "",
-            className: appearance.errorBanner
-          }
-        ),
-        showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
-          AuthEmailVerificationStep,
-          {
-            email,
-            description: verificationDescription,
-            onVerifyCode
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(
+      AuthHeader,
+      {
+        title: showVerificationStep ? "Verify Your Email" : title,
+        subtitle: showVerificationStep ? "" : subtitle
+      }
+    ),
+    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
+    showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+      /* @__PURE__ */ jsx(
+        AuthFormField,
+        {
+          id: "email",
+          type: "email",
+          label: emailLabel,
+          placeholder: emailPlaceholder,
+          value: email,
+          onChange: (e) => onEmailChange(e.target.value),
+          required: true,
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AuthPasswordField,
+        {
+          id: "password",
+          label: passwordLabel,
+          placeholder: passwordPlaceholder,
+          value: password,
+          onChange: (e) => onPasswordChange(e.target.value),
+          required: true,
+          minLength: authConfig.passwordMinLength,
+          autoComplete: "new-password",
+          showStrengthIndicator: true,
+          authConfig
+        }
+      ),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
+    ] }),
+    !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
+      availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
+        /* @__PURE__ */ jsx(
+          AuthOAuthProviders,
           {
-            onSubmit,
-            noValidate: true,
-            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthFormField,
-                {
-                  id: "email",
-                  type: "email",
-                  label: emailLabel,
-                  placeholder: emailPlaceholder,
-                  value: email,
-                  onChange: (e) => onEmailChange(e.target.value),
-                  required: true,
-                  autoComplete: "email",
-                  appearance: {
-                    containerClassName: appearance.form?.emailField?.container,
-                    labelClassName: appearance.form?.emailField?.label,
-                    inputClassName: appearance.form?.emailField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthPasswordField,
-                {
-                  id: "password",
-                  label: passwordLabel,
-                  placeholder: passwordPlaceholder,
-                  value: password,
-                  onChange: (e) => onPasswordChange(e.target.value),
-                  required: true,
-                  minLength: authConfig.passwordMinLength,
-                  autoComplete: "new-password",
-                  showStrengthIndicator: true,
-                  authConfig,
-                  appearance: {
-                    containerClassName: appearance.form?.passwordField?.container,
-                    labelClassName: appearance.form?.passwordField?.label,
-                    inputClassName: appearance.form?.passwordField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthSubmitButton,
-                {
-                  isLoading: loading,
-                  disabled: loading || oauthLoading !== null,
-                  className: appearance.button,
-                  children: loading ? loadingButtonText : submitButtonText
-                }
-              )
-            ]
+            providers: availableProviders,
+            onClick: onOAuthClick,
+            disabled: loading || oauthLoading !== null,
+            loading: oauthLoading
           }
-        ),
-        !showVerificationStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AuthLink,
-            {
-              text: signInText,
-              linkText: signInLinkText,
-              href: signInUrl,
-              appearance: {
-                containerClassName: appearance.link?.container,
-                linkClassName: appearance.link?.link
-              }
-            }
-          ),
-          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AuthDivider,
-              {
-                text: dividerText,
-                className: appearance.divider
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AuthOAuthProviders,
-              {
-                providers: availableProviders,
-                onClick: onOAuthClick,
-                disabled: loading || oauthLoading !== null,
-                loading: oauthLoading,
-                appearance: {
-                  containerClassName: appearance.oauth?.container,
-                  buttonClassName: appearance.oauth?.button
-                }
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
+        )
+      ] })
+    ] })
+  ] });
 }
-var emailSchema = zod.z.string().min(1, "Email is required").email("Invalid email address");
+var emailSchema = z.string().min(1, "Email is required").email("Invalid email address");
 function createPasswordSchema(options) {
   const {
     minLength = 6,
@@ -1601,7 +1452,7 @@ function createPasswordSchema(options) {
     requireNumber = false,
     requireSpecialChar = false
   } = options || {};
-  let schema = zod.z.string().min(minLength, `Password must be at least ${minLength} characters`);
+  let schema = z.string().min(minLength, `Password must be at least ${minLength} characters`);
   if (requireUppercase) {
     schema = schema.regex(/[A-Z]/, "Password must contain at least one uppercase letter");
   }
@@ -1663,23 +1514,17 @@ function checkPasswordStrength(password) {
   }
   return { score, feedback };
 }
-function SignUp({
-  afterSignUpUrl,
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
-  const { signUp, baseUrl } = useInsforge();
+function SignUp({ onError, ...uiProps }) {
+  const { signUp, verifyEmail, loginWithOAuth } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [error, setError] = react.useState("");
-  const [loading, setLoading] = react.useState(false);
-  const [step, setStep] = react.useState("form");
-  const [oauthLoading, setOauthLoading] = react.useState(
-    null
-  );
-  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState("form");
+  const [oauthLoading] = useState(null);
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
   async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
@@ -1721,52 +1566,50 @@ function SignUp({
         return;
       }
       if (result.accessToken && result.user) {
-        if (onSuccess) {
-          onSuccess(result.user, result.accessToken, result.redirectTo);
-        }
+        const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", result.accessToken);
+        finalUrl.searchParams.set("user_id", result.user.id);
+        finalUrl.searchParams.set("email", result.user.email);
+        finalUrl.searchParams.set("name", result.user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
-      const errorMessage = err.message || "Sign up failed";
+      const errorMessage = err instanceof Error ? err.message : "Sign up failed";
       setError(errorMessage);
-      if (onError) onError(new Error(errorMessage));
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
     } finally {
       setLoading(false);
     }
   }
   async function handleVerifyCode(code) {
+    setError("");
     try {
-      const result = await insforge.auth.verifyEmail({ email, otp: code });
-      if (result.error) {
+      const result = await verifyEmail(email, code);
+      if (result?.error) {
         throw new Error(result.error.message || "Verification failed");
       }
-      if (result.data?.accessToken) {
-        if (onSuccess && result.data.user) {
-          onSuccess(result.data.user, result.data.accessToken);
-        }
+      if (result?.user) {
+        const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", result.accessToken);
+        finalUrl.searchParams.set("user_id", result.user.id);
+        finalUrl.searchParams.set("email", result.user.email);
+        finalUrl.searchParams.set("name", result.user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
-      throw new Error(err.message || "Invalid verification code");
-    }
-  }
-  async function handleOAuth(provider) {
-    try {
-      setOauthLoading(provider);
-      setError("");
-      await insforge.auth.signInWithOAuth({
-        provider,
-        redirectTo: afterSignUpUrl
-      });
-    } catch (err) {
-      const errorMessage = err.message || `${provider} sign up failed`;
+      const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
       setError(errorMessage);
-      if (onError) onError(new Error(errorMessage));
-      setOauthLoading(null);
     }
   }
+  function handleOAuth(provider) {
+    loginWithOAuth(provider, redirectUrl || "");
+  }
   if (!authConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     SignUpForm,
     {
       email,
@@ -1792,8 +1635,6 @@ function ForgotPasswordForm({
   onSubmit,
   error,
   loading = false,
-  success = false,
-  appearance = {},
   title = "Forgot Password?",
   subtitle = "Enter your email address and we'll send you a code to reset your password.",
   emailLabel = "Email",
@@ -1802,105 +1643,47 @@ function ForgotPasswordForm({
   loadingButtonText = "Sending...",
   backToSignInText = "Remember your password?",
   backToSignInUrl = "/sign-in",
-  successTitle = "Check Your Email",
-  successMessage
+  showVerificationStep = false,
+  resetPasswordMethod = "code",
+  onVerifyCode,
+  onResendEmail
 }) {
-  if (success) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AuthContainer,
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(
+      AuthHeader,
       {
-        appearance: {
-          containerClassName: appearance.container,
-          cardClassName: appearance.card
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-          /* @__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" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-          /* @__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.` }),
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
+        title: showVerificationStep ? resetPasswordMethod === "link" ? "Check Your Email" : "Enter Reset Code" : title,
+        subtitle: showVerificationStep ? "" : subtitle
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    AuthContainer,
-    {
-      appearance: {
-        containerClassName: appearance.container,
-        cardClassName: appearance.card
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthHeader,
-          {
-            title,
-            subtitle,
-            appearance: {
-              containerClassName: appearance.header?.container,
-              titleClassName: appearance.header?.title,
-              subtitleClassName: appearance.header?.subtitle
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthErrorBanner,
-          {
-            error: error || "",
-            className: appearance.errorBanner
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
-          {
-            onSubmit,
-            noValidate: true,
-            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthFormField,
-                {
-                  id: "email",
-                  type: "email",
-                  label: emailLabel,
-                  placeholder: emailPlaceholder,
-                  value: email,
-                  onChange: (e) => onEmailChange(e.target.value),
-                  required: true,
-                  autoComplete: "email",
-                  appearance: {
-                    containerClassName: appearance.form?.emailField?.container,
-                    labelClassName: appearance.form?.emailField?.label,
-                    inputClassName: appearance.form?.emailField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthSubmitButton,
-                {
-                  isLoading: loading,
-                  disabled: loading,
-                  className: appearance.button,
-                  children: loading ? loadingButtonText : submitButtonText
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthLink,
-          {
-            text: backToSignInText,
-            linkText: "Back to Sign In",
-            href: backToSignInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        )
-      ]
-    }
-  );
+    ),
+    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
+    showVerificationStep ? /* @__PURE__ */ jsx(
+      AuthResetPasswordVerificationStep,
+      {
+        email,
+        method: resetPasswordMethod,
+        onVerifyCode,
+        onResendEmail: onResendEmail || (async () => {
+        })
+      }
+    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+      /* @__PURE__ */ jsx(
+        AuthFormField,
+        {
+          id: "email",
+          type: "email",
+          label: emailLabel,
+          placeholder: emailPlaceholder,
+          value: email,
+          onChange: (e) => onEmailChange(e.target.value),
+          required: true,
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
+    ] }),
+    !showVerificationStep && /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
+  ] });
 }
 function ResetPasswordForm({
   newPassword,
@@ -1912,7 +1695,6 @@ function ResetPasswordForm({
   loading = false,
   success = false,
   authConfig,
-  appearance = {},
   title = "Reset Password",
   subtitle = "Enter your new password below.",
   newPasswordLabel = "New Password",
@@ -1921,157 +1703,164 @@ function ResetPasswordForm({
   confirmPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
   submitButtonText = "Reset Password",
   loadingButtonText = "Resetting...",
-  backToSignInText = "",
-  backToSignInUrl = "/sign-in",
-  successTitle = "Password Reset Successful!",
-  successMessage = "Your password has been successfully reset. You can now sign in with your new password."
+  successTitle = "Password Reset Successful!"
 }) {
+  let successMessage = "Your password has been successfully reset. You can close this page and sign in with your new password.";
+  if (authConfig && authConfig.verifyEmailMethod === "code") {
+    successMessage = "Your password has been successfully reset. You can wait for redirect to sign in with your new password.";
+  }
   if (success) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AuthContainer,
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        appearance: {
-          containerClassName: appearance.container,
-          cardClassName: appearance.card
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-          /* @__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" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage }),
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    AuthContainer,
-    {
-      appearance: {
-        containerClassName: appearance.container,
-        cardClassName: appearance.card
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthHeader,
-          {
-            title,
-            subtitle,
-            appearance: {
-              containerClassName: appearance.header?.container,
-              titleClassName: appearance.header?.title,
-              subtitleClassName: appearance.header?.subtitle
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthErrorBanner,
-          {
-            error: error || "",
-            className: appearance.errorBanner
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
-          {
-            onSubmit,
-            noValidate: true,
-            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthPasswordField,
-                {
-                  id: "newPassword",
-                  label: newPasswordLabel,
-                  placeholder: newPasswordPlaceholder,
-                  value: newPassword,
-                  onChange: (e) => onNewPasswordChange(e.target.value),
-                  required: true,
-                  autoComplete: "new-password",
-                  showStrengthIndicator: true,
-                  authConfig,
-                  appearance: {
-                    containerClassName: appearance.form?.newPasswordField?.container,
-                    labelClassName: appearance.form?.newPasswordField?.label,
-                    inputClassName: appearance.form?.newPasswordField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthPasswordField,
-                {
-                  id: "confirmPassword",
-                  label: confirmPasswordLabel,
-                  placeholder: confirmPasswordPlaceholder,
-                  value: confirmPassword,
-                  onChange: (e) => onConfirmPasswordChange(e.target.value),
-                  required: true,
-                  autoComplete: "new-password",
-                  authConfig,
-                  appearance: {
-                    containerClassName: appearance.form?.confirmPasswordField?.container,
-                    labelClassName: appearance.form?.confirmPasswordField?.label,
-                    inputClassName: appearance.form?.confirmPasswordField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthSubmitButton,
+        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "4rem",
+                height: "4rem",
+                borderRadius: "50%",
+                backgroundColor: "#D1FAE5",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                "svg",
                 {
-                  isLoading: loading,
-                  disabled: loading,
-                  className: appearance.button,
-                  children: loading ? loadingButtonText : submitButtonText
+                  style: { width: "2rem", height: "2rem", color: "#059669" },
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
                 }
               )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthLink,
-          {
-            text: backToSignInText,
-            linkText: "Back to Sign In",
-            href: backToSignInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
             }
-          }
-        )
-      ]
-    }
-  );
+          ),
+          /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
+          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
+    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
+    /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+      /* @__PURE__ */ jsx(
+        AuthPasswordField,
+        {
+          id: "newPassword",
+          label: newPasswordLabel,
+          placeholder: newPasswordPlaceholder,
+          value: newPassword,
+          onChange: (e) => onNewPasswordChange(e.target.value),
+          required: true,
+          autoComplete: "new-password",
+          showStrengthIndicator: true,
+          authConfig
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AuthPasswordField,
+        {
+          id: "confirmPassword",
+          label: confirmPasswordLabel,
+          placeholder: confirmPasswordPlaceholder,
+          value: confirmPassword,
+          onChange: (e) => onConfirmPasswordChange(e.target.value),
+          required: true,
+          autoComplete: "new-password",
+          authConfig
+        }
+      ),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
+    ] })
+  ] });
 }
-function ResetPassword({
-  token,
-  backToSignInUrl = "/sign-in",
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
-  const { resetPassword } = useInsforge();
+function ForgotPassword({ onError, ...uiProps }) {
+  const { sendResetPasswordEmail, exchangeResetPasswordToken, resetPassword } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
-  const [newPassword, setNewPassword] = react.useState("");
-  const [confirmPassword, setConfirmPassword] = react.useState("");
-  const [error, setError] = react.useState("");
-  const [loading, setLoading] = react.useState(false);
-  const [success, setSuccess] = react.useState(false);
-  async function handleSubmit(e) {
+  const [searchParams] = useSearchParams();
+  const [step, setStep] = useState("email");
+  const [email, setEmail] = useState("");
+  const [resetToken, setResetToken] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [showVerificationStep, setShowVerificationStep] = useState(false);
+  async function handleEmailSubmit(e) {
     e.preventDefault();
     setLoading(true);
     setError("");
-    if (!authConfig) {
-      setError("Configuration not loaded. Please refresh the page.");
+    const emailValidation = emailSchema.safeParse(email);
+    if (!emailValidation.success) {
+      const firstError = emailValidation.error.issues[0];
+      setError(firstError.message);
       setLoading(false);
       return;
     }
+    try {
+      const result = await sendResetPasswordEmail(emailValidation.data);
+      if (result?.success) {
+        setShowVerificationStep(true);
+      } else {
+        const errorMessage = result?.message || "Failed to send reset email";
+        setError(errorMessage);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to send reset email";
+      setError(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleVerifyCode(code) {
+    setError("");
+    try {
+      const result = await exchangeResetPasswordToken(email, code);
+      if ("error" in result) {
+        throw new Error(result.error.message || "Failed to verify code");
+      }
+      if (result.token) {
+        setResetToken(result.token);
+        setStep("password");
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
+      setError(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+    }
+  }
+  async function handleResendEmail() {
+    await sendResetPasswordEmail(email);
+  }
+  async function handleResetPasswordSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
     if (newPassword !== confirmPassword) {
       setError("Passwords do not match");
       setLoading(false);
       return;
     }
-    if (!token) {
-      setError("Reset token is missing");
+    if (!authConfig) {
+      setError("Configuration not loaded");
       setLoading(false);
       return;
     }
@@ -2090,12 +1879,16 @@ function ResetPassword({
       return;
     }
     try {
-      const result = await resetPassword(token, newPassword);
+      const result = await resetPassword(resetToken, newPassword);
       if (result?.message) {
         setSuccess(true);
-        if (onSuccess) {
-          onSuccess();
-        }
+        const signInUrl = new URL("/sign-in", window.location.origin);
+        searchParams.forEach((value, key) => {
+          signInUrl.searchParams.set(key, value);
+        });
+        setTimeout(() => {
+          window.location.href = signInUrl.toString();
+        }, 2e3);
       } else {
         const errorMessage = "Failed to reset password";
         setError(errorMessage);
@@ -2104,7 +1897,7 @@ function ResetPassword({
         }
       }
     } catch (err) {
-      const errorMessage = err.message || "Failed to reset password";
+      const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
       setError(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -2116,90 +1909,97 @@ function ResetPassword({
   if (!authConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  if (step === "email") {
+    return /* @__PURE__ */ jsx(
+      ForgotPasswordForm,
+      {
+        email,
+        onEmailChange: setEmail,
+        onSubmit: (e) => {
+          void handleEmailSubmit(e);
+        },
+        error,
+        loading,
+        showVerificationStep,
+        resetPasswordMethod: authConfig.resetPasswordMethod,
+        onVerifyCode: handleVerifyCode,
+        onResendEmail: handleResendEmail,
+        ...uiProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     ResetPasswordForm,
     {
       newPassword,
       confirmPassword,
       onNewPasswordChange: setNewPassword,
       onConfirmPasswordChange: setConfirmPassword,
-      onSubmit: handleSubmit,
+      onSubmit: handleResetPasswordSubmit,
       error,
       loading,
       success,
       authConfig,
-      backToSignInUrl,
       ...uiProps
     }
   );
 }
-function ForgotPassword({
-  backToSignInUrl = "/sign-in",
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
-  const { sendResetPasswordEmail, baseUrl } = useInsforge();
+function ResetPassword({ onError, ...uiProps }) {
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get("token");
+  const { resetPassword } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
-  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
-  const [step, setStep] = react.useState("email");
-  const [email, setEmail] = react.useState("");
-  const [verificationCode, setVerificationCode] = react.useState("");
-  const [resetToken, setResetToken] = react.useState("");
-  const [error, setError] = react.useState("");
-  const [loading, setLoading] = react.useState(false);
-  const [success, setSuccess] = react.useState(false);
-  const [resendDisabled, setResendDisabled] = react.useState(true);
-  const [resendCountdown, setResendCountdown] = react.useState(60);
-  const [isSendingCode, setIsSendingCode] = react.useState(false);
-  const [isVerifyingCode, setIsVerifyingCode] = react.useState(false);
-  react.useEffect(() => {
-    if (resendCountdown > 0 && step === "code") {
-      const timer = setInterval(() => {
-        setResendCountdown((prev) => {
-          if (prev <= 1) {
-            setResendDisabled(false);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1e3);
-      return () => clearInterval(timer);
-    }
-  }, [resendCountdown, step]);
-  async function handleEmailSubmit(e) {
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
     setError("");
-    const emailValidation = emailSchema.safeParse(email);
-    if (!emailValidation.success) {
-      const firstError = emailValidation.error.issues[0];
+    if (!authConfig) {
+      setError("Configuration not loaded. Please refresh the page.");
+      setLoading(false);
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match");
+      setLoading(false);
+      return;
+    }
+    if (!token) {
+      setError("Reset token is missing");
+      setLoading(false);
+      return;
+    }
+    const passwordZodSchema = createPasswordSchema({
+      minLength: authConfig.passwordMinLength,
+      requireUppercase: authConfig.requireUppercase,
+      requireLowercase: authConfig.requireLowercase,
+      requireNumber: authConfig.requireNumber,
+      requireSpecialChar: authConfig.requireSpecialChar
+    });
+    const passwordValidation = passwordZodSchema.safeParse(newPassword);
+    if (!passwordValidation.success) {
+      const firstError = passwordValidation.error.issues[0];
       setError(firstError.message);
       setLoading(false);
       return;
     }
     try {
-      const result = await sendResetPasswordEmail(emailValidation.data);
-      if (result?.success) {
-        if (authConfig?.resetPasswordMethod === "link") {
-          setSuccess(true);
-          if (onSuccess) {
-            onSuccess();
-          }
-        } else {
-          setStep("code");
-          setResendDisabled(true);
-          setResendCountdown(60);
-        }
+      const result = await resetPassword(token, newPassword);
+      if (result?.message) {
+        setSuccess(true);
       } else {
-        const errorMessage = result?.message || "Failed to send reset code";
+        const errorMessage = "Failed to reset password";
         setError(errorMessage);
         if (onError) {
           onError(new Error(errorMessage));
         }
       }
     } catch (err) {
-      const errorMessage = err.message || "Failed to send reset code";
+      const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
       setError(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -2208,178 +2008,163 @@ function ForgotPassword({
       setLoading(false);
     }
   }
-  async function handleVerifyCode(code) {
-    setIsVerifyingCode(true);
-    setError("");
-    setVerificationCode(code);
-    try {
-      const result = await insforge.auth.exchangeResetPasswordToken({ email, code });
-      if (result.error) {
-        throw new Error(result.error.message || "Failed to verify code");
-      }
-      if (result.data) {
-        setResetToken(result.data.token);
-        setStep("password");
-      }
-    } catch (err) {
-      setError(err.message || "Invalid verification code");
-      setVerificationCode("");
-    } finally {
-      setIsVerifyingCode(false);
-    }
-  }
-  const handleResendCode = react.useCallback(async () => {
-    setResendDisabled(true);
-    setResendCountdown(60);
-    setIsSendingCode(true);
-    setError("");
-    try {
-      await sendResetPasswordEmail(email);
-    } catch (err) {
-      setError(err.message || "Failed to resend code");
-      setResendDisabled(false);
-      setResendCountdown(0);
-    } finally {
-      setIsSendingCode(false);
-    }
-  }, [email, sendResetPasswordEmail]);
-  function handlePasswordResetSuccess(redirectTo) {
-    const targetUrl = redirectTo || backToSignInUrl;
-    if (onSuccess) {
-      onSuccess();
-    }
-    setTimeout(() => {
-      window.location.href = targetUrl;
-    }, 1500);
-  }
   if (!authConfig) {
     return null;
   }
-  if (step === "email") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ForgotPasswordForm,
-      {
-        email,
-        onEmailChange: setEmail,
-        onSubmit: handleEmailSubmit,
-        error,
-        loading,
-        success,
-        backToSignInUrl,
-        ...uiProps
-      }
-    );
+  if (!token) {
+    return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+      /* @__PURE__ */ jsx(AuthHeader, { title: "Invalid Reset Link", subtitle: "" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: "1.5rem",
+            backgroundColor: "#FEE2E2",
+            borderRadius: "0.5rem",
+            border: "1px solid #DC2626"
+          },
+          children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "0.875rem",
+                color: "#DC2626",
+                margin: 0,
+                fontFamily: "var(--if-font-family)"
+              },
+              children: "The password reset link is missing or invalid. Please request a new password reset link."
+            }
+          )
+        }
+      )
+    ] });
   }
-  if (step === "code") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      AuthContainer,
+  if (success) {
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        appearance: {
-          containerClassName: uiProps.appearance?.container,
-          cardClassName: uiProps.appearance?.card
-        },
+        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AuthHeader,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              title: "Enter Reset Code",
-              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.`,
-              appearance: {
-                containerClassName: uiProps.appearance?.header?.container,
-                titleClassName: uiProps.appearance?.header?.title,
-                subtitleClassName: uiProps.appearance?.header?.subtitle
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(AuthErrorBanner, { error, className: uiProps.appearance?.errorBanner }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
-            /* @__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: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AuthVerificationCodeInput,
+              style: {
+                width: "4rem",
+                height: "4rem",
+                borderRadius: "50%",
+                backgroundColor: "#D1FAE5",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                "svg",
                 {
-                  value: verificationCode,
-                  onChange: setVerificationCode,
-                  email,
-                  disabled: isVerifyingCode,
-                  onComplete: (code) => {
-                    void handleVerifyCode(code);
-                  }
-                }
-              ),
-              isVerifyingCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
-              "Didn't receive the email?",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => {
-                    void handleResendCode();
-                  },
-                  disabled: resendDisabled || isSendingCode,
-                  className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
-                  children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+                  style: { width: "2rem", height: "2rem", color: "#059669" },
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
                 }
               )
-            ] })
-          ] }),
-          /* @__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" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              style: {
+                fontSize: "1.5rem",
+                fontWeight: 600,
+                color: "#000",
+                margin: 0,
+                textAlign: "center",
+                fontFamily: "var(--if-font-family)"
+              },
+              children: "Password Reset Successfully"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "0.875rem",
+                color: "#828282",
+                textAlign: "center",
+                margin: 0,
+                fontFamily: "var(--if-font-family)"
+              },
+              children: "Your password has been reset successfully. You can now close this page and return to the login page in your original tab."
+            }
+          )
         ]
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ResetPassword,
+  return /* @__PURE__ */ jsx(
+    ResetPasswordForm,
     {
-      token: resetToken,
-      backToSignInUrl,
-      onSuccess: handlePasswordResetSuccess,
-      onError,
-      appearance: uiProps.appearance
+      newPassword,
+      confirmPassword,
+      onNewPasswordChange: setNewPassword,
+      onConfirmPasswordChange: setConfirmPassword,
+      onSubmit: handleSubmit,
+      error,
+      loading,
+      success: false,
+      authConfig,
+      ...uiProps
     }
   );
 }
 function VerifyEmailStatus({
   status,
   error,
-  appearance = {},
   verifyingTitle = "Verifying your email...",
   successTitle = "Email Verified!",
-  successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
+  successMessage = "Your email has been verified successfully. You can close this page and sign in to your app.",
   errorTitle = "Verification Failed"
 }) {
   if (status === "verifying") {
-    return /* @__PURE__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: verifyingTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white" })
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-container", children: [
+      /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
+      /* @__PURE__ */ jsx("div", { className: "if-submitButton-spinner if-verifyStatus-spinner" })
     ] }) });
   }
   if (status === "error") {
-    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: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-black dark:text-white", children: errorTitle }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: [
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
+      /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
+      /* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: [
         error || "The verification link is invalid or has expired.",
         " Please try again or contact support if the problem persists. You can close this page and return to your app."
       ] })
     ] }) }) });
   }
-  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: [
-    /* @__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" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage })
+  return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-successContent", children: [
+    /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-successIcon", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "if-verifyStatus-successIconSvg",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title if-verifyStatus-textCenter", children: successTitle }),
+    /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-verifyStatus-textCenter", children: successMessage })
   ] }) }) });
 }
-function VerifyEmail({
-  token,
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
+function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
   const { verifyEmail } = useInsforge();
-  const [status, setStatus] = react.useState("verifying");
-  const [error, setError] = react.useState("");
-  react.useEffect(() => {
+  const [status, setStatus] = useState("verifying");
+  const [error, setError] = useState("");
+  useEffect(() => {
     const verifyEmailFn = async () => {
       if (!token) {
         const errorMessage = "Invalid verification link. Missing required token.";
@@ -2410,7 +2195,7 @@ function VerifyEmail({
           });
         }
       } catch (err) {
-        const errorMessage = err.message || "Email verification failed";
+        const errorMessage = err instanceof Error ? err.message : "Email verification failed";
         setError(errorMessage);
         setStatus("error");
         if (onError) {
@@ -2420,21 +2205,19 @@ function VerifyEmail({
     };
     void verifyEmailFn();
   }, [token, verifyEmail, onSuccess, onError]);
-  return /* @__PURE__ */ jsxRuntime.jsx(VerifyEmailStatus, { status, error, ...uiProps });
+  return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
 }
-function UserButton({
-  afterSignOutUrl = "/",
-  mode = "detailed",
-  appearance = {}
-}) {
+function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
   const { user, signOut } = useInsforge();
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [imageError, setImageError] = react.useState(false);
-  const dropdownRef = react.useRef(null);
-  react.useEffect(() => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [imageError, setImageError] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
     setImageError(false);
     const avatarUrl = user?.avatarUrl;
-    if (!avatarUrl) return;
+    if (!avatarUrl) {
+      return;
+    }
     const checkImageUrl = async () => {
       try {
         const response = await fetch(avatarUrl, {
@@ -2445,12 +2228,15 @@ function UserButton({
           setImageError(true);
         }
       } catch (error) {
+        if (error instanceof Error) {
+          console.error("Error checking image URL:", error.message);
+        }
         setImageError(true);
       }
     };
     checkImageUrl();
   }, [user?.avatarUrl]);
-  react.useEffect(() => {
+  useEffect(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2468,87 +2254,48 @@ function UserButton({
     setIsOpen(false);
     window.location.href = afterSignOutUrl;
   }
-  if (!user) return null;
+  if (!user) {
+    return null;
+  }
   const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("relative inline-block", appearance.containerClassName),
-      ref: dropdownRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            className: cn(
-              "p-1 bg-transparent border-0 rounded-full cursor-pointer transition-all duration-200",
-              "flex items-center justify-center gap-2",
-              "hover:bg-black/5",
-              mode === "detailed" && "rounded-lg p-2",
-              appearance.buttonClassName
-            ),
-            onClick: () => setIsOpen(!isOpen),
-            "aria-expanded": isOpen,
-            "aria-haspopup": "true",
-            children: [
-              /* @__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(
-                "img",
-                {
-                  src: user.avatarUrl,
-                  alt: user.email,
-                  onError: () => setImageError(true),
-                  className: "rounded-full object-cover w-full h-full"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-semibold text-sm", children: initials }) }),
-              mode === "detailed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
-                user.name && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-sm font-semibold text-gray-900 leading-5 text-left",
-                      appearance.nameClassName
-                    ),
-                    children: user.name
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-xs text-gray-500 leading-4 text-left",
-                      appearance.emailClassName
-                    ),
-                    children: user.email
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "absolute top-full right-0 mt-2 min-w-40",
-              "bg-white border border-gray-200 rounded-lg",
-              "shadow-lg z-50 overflow-hidden p-1",
-              appearance.dropdownClassName
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: handleSignOut,
-                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",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" }),
-                  "Sign out"
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+  const buttonClassName = mode === "detailed" ? "if-userButton if-userButton-detailed" : "if-userButton";
+  return /* @__PURE__ */ jsxs("div", { className: "if-userButton-container if-internal-ub3k8p", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: buttonClassName,
+        onClick: () => setIsOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: user.avatarUrl,
+              alt: user.email,
+              onError: () => setImageError(true),
+              className: "if-userButton-avatarImage"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "if-userButton-avatarInitials", children: initials }) }),
+          mode === "detailed" && /* @__PURE__ */ jsxs("div", { className: "if-userButton-info", children: [
+            user.name && /* @__PURE__ */ jsx("div", { className: "if-userButton-name", children: user.name }),
+            /* @__PURE__ */ jsx("div", { className: "if-userButton-email", children: user.email })
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleSignOut,
+        className: "if-userButton-menuItem if-userButton-menuItem-signout",
+        children: [
+          /* @__PURE__ */ jsx(LogOut, { className: "if-userButton-menuItem-icon" }),
+          "Sign out"
+        ]
+      }
+    ) })
+  ] });
 }
 function Protect({
   children,
@@ -2558,7 +2305,7 @@ function Protect({
   onRedirect
 }) {
   const { isSignedIn, isLoaded, user } = useInsforge();
-  react.useEffect(() => {
+  useEffect(() => {
     if (isLoaded && !isSignedIn) {
       if (onRedirect) {
         onRedirect(redirectTo);
@@ -2576,7 +2323,7 @@ function Protect({
     }
   }, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
   if (!isLoaded) {
-    return fallback || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "insforge-loading", children: "Loading..." });
+    return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
   }
   if (!isSignedIn) {
     return fallback || null;
@@ -2584,80 +2331,27 @@ function Protect({
   if (condition && user && !condition(user)) {
     return fallback || null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function SignedIn({ children }) {
   const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) return null;
-  if (!isSignedIn) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  if (!isLoaded) {
+    return null;
+  }
+  if (!isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function SignedOut({ children }) {
   const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) return null;
-  if (isSignedIn) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-function InsforgeCallback({
-  redirectTo = "/",
-  onSuccess,
-  onError,
-  loadingComponent,
-  onRedirect
-}) {
-  const isProcessingRef = react.useRef(false);
-  const { isLoaded, isSignedIn } = useInsforge();
-  react.useEffect(() => {
-    if (!isLoaded) return;
-    if (isProcessingRef.current) return;
-    isProcessingRef.current = true;
-    const processCallback = async () => {
-      const searchParams = new URLSearchParams(window.location.search);
-      const error = searchParams.get("error");
-      if (error) {
-        if (onError) {
-          onError(error);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(error);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      if (!isSignedIn) {
-        const errorMsg = "authentication_failed";
-        if (onError) {
-          onError(errorMsg);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      window.history.replaceState({}, "", window.location.pathname);
-      if (onSuccess) {
-        onSuccess();
-      }
-      if (onRedirect) {
-        onRedirect(redirectTo);
-      } else {
-        window.location.href = redirectTo;
-      }
-    };
-    processCallback();
-  }, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
-  const defaultLoading = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })
-  ] }) });
-  return loadingComponent || defaultLoading;
+  if (!isLoaded) {
+    return null;
+  }
+  if (isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 
 // src/hooks/useAuth.ts
@@ -2672,7 +2366,7 @@ function useUser() {
   return { user, isLoaded, updateUser, setUser };
 }
 function RedirectToAuth({ baseUrl, path }) {
-  react.useEffect(() => {
+  useEffect(() => {
     const callbackUrl = `${window.location.origin}/auth/callback`;
     const authUrl = new URL(path, baseUrl);
     authUrl.searchParams.set("redirect", callbackUrl);
@@ -2681,11 +2375,7 @@ function RedirectToAuth({ baseUrl, path }) {
   return null;
 }
 function getInsforgeRoutes(config) {
-  const {
-    baseUrl,
-    builtInAuth = true,
-    paths = {}
-  } = config;
+  const { baseUrl, builtInAuth = true, paths = {} } = config;
   const {
     signIn = "/sign-in",
     signUp = "/sign-up",
@@ -2698,74 +2388,29 @@ function getInsforgeRoutes(config) {
     routes.push(
       {
         path: signIn,
-        element: /* @__PURE__ */ jsxRuntime.jsx(RedirectToAuth, { baseUrl, path: "/auth/sign-in" })
+        element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/sign-in" })
       },
       {
         path: signUp,
-        element: /* @__PURE__ */ jsxRuntime.jsx(RedirectToAuth, { baseUrl, path: "/auth/sign-up" })
+        element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/sign-up" })
       },
       {
         path: verifyEmail,
-        element: /* @__PURE__ */ jsxRuntime.jsx(RedirectToAuth, { baseUrl, path: "/auth/verify-email" })
+        element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/verify-email" })
       },
       {
         path: forgotPassword,
-        element: /* @__PURE__ */ jsxRuntime.jsx(RedirectToAuth, { baseUrl, path: "/auth/forgot-password" })
+        element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/forgot-password" })
       },
       {
         path: resetPassword,
-        element: /* @__PURE__ */ jsxRuntime.jsx(RedirectToAuth, { baseUrl, path: "/auth/reset-password" })
+        element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/reset-password" })
       }
     );
   }
   return routes;
 }
 
-exports.AuthBranding = AuthBranding;
-exports.AuthContainer = AuthContainer;
-exports.AuthDivider = AuthDivider;
-exports.AuthEmailVerificationStep = AuthEmailVerificationStep;
-exports.AuthErrorBanner = AuthErrorBanner;
-exports.AuthFormField = AuthFormField;
-exports.AuthHeader = AuthHeader;
-exports.AuthLink = AuthLink;
-exports.AuthOAuthButton = AuthOAuthButton;
-exports.AuthOAuthProviders = AuthOAuthProviders;
-exports.AuthPasswordField = AuthPasswordField;
-exports.AuthPasswordStrengthIndicator = AuthPasswordStrengthIndicator;
-exports.AuthSubmitButton = AuthSubmitButton;
-exports.AuthVerificationCodeInput = AuthVerificationCodeInput;
-exports.ForgotPassword = ForgotPassword;
-exports.ForgotPasswordForm = ForgotPasswordForm;
-exports.InsforgeCallback = InsforgeCallback;
-exports.InsforgeProvider = InsforgeProvider;
-exports.OAUTH_PROVIDER_CONFIG = OAUTH_PROVIDER_CONFIG;
-exports.Protect = Protect;
-exports.ResetPassword = ResetPassword;
-exports.ResetPasswordForm = ResetPasswordForm;
-exports.SignIn = SignIn;
-exports.SignInForm = SignInForm;
-exports.SignUp = SignUp;
-exports.SignUpForm = SignUpForm;
-exports.SignedIn = SignedIn;
-exports.SignedOut = SignedOut;
-exports.UserButton = UserButton;
-exports.VerifyEmail = VerifyEmail;
-exports.VerifyEmailStatus = VerifyEmailStatus;
-exports.checkPasswordStrength = checkPasswordStrength;
-exports.cn = cn;
-exports.createPasswordSchema = createPasswordSchema;
-exports.emailSchema = emailSchema;
-exports.getAllProviderConfigs = getAllProviderConfigs;
-exports.getInsforgeRoutes = getInsforgeRoutes;
-exports.getProviderConfig = getProviderConfig;
-exports.passwordSchema = passwordSchema;
-exports.useAuth = useAuth;
-exports.useInsforge = useInsforge;
-exports.usePublicAuthConfig = usePublicAuthConfig;
-exports.useUser = useUser;
-exports.validateEmail = validateEmail;
-exports.validatePassword = validatePassword;
-exports.validatePasswordStrength = validatePasswordStrength;
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, InsforgeProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getInsforgeRoutes, getProviderConfig, passwordSchema, useAuth, useInsforge, usePublicAuthConfig, useUser, validateEmail, validatePassword };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map