@insforge/nextjs 0.7.2 → 0.7.4

package/dist/index.js

@@ -6,7 +6,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
   if (!document.getElementById(styleId)) {
     const style = document.createElement('style');
     style.id = styleId;
-    style.textContent = "/**\n * InsForge Next.js Component Library Styles\n * A standalone CSS file for auth components - no Tailwind required!\n */\n\n/* Font Face Declaration */\n@font-face {\n  font-family: 'Manrope';\n  src: url('./fonts/Manrope-VariableFont_wght.ttf') format('truetype');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* CSS Variables */\n:root {\n  --font-manrope: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n/* Reset and Base Styles */\n.insforge-auth-container * {\n  box-sizing: border-box;\n}\n\n/* Main Container - App handles layout, we just provide the card */\n.insforge-auth-container {\n  width: 100%;\n  max-width: 400px;\n  background: white;\n}\n\n.insforge-branding {\n  background: #FAFAFA;\n  padding: 8px 8px 16px 8px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n\n.insforge-branding-text {\n  color: #000;\n  font-family: var(--font-manrope);\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n/* Form Card */\n.insforge-auth-card {\n  width: 100%;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);\n}\n\n.insforge-auth-content {\n  padding: 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: 24px;\n}\n\n/* Header */\n.insforge-auth-header {\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: start;\n  gap: 8px;\n}\n\n.insforge-auth-title {\n  color: #000;\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 32px; /* 133.333% */\n}\n\n.insforge-auth-subtitle {\n  color: #828282;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 171.429% */\n}\n\n/* Error Banner */\n.insforge-error-banner {\n  display: flex;\n  padding: 8px 8px 8px 12px;\n  margin-bottom: 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 4px;\n  border: 2px solid #DC2626;\n  background: #FEF2F2;\n  color: #DC2626;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}\n\n.insforge-error-icon {\n  color: #EF4444;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n}\n\n/* Form Elements */\n.insforge-form {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: 24px;\n}\n\n.insforge-form-group {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: 4px;\n}\n\n.insforge-form-label-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.insforge-form-label {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n.insforge-form-link {\n  color: #828282;\n  text-align: right;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n.insforge-form-link:hover {\n  color: #828282;\n  text-decoration: underline;\n}\n\n/* Input Container for Password (with icon) */\n.insforge-input-wrapper {\n  position: relative;\n}\n\n.insforge-input {\n  width: 100%;\n  display: flex;\n  padding: 8px 8px 10px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 4px;\n  border: 1px solid #BCBCBC;\n  background: #FFF;\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n.insforge-input::placeholder {\n  color: #A6A6A6;\n}\n\n.insforge-input:focus {\n  outline: none;\n}\n\n.insforge-input-with-icon {\n  padding-right: 3rem;\n}\n\n.insforge-input-icon-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: transparent;\n  border: none;\n  color: #A6A6A6;\n  cursor: pointer;\n  transition: color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.insforge-input-icon-btn:hover {\n  color: #6b7280;\n}\n\n/* Primary Button */\n.insforge-btn-primary {\n  border-radius: 4px;\n  background: #000;\n  width: 100%;\n  display: flex;\n  margin: 16px 0 0 0;\n  padding: 8px 16px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  align-self: stretch;\n  color: #FFF;\n  font-family: Manrope;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  border: none;\n  cursor: pointer;\n}\n\n.insforge-btn-primary:hover {\n  background: #303030;\n}\n\n.insforge-btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.insforge-btn-primary .insforge-btn-loader {\n  display: none;\n  animation: insforge-spin 1s linear infinite;\n}\n\n.insforge-btn-primary[data-loading] .insforge-btn-loader {\n  display: block;\n}\n\n.insforge-btn-primary .insforge-btn-check {\n  display: none;\n}\n\n.insforge-btn-primary[data-confirmed] .insforge-btn-check {\n  display: block;\n}\n\n/* Text Link Section */\n.insforge-text-center {\n  text-align: center;\n  color: #828282;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n.insforge-link-primary {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n}\n\n/* Divider */\n.insforge-divider {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n  align-self: stretch;\n}\n\n.insforge-divider::before,\n.insforge-divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #C6C6C6;\n}\n\n.insforge-divider-text {\n  color: #C6C6C6;\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n/* OAuth Section */\n.insforge-oauth-container {\n  display: grid;\n  gap: 12px;\n  width: 100%;\n}\n\n/* ============================================================================\n   SMART OAUTH GRID LAYOUT SYSTEM\n   Pattern: 1→1x1, 2→1x2, 3→1x3, 4→2x2, 5+→auto (3 per row, last row centered)\n   ============================================================================ */\n\n/* 1 provider: single column, full width - displays \"Continue with Provider\" */\n.insforge-oauth-container[data-provider-count=\"1\"] {\n  grid-template-columns: 1fr;\n}\n\n/* 2 providers: two columns - displays \"Provider\" */\n.insforge-oauth-container[data-provider-count=\"2\"] {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n/* 3 providers: three columns - icon only */\n.insforge-oauth-container[data-provider-count=\"3\"] {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n/* 4 providers: 2x2 grid - displays \"Provider\" */\n.insforge-oauth-container[data-provider-count=\"4\"] {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n/* 5+ providers: Universal 6-column grid system\n   - Grid columns managed by OAuthProviderList component via inline styles\n   - This provides precise control over button positioning */\n.insforge-oauth-container:not([data-provider-count=\"1\"]):not([data-provider-count=\"2\"]):not([data-provider-count=\"3\"]):not([data-provider-count=\"4\"]) {\n  grid-template-columns: repeat(6, 1fr);\n}\n\n/* OAuth Button */\n.insforge-oauth-btn {\n  display: flex;\n  width: 100%;\n  height: 36px;\n  padding: 8px 12px;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n  border-radius: 6px;\n  border: 1px solid #E4E4E7;\n  background: #FFF;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);\n  color: #09090B;\n  text-align: center;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n/* Full mode: show icon + \"Continue with Provider\" */\n.insforge-oauth-btn[data-display-mode=\"full\"] {\n  justify-content: center;\n}\n\n/* Short mode: show icon + \"Provider\" */\n.insforge-oauth-btn[data-display-mode=\"short\"] {\n  justify-content: center;\n  padding: 8px;\n  gap: 8px;\n}\n\n/* Icon only mode: show only icon */\n.insforge-oauth-btn[data-display-mode=\"icon\"] {\n  justify-content: center;\n  gap: 0;\n}\n\n.insforge-oauth-btn[data-display-mode=\"icon\"] .insforge-oauth-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.insforge-oauth-btn:hover {\n  background: #f9fafb;\n  border-color: #9ca3af;\n}\n\n.insforge-oauth-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.insforge-oauth-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.insforge-oauth-loader {\n  display: none;\n  animation: insforge-spin 1s linear infinite;\n}\n\n.insforge-oauth-btn[data-loading] .insforge-oauth-icon {\n  display: none;\n}\n\n.insforge-oauth-btn[data-loading] .insforge-oauth-loader {\n  display: block;\n}\n\n/* Spin Animation */\n@keyframes insforge-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* UserButton Styles */\n.insforge-user-button-container {\n  position: relative;\n  display: inline-block;\n}\n\n.insforge-user-button {\n  padding: 0.25rem;\n  background: transparent;\n  border: none;\n  border-radius: 9999px;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n\n.insforge-user-button:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.insforge-user-button-detailed {\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n}\n\n.insforge-user-button-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n.insforge-user-button-name {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.25rem;\n  text-align: left;\n}\n\n.insforge-user-button-email {\n  font-size: 0.75rem;\n  color: #6b7280;\n  line-height: 1rem;\n  text-align: left;\n}\n\n.insforge-user-avatar {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n\n.insforge-user-avatar-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  background: #3b82f6;\n  color: white;\n  font-weight: 600;\n  font-size: 0.875rem;\n  border-radius: 9999px;\n}\n\n.insforge-user-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 0.5rem;\n  min-width: 10rem;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 0.5rem;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  z-index: 50;\n  overflow: hidden;\n  padding: 0.25rem;\n}\n\n.insforge-sign-out-button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  color: #dc2626;\n  background: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background 0.2s;\n  text-align: left;\n}\n\n.insforge-sign-out-button:hover {\n  background: #fef2f2;\n}\n\n/* Loading State */\n.insforge-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2rem;\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n/* Password Strength Indicator */\n.insforge-password-strength {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 0.5rem;\n}\n\n.insforge-password-requirement {\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.insforge-password-check {\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 9999px;\n  display: flex;\n  border-width: 2px;\n  border-style: solid;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease-in-out;\n  background-color: transparent;\n  border-color: #a3a3a3;\n  flex-shrink: 0;\n}\n\n.insforge-password-check-valid {\n  background-color: #22c55e;\n  border-color: transparent;\n}\n\n.insforge-password-check-icon {\n  color: #fff;\n  stroke-width: 3;\n}\n\n.insforge-password-requirement-label {\n  color:#000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n/* Verification Code Input */\n.insforge-verification-code-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n}\n\n.insforge-verification-instructions {\n  color: #525252;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n.insforge-verification-instructions > span {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.insforge-verification-code-inputs {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  justify-content: center;\n  align-items: center;\n}\n\n.insforge-verification-code-input {\n  width: 100%;\n  height: 48px;\n  padding: 8px 12px;\n  border-radius: 4px;\n  border: 1px solid #E0E0E0;\n  background: #FFF;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  line-height: 20px;\n  font-weight: 600;\n  font-family: var(--font-manrope);\n  color: #000;\n  transition: all 0.2s ease-in-out;\n  outline: none;\n}\n\n.insforge-verification-code-input:focus {\n  border-color: #000;\n  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n}\n\n.insforge-verification-code-input:disabled {\n  background-color: #F5F5F5;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Verification Instructions */\n.insforge-verification-instructions {\n  color: #4F4F4F;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n  margin-bottom: 8px;\n}\n\n.insforge-verification-email {\n  color: #000;\n  font-weight: 600;\n}\n\n.insforge-resend-code {\n  color: #525252;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n  text-align: center;\n}\n\n.insforge-resend-link {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n}\n\n.insforge-resend-link:hover {\n  text-decoration: underline;\n}\n\n.insforge-resend-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n  .insforge-auth-card {\n    padding: 2rem 1.5rem;\n  }\n\n  .insforge-auth-title {\n    font-size: 1.75rem;\n  }\n\n  .insforge-verification-code-container {\n    gap: 8px;\n  }\n\n  .insforge-verification-code-input {\n    width: 40px;\n    height: 48px;\n    font-size: 20px;\n  }\n}\n\n";
+    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-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-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-200:oklch(92.8% .006 264.531);--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-400:oklch(70.8% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--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-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--leading-normal:1.5;--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-4{margin-top:calc(var(--spacing)*4)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.inline-block{display:inline-block}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-\\[18px\\]{height:18px}.min-h-screen{min-height:100vh}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-\\[18px\\]{width:18px}.w-full{width:100%}.max-w-\\[400px\\]{max-width:400px}.min-w-40{min-width:calc(var(--spacing)*40)}.flex-1{flex:1}.flex-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-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.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-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-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-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.bg-\\[\\#FAFAFA\\]{background-color:#fafafa}.bg-black{background-color:var(--color-black)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-50{background-color:var(--color-red-50)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.stroke-\\[3\\]{stroke-width:3px}.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)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.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-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--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)}.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-gray-500{color:var(--color-gray-500)}.text-gray-900{color:var(--color-gray-900)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.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-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}}.focus\\:border-black:focus{border-color:var(--color-black)}.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\\: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\\:opacity-50:disabled{opacity:.5}.disabled\\:opacity-60:disabled{opacity:.6}}@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-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)}}";
     if (document.head) {
       document.head.appendChild(style);
     }
@@ -67,6 +67,7 @@ __export(src_exports, {
   SignedIn: () => SignedIn,
   SignedOut: () => SignedOut,
   UserButton: () => UserButton,
+  cn: () => cn,
   getProviderConfig: () => getProviderConfig,
   getProviderName: () => getProviderName,
   isProviderSupported: () => isProviderSupported,
@@ -166,7 +167,7 @@ function InsforgeProvider({
           id: userResult.data.user.id,
           email: userResult.data.user.email,
           name: userResult.data.profile?.nickname || "",
-          avatarUrl: userResult.data.profile?.avatar_url || ""
+          avatarUrl: userResult.data.profile?.avatarUrl || ""
         };
         setUser(userData);
         setSession({
@@ -225,7 +226,7 @@ function InsforgeProvider({
           id: userResult.data.user.id,
           email: userResult.data.user.email,
           name: userResult.data.profile?.nickname || "",
-          avatarUrl: userResult.data.profile?.avatar_url || ""
+          avatarUrl: userResult.data.profile?.avatarUrl || ""
         };
         const sessionData = {
           userId: userResult.data.user.id,
@@ -321,7 +322,7 @@ function InsforgeProvider({
       if (!user) throw new Error("No user signed in");
       const result = await insforge.auth.setProfile({
         nickname: data.name || "",
-        avatar_url: data.avatarUrl || ""
+        avatarUrl: data.avatarUrl || ""
       });
       if (result.data) {
         const updatedUser = { ...user, ...result.data };
@@ -465,12 +466,22 @@ function useEmailAuthConfig() {
   return { config, isLoaded };
 }
 
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
 // src/components/auth/AuthBranding.tsx
 var import_link = __toESM(require("next/link"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function AuthBranding({ text = "Secured by", href = "https://insforge.dev" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "insforge-branding", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "insforge-branding-text", children: text }),
+function AuthBranding({ text = "Secured by", href = "https://insforge.dev", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn(
+    "bg-[#FAFAFA] px-2 py-4 flex flex-row justify-center items-center gap-1",
+    className
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-black font-manrope", children: text }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_link.default, { href, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "83", height: "20", viewBox: "0 0 83 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "path",
@@ -531,43 +542,98 @@ function AuthBranding({ text = "Secured by", href = "https://insforge.dev" }) {
 
 // src/components/auth/AuthContainer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function AuthContainer({ children, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "insforge-auth-container", style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "insforge-auth-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "insforge-auth-content", children }),
+function AuthContainer({
+  children,
+  style,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("w-full max-w-[400px]", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full rounded-xl overflow-hidden shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bg-white p-6 flex flex-col justify-center items-stretch gap-6", children }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthBranding, {})
   ] }) });
 }
 
 // src/components/auth/AuthHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function AuthHeader({ title, subtitle }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "insforge-auth-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { className: "insforge-auth-title", children: title }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "insforge-auth-subtitle", children: subtitle })
+function AuthHeader({
+  title,
+  subtitle,
+  className,
+  titleClassName,
+  subtitleClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn(
+    "flex flex-col justify-start items-start gap-2",
+    className
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { className: cn(
+      "text-2xl font-semibold text-black leading-8",
+      titleClassName
+    ), children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cn(
+      "text-sm font-normal text-[#828282] leading-6",
+      subtitleClassName
+    ), children: subtitle })
   ] });
 }
 
 // src/components/auth/AuthErrorBanner.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function AuthErrorBanner({ error }) {
+function AuthErrorBanner({ error, className }) {
   if (!error) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "insforge-error-banner", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.AlertTriangle, { className: "insforge-error-icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: error })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.AlertTriangle, { className: "w-6 h-6 text-red-500 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm text-red-600 flex-1", children: error })
+      ]
+    }
+  );
 }
 
 // src/components/auth/AuthFormField.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function AuthFormField({ label, id, className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "insforge-form-group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: id, className: "insforge-form-label", children: label }),
+function AuthFormField({
+  label,
+  id,
+  className = "",
+  labelClassName,
+  inputClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn(
+    "flex flex-col justify-center items-stretch gap-1",
+    className
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "text-sm font-normal text-black leading-6",
+          labelClassName
+        ),
+        children: label
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
         id,
-        className: `insforge-input ${className}`,
+        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",
+          inputClassName
+        ),
         ...props
       }
     )
@@ -625,20 +691,25 @@ function validatePasswordStrength(password, config) {
 }
 function AuthPasswordStrengthIndicator({
   password,
-  config
+  config,
+  className
 }) {
   const requirements = createRequirements(config);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "insforge-password-strength", children: requirements.map((requirement, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("flex flex-col gap-1 mt-2", className), children: requirements.map((requirement, index) => {
     const isValid = requirement.test(password);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "insforge-password-requirement", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "h-6 flex items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: `insforge-password-check ${isValid ? "insforge-password-check-valid" : ""}`,
-          children: isValid && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { className: "insforge-password-check-icon", size: 12 })
+          className: cn(
+            "w-5 h-5 rounded-full flex items-center justify-center transition-all duration-200",
+            "border-2 flex-shrink-0",
+            isValid ? "bg-green-500 border-transparent" : "bg-transparent border-neutral-400"
+          ),
+          children: isValid && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { className: "text-white stroke-[3]", size: 12 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "insforge-password-requirement-label", children: requirement.label })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-normal text-black leading-6", children: requirement.label })
     ] }, index);
   }) });
 }
@@ -653,6 +724,8 @@ function AuthPasswordField({
   forgotPasswordLink,
   value,
   className = "",
+  labelClassName,
+  inputClassName,
   onFocus,
   ...props
 }) {
@@ -664,42 +737,75 @@ function AuthPasswordField({
     }
     onFocus?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "insforge-form-group", children: [
-    (label || forgotPasswordLink) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "insforge-form-label-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: id, className: "insforge-form-label", style: { margin: 0 }, children: label }),
-      forgotPasswordLink && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: forgotPasswordLink.href, className: "insforge-form-link", children: forgotPasswordLink.text || "Forget Password?" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "insforge-input-wrapper", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "input",
-        {
-          id,
-          type: showPassword ? "text" : "password",
-          className: `insforge-input insforge-input-with-icon ${className}`,
-          value,
-          onFocus: handleFocus,
-          ...props
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col justify-center items-stretch gap-1",
+        className
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowPassword(!showPassword),
-          className: "insforge-input-icon-btn",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.EyeOff, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Eye, { size: 20 })
-        }
-      )
-    ] }),
-    showStrengthIndicator && showStrength && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      AuthPasswordStrengthIndicator,
-      {
-        password: String(value || ""),
-        config: emailAuthConfig
-      }
-    )
-  ] });
+      children: [
+        (label || forgotPasswordLink) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "label",
+            {
+              htmlFor: id,
+              className: cn(
+                "text-sm font-normal text-black leading-6",
+                labelClassName
+              ),
+              children: label
+            }
+          ),
+          forgotPasswordLink && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "a",
+            {
+              href: forgotPasswordLink.href,
+              className: "text-right text-sm font-normal text-[#737373] leading-6",
+              children: forgotPasswordLink.text || "Forget Password?"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.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",
+                inputClassName
+              ),
+              value,
+              onFocus: handleFocus,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.EyeOff, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Eye, { size: 20 })
+            }
+          )
+        ] }),
+        showStrengthIndicator && showStrength && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          AuthPasswordStrengthIndicator,
+          {
+            password: String(value || ""),
+            config: emailAuthConfig
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/auth/AuthSubmitButton.tsx
@@ -710,20 +816,27 @@ function AuthSubmitButton({
   isLoading = false,
   confirmed = false,
   disabled = false,
-  style
+  style,
+  className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "button",
     {
       type: "submit",
-      className: "insforge-btn-primary",
+      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
+      ),
       style,
       disabled: disabled || isLoading || confirmed,
-      "data-loading": isLoading || void 0,
-      "data-confirmed": confirmed || void 0,
       children: [
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "insforge-btn-loader", size: 20 }),
-        confirmed && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CircleCheck, { className: "insforge-btn-check", size: 20 }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "w-5 h-5 animate-spin", size: 20 }),
+        confirmed && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CircleCheck, { className: "w-5 h-5", size: 20 }),
         children
       ]
     }
@@ -732,17 +845,35 @@ function AuthSubmitButton({
 
 // src/components/auth/AuthDivider.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function AuthDivider({ text = "or" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "insforge-divider", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "insforge-divider-text", children: text }) });
+function AuthDivider({ text = "or", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-semibold font-manrope text-[#A3A3A3] leading-normal", children: text }) });
 }
 
 // src/components/auth/AuthLink.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function AuthLink({ text, linkText, href }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "insforge-text-center", children: [
+function AuthLink({ text, linkText, href, className, linkClassName }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: cn(
+    "text-center text-sm font-normal text-[#828282] leading-6",
+    className
+  ), children: [
     text,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { href, className: "insforge-link-primary", children: linkText })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "a",
+      {
+        href,
+        className: cn(
+          "text-sm font-medium text-black leading-6",
+          linkClassName
+        ),
+        children: linkText
+      }
+    )
   ] });
 }
 
@@ -903,7 +1034,8 @@ function AuthOAuthButton({
   disabled,
   loading,
   displayMode = "full",
-  style
+  style,
+  className
 }) {
   const config = getProviderConfig(provider);
   if (!config) {
@@ -920,15 +1052,25 @@ function AuthOAuthButton({
     {
       type: "button",
       onClick: () => onClick(provider),
-      className: "insforge-oauth-btn",
+      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
+      ),
       disabled: disabled || loading,
-      "data-loading": loading || void 0,
-      "data-display-mode": displayMode,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Loader2, { className: "insforge-oauth-loader", size: 18 }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "insforge-oauth-icon", children: config.svg }),
-        getButtonText() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "insforge-oauth-text", children: getButtonText() })
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Loader2, { className: "w-[18px] h-[18px] animate-spin", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex items-center justify-center flex-shrink-0", children: config.svg }),
+        getButtonText() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: getButtonText() })
       ]
     }
   );
@@ -940,7 +1082,8 @@ function AuthOAuthProviders({
   providers,
   onClick,
   disabled,
-  loading
+  loading,
+  className
 }) {
   if (!providers || providers.length === 0) {
     return null;
@@ -975,7 +1118,18 @@ function AuthOAuthProviders({
       return { gridColumn: "span 2" };
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "insforge-oauth-container", "data-provider-count": count, children: providers.map((provider, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const getGridClass = () => {
+    if (count === 1) return "grid-cols-1";
+    if (count === 2) return "grid-cols-2";
+    if (count === 3) return "grid-cols-3";
+    if (count === 4) return "grid-cols-2";
+    return "grid-cols-6";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(
+    "grid gap-3 w-full",
+    getGridClass(),
+    className
+  ), children: providers.map((provider, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     AuthOAuthButton,
     {
       provider,
@@ -997,7 +1151,9 @@ function AuthVerificationCodeInput({
   value,
   email,
   onChange,
-  disabled = false
+  disabled = false,
+  className,
+  inputClassName
 }) {
   const inputRefs = (0, import_react5.useRef)([]);
   const handleChange = (index, digit) => {
@@ -1032,13 +1188,17 @@ function AuthVerificationCodeInput({
       inputRefs.current[length - 1]?.focus();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "insforge-verification-code-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "insforge-verification-instructions", children: [
-      "We've sent a verification code to your inbox at ",
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: email }),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn(
+    "flex flex-col justify-center items-center gap-6",
+    className
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm font-normal text-[#525252] leading-5", children: [
+      "We've sent a verification code to your inbox at",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-semibold text-black leading-5", children: email }),
       ". Enter it below to proceed."
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "insforge-verification-code-inputs", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-row gap-3 justify-center items-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         ref: (el) => {
@@ -1052,7 +1212,14 @@ function AuthVerificationCodeInput({
         onKeyDown: (e) => handleKeyDown(index, e),
         onPaste: handlePaste,
         disabled,
-        className: "insforge-verification-code-input",
+        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",
+          inputClassName
+        ),
         autoComplete: "one-time-code"
       },
       index
@@ -1088,7 +1255,9 @@ function SignIn({
   const [password, setPassword] = (0, import_react6.useState)("");
   const [error, setError] = (0, import_react6.useState)("");
   const [loading, setLoading] = (0, import_react6.useState)(false);
-  const [oauthLoading, setOauthLoading] = (0, import_react6.useState)(null);
+  const [oauthLoading, setOauthLoading] = (0, import_react6.useState)(
+    null
+  );
   const insforge = (0, import_react6.useState)(() => (0, import_sdk4.createClient)({ baseUrl }))[0];
   async function handleSubmit(e) {
     e.preventDefault();
@@ -1128,50 +1297,58 @@ function SignIn({
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AuthContainer, { style: appearance.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AuthHeader, { title, subtitle }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AuthErrorBanner, { error }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit: handleSubmit, className: "insforge-form", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        AuthFormField,
-        {
-          id: "email",
-          type: "email",
-          label: emailLabel,
-          placeholder: emailPlaceholder,
-          value: email,
-          onChange: (e) => setEmail(e.target.value),
-          required: true,
-          autoComplete: "email"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        AuthPasswordField,
-        {
-          id: "password",
-          label: passwordLabel,
-          placeholder: passwordPlaceholder,
-          value: password,
-          onChange: (e) => setPassword(e.target.value),
-          required: true,
-          autoComplete: "current-password",
-          emailAuthConfig: emailAuthConfig || {
-            requireEmailVerification: false,
-            passwordMinLength: 6,
-            requireNumber: false,
-            requireLowercase: false,
-            requireUppercase: false,
-            requireSpecialChar: false
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        AuthSubmitButton,
-        {
-          isLoading: loading,
-          disabled: loading || oauthLoading !== null,
-          style: appearance.button,
-          children: loading ? loadingButtonText : submitButtonText
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        noValidate: true,
+        className: "flex flex-col items-stretch justify-center gap-6",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            AuthFormField,
+            {
+              id: "email",
+              type: "email",
+              label: emailLabel,
+              placeholder: emailPlaceholder,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              autoComplete: "email"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            AuthPasswordField,
+            {
+              id: "password",
+              label: passwordLabel,
+              placeholder: passwordPlaceholder,
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              required: true,
+              autoComplete: "current-password",
+              emailAuthConfig: emailAuthConfig || {
+                requireEmailVerification: false,
+                passwordMinLength: 6,
+                requireNumber: false,
+                requireLowercase: false,
+                requireUppercase: false,
+                requireSpecialChar: false
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            AuthSubmitButton,
+            {
+              isLoading: loading,
+              disabled: loading || oauthLoading !== null,
+              style: appearance.button,
+              children: loading ? loadingButtonText : submitButtonText
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
     oauthProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AuthDivider, { text: dividerText }),
@@ -1220,7 +1397,9 @@ function SignUp({
   const [password, setPassword] = (0, import_react7.useState)("");
   const [error, setError] = (0, import_react7.useState)("");
   const [loading, setLoading] = (0, import_react7.useState)(false);
-  const [oauthLoading, setOauthLoading] = (0, import_react7.useState)(null);
+  const [oauthLoading, setOauthLoading] = (0, import_react7.useState)(
+    null
+  );
   const insforge = (0, import_react7.useState)(() => (0, import_sdk5.createClient)({ baseUrl }))[0];
   async function handleCredentialsSubmit(e) {
     e.preventDefault();
@@ -1268,60 +1447,61 @@ function SignUp({
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(AuthContainer, { style: appearance.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AuthHeader, { title, subtitle }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AuthErrorBanner, { error }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("form", { onSubmit: handleCredentialsSubmit, className: "insforge-form", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        AuthFormField,
-        {
-          id: "email",
-          type: "email",
-          label: emailLabel,
-          placeholder: emailPlaceholder,
-          value: email,
-          onChange: (e) => setEmail(e.target.value),
-          required: true,
-          autoComplete: "email"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        AuthPasswordField,
-        {
-          id: "password",
-          label: passwordLabel,
-          placeholder: passwordPlaceholder,
-          value: password,
-          onChange: (e) => setPassword(e.target.value),
-          required: true,
-          minLength: emailAuthConfig?.passwordMinLength ?? 8,
-          autoComplete: "new-password",
-          showStrengthIndicator: true,
-          emailAuthConfig: emailAuthConfig || {
-            requireEmailVerification: false,
-            passwordMinLength: 6,
-            requireNumber: false,
-            requireLowercase: false,
-            requireUppercase: false,
-            requireSpecialChar: false
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        AuthSubmitButton,
-        {
-          isLoading: loading,
-          disabled: loading || oauthLoading !== null,
-          style: appearance.button,
-          children: loading ? loadingButtonText : submitButtonText
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      AuthLink,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "form",
       {
-        text: signInText,
-        linkText: signInLinkText,
-        href: signInUrl
+        onSubmit: handleCredentialsSubmit,
+        noValidate: true,
+        className: "flex flex-col items-stretch justify-center gap-6",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            AuthFormField,
+            {
+              id: "email",
+              type: "email",
+              label: emailLabel,
+              placeholder: emailPlaceholder,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              autoComplete: "email"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            AuthPasswordField,
+            {
+              id: "password",
+              label: passwordLabel,
+              placeholder: passwordPlaceholder,
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              required: true,
+              minLength: emailAuthConfig?.passwordMinLength ?? 8,
+              autoComplete: "new-password",
+              showStrengthIndicator: true,
+              emailAuthConfig: emailAuthConfig || {
+                requireEmailVerification: false,
+                passwordMinLength: 6,
+                requireNumber: false,
+                requireLowercase: false,
+                requireUppercase: false,
+                requireSpecialChar: false
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            AuthSubmitButton,
+            {
+              isLoading: loading,
+              disabled: loading || oauthLoading !== null,
+              style: appearance.button,
+              children: loading ? loadingButtonText : submitButtonText
+            }
+          )
+        ]
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
     oauthProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AuthDivider, { text: dividerText }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -1344,7 +1524,8 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 function UserButton({
   afterSignOutUrl = "/",
   mode = "detailed",
-  appearance = {}
+  appearance = {},
+  className
 }) {
   const { user, signOut } = useInsforge();
   const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
@@ -1369,29 +1550,69 @@ function UserButton({
   }
   if (!user) return null;
   const initials = user.nickname ? user.nickname.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
-  const avatarUrl = user.avatar_url;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "insforge-user-button-container", ref: dropdownRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("relative inline-block", className), ref: dropdownRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "button",
       {
-        className: `insforge-user-button ${mode === "detailed" ? "insforge-user-button-detailed" : ""}`,
+        className: cn(
+          // Base styles
+          "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",
+          // Detailed mode styles
+          mode === "detailed" && "rounded-lg p-2",
+          // User override
+          appearance.buttonClassName
+        ),
         onClick: () => setIsOpen(!isOpen),
         style: appearance.button,
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         children: [
-          avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: avatarUrl, alt: user.email, className: "insforge-user-avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "insforge-user-avatar-placeholder", children: initials }),
-          mode === "detailed" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "insforge-user-button-info", children: [
-            user.nickname && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "insforge-user-button-name", children: user.nickname }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "insforge-user-button-email", children: user.email })
+          user.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "img",
+            {
+              src: user.avatarUrl,
+              alt: user.email,
+              className: "w-10 h-10 rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-500 text-white font-semibold text-sm rounded-full", children: initials }),
+          mode === "detailed" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [
+            user.nickname && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(
+              "text-sm font-semibold text-gray-900 leading-5 text-left",
+              appearance.nameClassName
+            ), children: user.nickname }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(
+              "text-xs text-gray-500 leading-4 text-left",
+              appearance.emailClassName
+            ), children: user.email })
           ] })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "insforge-user-dropdown", style: appearance.dropdown, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { onClick: handleSignOut, className: "insforge-sign-out-button", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.LogOut, { className: "w-5 h-5" }),
-      "Sign out"
-    ] }) })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.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
+        ),
+        style: appearance.dropdown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.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__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.LogOut, { className: "w-5 h-5" }),
+              "Sign out"
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 
@@ -1468,6 +1689,7 @@ function Protect({
   SignedIn,
   SignedOut,
   UserButton,
+  cn,
   getProviderConfig,
   getProviderName,
   isProviderSupported,