@asgardeo/vue 0.3.9 → 0.4.0

package/dist/index.js

@@ -6,6 +6,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError3,
   extractUserClaimsFromIdToken as extractUserClaimsFromIdToken2,
+  generateFlattenedUserProfile as generateFlattenedUserProfile2,
   hasAuthParamsInUrl,
   hasCalledForThisInstanceInUrl,
   Platform as Platform2
@@ -857,17 +858,13 @@ import {
 var UserProvider = defineComponent7({
   name: "UserProvider",
   props: {
-    /** The flattened profile (top-level attribute map). */
-    flattenedProfile: { default: null, type: Object },
-    /** Optional callback run after the profile is updated locally. */
+    /** Callback to sync a successfully-saved profile back up to AsgardeoProvider. */
     onUpdateProfile: { default: void 0, type: Function },
     /** The full user profile data (nested + flat + schemas). */
     profile: { default: null, type: Object },
     /** Re-fetch the user profile from the server. */
     revalidateProfile: { default: async () => {
     }, type: Function },
-    /** The SCIM2 schemas describing user profile attributes. */
-    schemas: { default: null, type: Array },
     /** Update the user profile via SCIM2 PATCH. */
     updateProfile: {
       default: void 0,
@@ -875,11 +872,13 @@ var UserProvider = defineComponent7({
     }
   },
   setup(props, { slots }) {
-    const flattenedProfileRef = computed5(() => props.flattenedProfile);
     const profileRef = computed5(() => props.profile);
-    const schemasRef = computed5(() => props.schemas);
+    const flattenedProfileRef = computed5(() => props.profile?.flattenedProfile ?? null);
+    const schemasRef = computed5(() => props.profile?.schemas ?? null);
     const context = {
       flattenedProfile: flattenedProfileRef,
+      onUpdateProfile: props.onUpdateProfile ?? (() => {
+      }),
       profile: profileRef,
       revalidateProfile: props.revalidateProfile,
       schemas: schemasRef,
@@ -1627,8 +1626,6 @@ var AsgardeoProvider = defineComponent8({
     const currentOrganization = shallowRef(null);
     const myOrganizations = shallowRef([]);
     const userProfile = shallowRef(null);
-    const flattenedProfile = shallowRef(null);
-    const schemas = shallowRef([]);
     const resolvedBaseUrl = ref7(props.baseUrl);
     let isUpdatingSession = false;
     let signInCheckInterval;
@@ -1665,6 +1662,12 @@ var AsgardeoProvider = defineComponent8({
         if (config.platform === Platform2.AsgardeoV2) {
           const claims = extractUserClaimsFromIdToken2(decodedToken);
           user.value = claims;
+          const profileData = {
+            flattenedProfile: claims,
+            profile: claims,
+            schemas: []
+          };
+          userProfile.value = profileData;
         } else {
           try {
             const fetchedUser = await asgardeo.getUser({ baseUrl });
@@ -1684,8 +1687,6 @@ var AsgardeoProvider = defineComponent8({
           try {
             const profileData = await asgardeo.getUserProfile({ baseUrl });
             userProfile.value = profileData;
-            flattenedProfile.value = profileData.flattenedProfile || null;
-            schemas.value = profileData.schemas || [];
           } catch {
           }
         }
@@ -1905,19 +1906,42 @@ var AsgardeoProvider = defineComponent8({
                 default: () => h8(
                   UserProvider_default,
                   {
-                    flattenedProfile: flattenedProfile.value,
+                    onUpdateProfile: (updatedUser) => {
+                      user.value = updatedUser;
+                      userProfile.value = {
+                        flattenedProfile: generateFlattenedUserProfile2(
+                          updatedUser,
+                          userProfile.value?.schemas
+                        ),
+                        profile: updatedUser,
+                        schemas: userProfile.value?.schemas ?? []
+                      };
+                    },
                     profile: userProfile.value,
                     revalidateProfile: async () => {
-                      const baseUrl = resolvedBaseUrl.value;
+                      const revalConfig = buildConfig();
+                      if (revalConfig.platform === Platform2.AsgardeoV2) {
+                        try {
+                          const decodedToken = await asgardeo.getDecodedIdToken();
+                          const claims = extractUserClaimsFromIdToken2(decodedToken);
+                          user.value = claims;
+                          userProfile.value = {
+                            flattenedProfile: claims,
+                            profile: claims,
+                            schemas: []
+                          };
+                        } catch {
+                        }
+                        return;
+                      }
                       try {
-                        const profileData = await asgardeo.getUserProfile({ baseUrl });
+                        const profileData = await asgardeo.getUserProfile({
+                          baseUrl: resolvedBaseUrl.value
+                        });
                         userProfile.value = profileData;
-                        flattenedProfile.value = profileData.flattenedProfile || null;
-                        schemas.value = profileData.schemas || [];
                       } catch {
                       }
-                    },
-                    schemas: schemas.value
+                    }
                   },
                   {
                     default: () => h8(
@@ -2664,68 +2688,90 @@ var USER_DROPDOWN_CSS = `
   font-family: var(--asgardeo-typography-fontFamily);
 }
 
-/* Trigger ---------------------------------------------------- */
+/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__trigger {
   display: inline-flex;
   align-items: center;
-  gap: calc(var(--asgardeo-spacing-unit) * 0.75);
-  padding: calc(var(--asgardeo-spacing-unit) * 0.5) calc(var(--asgardeo-spacing-unit) * 1)
-    calc(var(--asgardeo-spacing-unit) * 0.5) calc(var(--asgardeo-spacing-unit) * 0.5);
+  gap: calc(var(--asgardeo-spacing-unit) * 0.5);
+  padding: 3px;
   background: none;
-  border: 1px solid var(--asgardeo-color-border);
-  border-radius: 9999px;
+  border: 2px solid transparent;
+  border-radius: var(--asgardeo-border-radius-full);
   cursor: pointer;
   color: var(--asgardeo-color-text-primary);
-  font-family: var(--asgardeo-typography-fontFamily);
-  font-size: var(--asgardeo-typography-fontSize-md);
   transition:
-    background-color var(--asgardeo-transition-fast),
     border-color var(--asgardeo-transition-fast),
     box-shadow var(--asgardeo-transition-fast);
   box-sizing: border-box;
+  outline: none;
 }
 
 .asgardeo-user-dropdown__trigger:hover {
-  background-color: var(--asgardeo-color-action-hover);
   border-color: var(--asgardeo-color-primary-main);
 }
 
+.asgardeo-user-dropdown__trigger--open {
+  border-color: var(--asgardeo-color-primary-main);
+  box-shadow: 0 0 0 3px var(--asgardeo-focus-ring-color);
+}
+
 .asgardeo-user-dropdown__trigger:focus-visible {
-  outline: none;
+  border-color: var(--asgardeo-color-primary-main);
   box-shadow: 0 0 0 var(--asgardeo-focus-ring-width) var(--asgardeo-focus-ring-color);
 }
 
-/* Avatar ---------------------------------------------------- */
+/* \u2500\u2500 Trigger avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__avatar {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--asgardeo-spacing-unit) * 3);
-  height: calc(var(--asgardeo-spacing-unit) * 3);
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
-  background-color: var(--asgardeo-color-primary-main);
-  color: var(--asgardeo-color-primary-contrastText);
+  color: #ffffff;
   flex-shrink: 0;
   font-size: var(--asgardeo-typography-fontSize-sm);
-  font-weight: var(--asgardeo-typography-fontWeight-medium);
+  font-weight: var(--asgardeo-typography-fontWeight-semibold);
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* sm \u2014 28 px */
+.asgardeo-user-dropdown__avatar--sm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--asgardeo-typography-fontSize-xs);
 }
 
-/* Name ------------------------------------------------------ */
+/* lg \u2014 38 px */
+.asgardeo-user-dropdown__avatar--lg {
+  width: 38px;
+  height: 38px;
+  font-size: var(--asgardeo-typography-fontSize-md);
+}
 
-.asgardeo-user-dropdown__name {
-  max-width: 140px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+/* \u2500\u2500 Chevron \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.asgardeo-user-dropdown__chevron {
+  display: inline-flex;
+  align-items: center;
+  color: var(--asgardeo-color-text-secondary);
+  transition: transform var(--asgardeo-transition-normal);
+  padding-right: calc(var(--asgardeo-spacing-unit) * 0.25);
+}
+
+.asgardeo-user-dropdown__trigger--open .asgardeo-user-dropdown__chevron {
+  transform: rotate(180deg);
 }
 
-/* Dropdown menu --------------------------------------------- */
+/* \u2500\u2500 Dropdown menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__menu {
   position: absolute;
-  top: calc(100% + calc(var(--asgardeo-spacing-unit) * 0.5));
+  top: calc(100% + calc(var(--asgardeo-spacing-unit) * 0.75));
   right: 0;
   z-index: 1000;
   background-color: var(--asgardeo-color-background-surface);
@@ -2733,20 +2779,141 @@ var USER_DROPDOWN_CSS = `
   border-radius: var(--asgardeo-dropdown-borderRadius);
   box-shadow: var(--asgardeo-dropdown-shadow);
   overflow: hidden;
-  min-width: 160px;
+  min-width: 220px;
   display: flex;
   flex-direction: column;
-  padding: calc(var(--asgardeo-spacing-unit) * 0.5) 0;
+  animation: asgardeo-dropdown-enter var(--asgardeo-transition-fast) ease;
+}
+
+/* Alignment */
+
+.asgardeo-user-dropdown__menu--align-left {
+  right: auto;
+  left: 0;
+}
+
+/* Size: sm */
+
+.asgardeo-user-dropdown__menu--size-sm {
+  min-width: 180px;
+}
+
+.asgardeo-user-dropdown__menu--size-sm .asgardeo-user-dropdown__menu-header {
+  padding: calc(var(--asgardeo-spacing-unit) * 1.25) calc(var(--asgardeo-spacing-unit) * 1.5);
+  gap: calc(var(--asgardeo-spacing-unit) * 1);
+}
+
+.asgardeo-user-dropdown__menu--size-sm .asgardeo-user-dropdown__menu-header-avatar {
+  width: 30px;
+  height: 30px;
+  font-size: var(--asgardeo-typography-fontSize-sm);
+}
+
+.asgardeo-user-dropdown__menu--size-sm .asgardeo-user-dropdown__item {
+  padding: calc(var(--asgardeo-spacing-unit) * 0.75) calc(var(--asgardeo-spacing-unit) * 1.5);
+  font-size: var(--asgardeo-typography-fontSize-xs);
+}
+
+/* Size: lg */
+
+.asgardeo-user-dropdown__menu--size-lg {
+  min-width: 280px;
+}
+
+.asgardeo-user-dropdown__menu--size-lg .asgardeo-user-dropdown__menu-header {
+  padding: calc(var(--asgardeo-spacing-unit) * 2) calc(var(--asgardeo-spacing-unit) * 2);
+  gap: calc(var(--asgardeo-spacing-unit) * 1.5);
+}
+
+.asgardeo-user-dropdown__menu--size-lg .asgardeo-user-dropdown__menu-header-avatar {
+  width: 42px;
+  height: 42px;
+  font-size: var(--asgardeo-typography-fontSize-lg);
+}
+
+.asgardeo-user-dropdown__menu--size-lg .asgardeo-user-dropdown__item {
+  padding: calc(var(--asgardeo-spacing-unit) * 1.25) calc(var(--asgardeo-spacing-unit) * 2);
+  font-size: var(--asgardeo-typography-fontSize-md);
+}
+
+@keyframes asgardeo-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* \u2500\u2500 Menu header (user identity) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.asgardeo-user-dropdown__menu-header {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--asgardeo-spacing-unit) * 1.25);
+  padding: calc(var(--asgardeo-spacing-unit) * 1.5) calc(var(--asgardeo-spacing-unit) * 1.75);
+}
+
+.asgardeo-user-dropdown__menu-header-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  color: #ffffff;
+  flex-shrink: 0;
+  font-size: var(--asgardeo-typography-fontSize-md);
+  font-weight: var(--asgardeo-typography-fontWeight-semibold);
+  line-height: 1;
+  user-select: none;
+}
+
+.asgardeo-user-dropdown__menu-header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.asgardeo-user-dropdown__menu-header-name {
+  font-size: var(--asgardeo-typography-fontSize-sm);
+  font-weight: var(--asgardeo-typography-fontWeight-semibold);
+  color: var(--asgardeo-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--asgardeo-typography-lineHeight-tight);
+}
+
+.asgardeo-user-dropdown__menu-header-subtitle {
+  font-size: var(--asgardeo-typography-fontSize-xs);
+  color: var(--asgardeo-color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--asgardeo-typography-lineHeight-normal);
+}
+
+/* \u2500\u2500 Menu divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.asgardeo-user-dropdown__menu-divider {
+  height: 1px;
+  background-color: var(--asgardeo-color-border);
+  margin: calc(var(--asgardeo-spacing-unit) * 0.5) 0;
+  flex-shrink: 0;
 }
 
-/* Menu items ------------------------------------------------ */
+/* \u2500\u2500 Menu items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__item {
   display: flex;
   align-items: center;
-  gap: calc(var(--asgardeo-spacing-unit) * 0.75);
+  gap: calc(var(--asgardeo-spacing-unit) * 1);
   width: 100%;
-  padding: var(--asgardeo-dropdown-itemPaddingY) var(--asgardeo-dropdown-itemPaddingX);
+  padding: calc(var(--asgardeo-spacing-unit) * 1) calc(var(--asgardeo-spacing-unit) * 1.75);
   background: none;
   border: none;
   cursor: pointer;
@@ -2767,36 +2934,61 @@ var USER_DROPDOWN_CSS = `
   background-color: var(--asgardeo-color-action-focus);
 }
 
-/* Modal overlay ------------------------------------------------ */
+/* Danger variant (sign-out) */
+
+.asgardeo-user-dropdown__item--danger {
+  color: var(--asgardeo-color-error-main);
+}
+
+.asgardeo-user-dropdown__item--danger:hover {
+  background-color: var(--asgardeo-color-error-light);
+}
+
+/* \u2500\u2500 Modal overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(3px);
+  animation: asgardeo-overlay-enter var(--asgardeo-transition-fast) ease;
+}
+
+@keyframes asgardeo-overlay-enter {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
 
-/* Modal content ------------------------------------------------ */
+/* \u2500\u2500 Modal content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__modal-content {
   background: var(--asgardeo-color-background-surface);
-  border-radius: var(--asgardeo-border-radius-medium);
+  border-radius: var(--asgardeo-border-radius-large);
   box-shadow: var(--asgardeo-shadow-large);
-  max-width: 460px;
-  width: 90%;
+  max-width: 480px;
+  width: 92%;
   max-height: 90vh;
   overflow-y: auto;
   position: relative;
+  animation: asgardeo-modal-enter var(--asgardeo-transition-normal) ease;
+}
+
+@keyframes asgardeo-modal-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
-/* Modal close button ------------------------------------------ */
+/* \u2500\u2500 Modal close button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-dropdown__modal-close {
   position: absolute;
@@ -2809,7 +3001,7 @@ var USER_DROPDOWN_CSS = `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--asgardeo-spacing-unit) * 0.5);
+  padding: calc(var(--asgardeo-spacing-unit) * 0.625);
   border-radius: var(--asgardeo-border-radius-small);
   z-index: 10001;
   transition:
@@ -2833,74 +3025,154 @@ var UserDropdown_css_default = USER_DROPDOWN_CSS;
 // src/components/presentation/user-profile/UserProfile.css.ts
 var USER_PROFILE_CSS = `
 /* ============================================================
-   UserProfile
+   UserProfile  (modern redesign)
    ============================================================ */
 
 .asgardeo-user-profile {
   display: flex;
   flex-direction: column;
   min-width: 320px;
-  padding: 0;
   overflow: hidden;
+  font-family: var(--asgardeo-typography-fontFamily);
 }
 
-/* Header ---------------------------------------------------- */
+/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-profile__header {
-  padding: calc(var(--asgardeo-spacing-unit) * 2) calc(var(--asgardeo-spacing-unit) * 2.5);
-  padding-bottom: calc(var(--asgardeo-spacing-unit) * 1.5);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--asgardeo-spacing-unit) * 2) calc(var(--asgardeo-spacing-unit) * 2.5)
+    calc(var(--asgardeo-spacing-unit) * 1.75);
 }
 
 .asgardeo-user-profile__title {
   margin: 0;
+  font-size: var(--asgardeo-typography-fontSize-md);
+  font-weight: var(--asgardeo-typography-fontWeight-semibold);
+  color: var(--asgardeo-color-text-primary);
+  letter-spacing: var(--asgardeo-typography-letterSpacing-tight);
 }
 
 .asgardeo-user-profile__header-divider {
   margin: 0;
 }
 
-/* Avatar ---------------------------------------------------- */
+/* \u2500\u2500 Hero (avatar + name + subtitle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
-.asgardeo-user-profile__avatar-section {
+.asgardeo-user-profile__hero {
   display: flex;
-  justify-content: center;
-  padding: calc(var(--asgardeo-spacing-unit) * 2) 0 calc(var(--asgardeo-spacing-unit) * 1.25);
+  flex-direction: column;
+  align-items: center;
+  padding: calc(var(--asgardeo-spacing-unit) * 3) calc(var(--asgardeo-spacing-unit) * 2.5)
+    calc(var(--asgardeo-spacing-unit) * 2);
+  gap: calc(var(--asgardeo-spacing-unit) * 1.25);
+  background: linear-gradient(
+    180deg,
+    var(--asgardeo-color-primary-light) 0%,
+    var(--asgardeo-color-background-surface) 100%
+  );
+  border-bottom: 1px solid var(--asgardeo-color-border);
+}
+
+.asgardeo-user-profile__avatar-wrapper {
+  position: relative;
+  border-radius: 50%;
+  padding: 3px;
+  background: linear-gradient(
+    135deg,
+    var(--asgardeo-color-primary-main),
+    var(--asgardeo-color-primary-dark)
+  );
+  box-shadow: 0 4px 14px rgba(75, 110, 245, 0.28);
 }
 
 .asgardeo-user-profile__avatar {
-  width: var(--asgardeo-avatar-size);
-  height: var(--asgardeo-avatar-size);
+  width: var(--asgardeo-avatar-size, 72px);
+  height: var(--asgardeo-avatar-size, 72px);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  border: 2px solid var(--asgardeo-color-background-surface);
+}
+
+/* Avatar size variants */
+
+.asgardeo-user-profile__avatar--sm {
+  width: 48px;
+  height: 48px;
+}
+
+.asgardeo-user-profile__avatar--sm .asgardeo-user-profile__avatar-initials {
+  font-size: 1rem;
+}
+
+.asgardeo-user-profile__avatar--md {
+  width: 64px;
+  height: 64px;
+}
+
+.asgardeo-user-profile__avatar--md .asgardeo-user-profile__avatar-initials {
+  font-size: 1.25rem;
+}
+
+.asgardeo-user-profile__avatar--lg {
+  width: 80px;
+  height: 80px;
+}
+
+.asgardeo-user-profile__avatar--lg .asgardeo-user-profile__avatar-initials {
+  font-size: 1.625rem;
 }
 
 .asgardeo-user-profile__avatar-initials {
   color: #ffffff;
-  font-size: var(--asgardeo-avatar-fontSize);
-  font-weight: 600;
+  font-weight: var(--asgardeo-typography-fontWeight-semibold);
   line-height: 1;
   letter-spacing: 0.02em;
   pointer-events: none;
   user-select: none;
 }
 
-/* Alerts & loading ------------------------------------------ */
+.asgardeo-user-profile__hero-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--asgardeo-spacing-unit) * 0.375);
+  text-align: center;
+}
+
+.asgardeo-user-profile__hero-name {
+  font-size: var(--asgardeo-typography-fontSize-lg);
+  font-weight: var(--asgardeo-typography-fontWeight-semibold);
+  color: var(--asgardeo-color-text-primary);
+  line-height: var(--asgardeo-typography-lineHeight-tight);
+  letter-spacing: var(--asgardeo-typography-letterSpacing-tight);
+}
+
+.asgardeo-user-profile__hero-subtitle {
+  font-size: var(--asgardeo-typography-fontSize-sm);
+  color: var(--asgardeo-color-text-secondary);
+  line-height: var(--asgardeo-typography-lineHeight-normal);
+}
+
+/* \u2500\u2500 Alerts & loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-profile__error {
-  margin: 0 calc(var(--asgardeo-spacing-unit) * 2.5) calc(var(--asgardeo-spacing-unit) * 1.25);
+  margin: calc(var(--asgardeo-spacing-unit) * 1.5) calc(var(--asgardeo-spacing-unit) * 2.5)
+    calc(var(--asgardeo-spacing-unit) * 0.5);
 }
 
 .asgardeo-user-profile__loading {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--asgardeo-spacing-unit) * 3) 0;
+  padding: calc(var(--asgardeo-spacing-unit) * 3.5) 0;
 }
 
-/* Fields ---------------------------------------------------- */
+/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-profile__fields {
   display: flex;
@@ -2909,9 +3181,9 @@ var USER_PROFILE_CSS = `
 
 .asgardeo-user-profile__field {
   display: grid;
-  grid-template-columns: 36% 64%;
-  align-items: center;
-  padding: calc(var(--asgardeo-spacing-unit) * 1.25) calc(var(--asgardeo-spacing-unit) * 2.5);
+  grid-template-columns: 38% 62%;
+  align-items: start;
+  padding: calc(var(--asgardeo-spacing-unit) * 1.5) calc(var(--asgardeo-spacing-unit) * 2.5);
   gap: calc(var(--asgardeo-spacing-unit) * 0.75);
   box-sizing: border-box;
   transition: background-color var(--asgardeo-transition-fast);
@@ -2925,17 +3197,11 @@ var USER_PROFILE_CSS = `
   border-top: 1px solid var(--asgardeo-color-border);
 }
 
-.asgardeo-user-profile__field-label-col {
-  /* label column */
-}
-
 .asgardeo-user-profile__field-label {
   color: var(--asgardeo-color-text-secondary);
   font-size: var(--asgardeo-typography-fontSize-sm);
-}
-
-.asgardeo-user-profile__field-value-col {
-  /* value column */
+  font-weight: var(--asgardeo-typography-fontWeight-medium);
+  padding-top: 2px;
 }
 
 .asgardeo-user-profile__field-display {
@@ -2955,16 +3221,22 @@ var USER_PROFILE_CSS = `
 
 .asgardeo-user-profile__field-placeholder {
   color: var(--asgardeo-color-primary-main);
-  font-style: italic;
   font-size: var(--asgardeo-typography-fontSize-sm);
+  font-style: italic;
   flex: 1;
   cursor: pointer;
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 2px;
+  opacity: 0.8;
+  transition: opacity var(--asgardeo-transition-fast);
 }
 
-/* Edit button (pencil icon) --------------------------------- */
+.asgardeo-user-profile__field-placeholder:hover {
+  opacity: 1;
+}
+
+/* \u2500\u2500 Edit button (pencil) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-profile__field-edit-btn {
   display: inline-flex;
@@ -3000,12 +3272,13 @@ var USER_PROFILE_CSS = `
   box-shadow: 0 0 0 var(--asgardeo-focus-ring-width) var(--asgardeo-focus-ring-color);
 }
 
-/* Edit mode ------------------------------------------------- */
+/* \u2500\u2500 Edit mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-profile__field-edit {
   display: flex;
   flex-direction: column;
   gap: calc(var(--asgardeo-spacing-unit) * 0.75);
+  padding: calc(var(--asgardeo-spacing-unit) * 0.25) 0;
 }
 
 .asgardeo-user-profile__field-edit-actions {
@@ -3014,12 +3287,35 @@ var USER_PROFILE_CSS = `
   gap: calc(var(--asgardeo-spacing-unit) * 0.75);
 }
 
-/* Footer slot ----------------------------------------------- */
+/* \u2500\u2500 Footer slot \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .asgardeo-user-profile__footer {
   padding: calc(var(--asgardeo-spacing-unit) * 1.5) calc(var(--asgardeo-spacing-unit) * 2.5);
   border-top: 1px solid var(--asgardeo-color-border);
 }
+
+/* \u2500\u2500 Compact modifier \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.asgardeo-user-profile--compact .asgardeo-user-profile__hero {
+  padding: calc(var(--asgardeo-spacing-unit) * 2) calc(var(--asgardeo-spacing-unit) * 2);
+}
+
+.asgardeo-user-profile--compact .asgardeo-user-profile__avatar--lg {
+  width: 56px;
+  height: 56px;
+}
+
+.asgardeo-user-profile--compact .asgardeo-user-profile__avatar--lg .asgardeo-user-profile__avatar-initials {
+  font-size: 1.125rem;
+}
+
+.asgardeo-user-profile--compact .asgardeo-user-profile__field {
+  padding: calc(var(--asgardeo-spacing-unit) * 1) calc(var(--asgardeo-spacing-unit) * 2);
+}
+
+.asgardeo-user-profile--compact .asgardeo-user-profile__hero-name {
+  font-size: var(--asgardeo-typography-fontSize-md);
+}
 `;
 var UserProfile_css_default = USER_PROFILE_CSS;
 
@@ -5582,104 +5878,14 @@ var Callback = defineComponent28({
 });
 var Callback_default = Callback;
 
-// src/components/control/SignedIn.ts
-import { defineComponent as defineComponent29, h as h29, Fragment } from "vue";
-var SignedIn = defineComponent29({
-  name: "SignedIn",
-  setup(_props, { slots }) {
-    const { isSignedIn } = useAsgardeo_default();
-    return () => {
-      if (!isSignedIn.value) {
-        const fallbackContent = slots["fallback"]?.();
-        return fallbackContent ? h29(Fragment, {}, fallbackContent) : null;
-      }
-      const defaultContent = slots["default"]?.();
-      return defaultContent ? h29(Fragment, {}, defaultContent) : null;
-    };
-  }
-});
-var SignedIn_default = SignedIn;
+// src/components/auth/sign-in/SignIn.ts
+import { Platform as Platform3 } from "@asgardeo/browser";
+import { defineComponent as defineComponent38, h as h40 } from "vue";
 
-// src/components/control/SignedOut.ts
-import { defineComponent as defineComponent30, h as h30, Fragment as Fragment2 } from "vue";
-var SignedOut = defineComponent30({
-  name: "SignedOut",
-  setup(_props, { slots }) {
-    const { isSignedIn } = useAsgardeo_default();
-    return () => {
-      if (isSignedIn.value) {
-        const fallbackContent = slots["fallback"]?.();
-        return fallbackContent ? h30(Fragment2, {}, fallbackContent) : null;
-      }
-      const defaultContent = slots["default"]?.();
-      return defaultContent ? h30(Fragment2, {}, defaultContent) : null;
-    };
-  }
-});
-var SignedOut_default = SignedOut;
-
-// src/components/control/Loading.ts
-import { defineComponent as defineComponent31, h as h31, Fragment as Fragment3 } from "vue";
-var Loading = defineComponent31({
-  name: "Loading",
-  setup(_props, { slots }) {
-    const { isLoading } = useAsgardeo_default();
-    return () => {
-      if (!isLoading.value) {
-        const fallbackContent = slots["fallback"]?.();
-        return fallbackContent ? h31(Fragment3, {}, fallbackContent) : null;
-      }
-      const defaultContent = slots["default"]?.();
-      return defaultContent ? h31(Fragment3, {}, defaultContent) : null;
-    };
-  }
-});
-var Loading_default = Loading;
+// src/components/auth/sign-in/v1/SignIn.ts
+import { defineComponent as defineComponent35, h as h36 } from "vue";
 
-// src/components/control/user/User.ts
-import { defineComponent as defineComponent32, h as h32, Fragment as Fragment4 } from "vue";
-var User5 = defineComponent32({
-  name: "User",
-  setup(_props, { slots }) {
-    const { user } = useAsgardeo_default();
-    return () => {
-      if (!user.value) {
-        const fallbackContent = slots["fallback"]?.();
-        return fallbackContent ? h32(Fragment4, {}, fallbackContent) : null;
-      }
-      const defaultContent = slots["default"]?.({ user: user.value });
-      return defaultContent ? h32(Fragment4, {}, defaultContent) : null;
-    };
-  }
-});
-var User_default = User5;
-
-// src/components/control/organization/Organization.ts
-import { defineComponent as defineComponent33, h as h33, Fragment as Fragment5 } from "vue";
-var Organization5 = defineComponent33({
-  name: "Organization",
-  setup(_props, { slots }) {
-    const { currentOrganization } = useOrganization_default();
-    return () => {
-      if (!currentOrganization?.value) {
-        const fallbackContent = slots["fallback"]?.();
-        return fallbackContent ? h33(Fragment5, {}, fallbackContent) : null;
-      }
-      const defaultContent = slots["default"]?.({ organization: currentOrganization.value });
-      return defaultContent ? h33(Fragment5, {}, defaultContent) : null;
-    };
-  }
-});
-var Organization_default = Organization5;
-
-// src/components/presentation/sign-in/SignIn.ts
-import { Platform as Platform3 } from "@asgardeo/browser";
-import { defineComponent as defineComponent43, h as h45 } from "vue";
-
-// src/components/presentation/sign-in/v1/SignIn.ts
-import { defineComponent as defineComponent40, h as h41 } from "vue";
-
-// src/components/presentation/sign-in/v1/BaseSignIn.ts
+// src/components/auth/sign-in/v1/BaseSignIn.ts
 import {
   EmbeddedSignInFlowStepType,
   EmbeddedSignInFlowStatus,
@@ -5690,24 +5896,24 @@ import {
   handleWebAuthnAuthentication
 } from "@asgardeo/browser";
 import {
-  defineComponent as defineComponent39,
-  h as h40,
+  defineComponent as defineComponent34,
+  h as h35,
   ref as ref14,
   watch as watch7
 } from "vue";
 
-// src/components/presentation/sign-in/v1/options/SignInOptionFactory.ts
+// src/components/auth/sign-in/v1/options/SignInOptionFactory.ts
 import {
   ApplicationNativeAuthenticationConstants,
   EmbeddedSignInFlowAuthenticatorKnownIdPType,
   EmbeddedSignInFlowAuthenticatorParamType,
   FieldType as FieldType2
 } from "@asgardeo/browser";
-import { h as h39 } from "vue";
+import { h as h34 } from "vue";
 
 // src/components/adapters/FacebookButton.ts
-import { defineComponent as defineComponent34, h as h34 } from "vue";
-var FacebookButton = defineComponent34({
+import { defineComponent as defineComponent29, h as h29 } from "vue";
+var FacebookButton = defineComponent29({
   emits: ["click"],
   name: "FacebookButton",
   props: {
@@ -5715,17 +5921,17 @@ var FacebookButton = defineComponent34({
   },
   setup(props, { slots, emit, attrs }) {
     const { t } = useI18n_default();
-    const facebookIcon = () => h34("svg", { height: "18", viewBox: "0 0 512 512", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
-      h34("path", {
+    const facebookIcon = () => h29("svg", { height: "18", viewBox: "0 0 512 512", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
+      h29("path", {
         d: "M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z",
         fill: "#1976D2"
       }),
-      h34("path", {
+      h29("path", {
         d: "M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64v176h96V336h48L432,256z",
         fill: "#FAFAFA"
       })
     ]);
-    return () => h34(
+    return () => h29(
       Button_default,
       {
         ...attrs,
@@ -5744,8 +5950,8 @@ var FacebookButton = defineComponent34({
 var FacebookButton_default = FacebookButton;
 
 // src/components/adapters/GitHubButton.ts
-import { defineComponent as defineComponent35, h as h35 } from "vue";
-var GitHubButton = defineComponent35({
+import { defineComponent as defineComponent30, h as h30 } from "vue";
+var GitHubButton = defineComponent30({
   emits: ["click"],
   name: "GitHubButton",
   props: {
@@ -5753,15 +5959,15 @@ var GitHubButton = defineComponent35({
   },
   setup(props, { slots, emit, attrs }) {
     const { t } = useI18n_default();
-    const gitHubIcon = () => h35("svg", { height: "18", viewBox: "0 0 67.91 66.233", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
-      h35("g", { transform: "translate(-386.96 658.072)" }, [
-        h35("path", {
+    const gitHubIcon = () => h30("svg", { height: "18", viewBox: "0 0 67.91 66.233", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
+      h30("g", { transform: "translate(-386.96 658.072)" }, [
+        h30("path", {
           d: "M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955",
           fill: "currentColor"
         })
       ])
     ]);
-    return () => h35(
+    return () => h30(
       Button_default,
       {
         ...attrs,
@@ -5780,8 +5986,8 @@ var GitHubButton = defineComponent35({
 var GitHubButton_default = GitHubButton;
 
 // src/components/adapters/GoogleButton.ts
-import { defineComponent as defineComponent36, h as h36 } from "vue";
-var GoogleButton = defineComponent36({
+import { defineComponent as defineComponent31, h as h31 } from "vue";
+var GoogleButton = defineComponent31({
   emits: ["click"],
   name: "GoogleButton",
   props: {
@@ -5789,31 +5995,31 @@ var GoogleButton = defineComponent36({
   },
   setup(props, { slots, emit, attrs }) {
     const { t } = useI18n_default();
-    const googleIcon = () => h36("svg", { height: "18", viewBox: "0 0 67.91 67.901", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
-      h36("g", { transform: "translate(-0.001 -0.001)" }, [
-        h36("path", {
+    const googleIcon = () => h31("svg", { height: "18", viewBox: "0 0 67.91 67.901", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
+      h31("g", { transform: "translate(-0.001 -0.001)" }, [
+        h31("path", {
           d: "M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z",
           fill: "#fbbb00",
           transform: "translate(0 -119.93)"
         }),
-        h36("path", {
+        h31("path", {
           d: "M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z",
           fill: "#518ef8",
           transform: "translate(-226.93 -180.567)"
         }),
-        h36("path", {
+        h31("path", {
           d: "M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z",
           fill: "#28b446",
           transform: "translate(-26.463 -268.374)"
         }),
-        h36("path", {
+        h31("path", {
           d: "M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z",
           fill: "#f14336",
           transform: "translate(-24.828)"
         })
       ])
     ]);
-    return () => h36(
+    return () => h31(
       Button_default,
       {
         ...attrs,
@@ -5832,8 +6038,8 @@ var GoogleButton = defineComponent36({
 var GoogleButton_default = GoogleButton;
 
 // src/components/adapters/MicrosoftButton.ts
-import { defineComponent as defineComponent37, h as h37 } from "vue";
-var MicrosoftButton = defineComponent37({
+import { defineComponent as defineComponent32, h as h32 } from "vue";
+var MicrosoftButton = defineComponent32({
   emits: ["click"],
   name: "MicrosoftButton",
   props: {
@@ -5841,14 +6047,14 @@ var MicrosoftButton = defineComponent37({
   },
   setup(props, { slots, emit, attrs }) {
     const { t } = useI18n_default();
-    const microsoftIcon = () => h37("svg", { height: "14", viewBox: "0 0 23 23", width: "14", xmlns: "http://www.w3.org/2000/svg" }, [
-      h37("path", { d: "M0 0h23v23H0z", fill: "#f3f3f3" }),
-      h37("path", { d: "M1 1h10v10H1z", fill: "#f35325" }),
-      h37("path", { d: "M12 1h10v10H12z", fill: "#81bc06" }),
-      h37("path", { d: "M1 12h10v10H1z", fill: "#05a6f0" }),
-      h37("path", { d: "M12 12h10v10H12z", fill: "#ffba08" })
+    const microsoftIcon = () => h32("svg", { height: "14", viewBox: "0 0 23 23", width: "14", xmlns: "http://www.w3.org/2000/svg" }, [
+      h32("path", { d: "M0 0h23v23H0z", fill: "#f3f3f3" }),
+      h32("path", { d: "M1 1h10v10H1z", fill: "#f35325" }),
+      h32("path", { d: "M12 1h10v10H12z", fill: "#81bc06" }),
+      h32("path", { d: "M1 12h10v10H1z", fill: "#05a6f0" }),
+      h32("path", { d: "M12 12h10v10H12z", fill: "#ffba08" })
     ]);
-    return () => h37(
+    return () => h32(
       Button_default,
       {
         ...attrs,
@@ -5868,7 +6074,7 @@ var MicrosoftButton_default = MicrosoftButton;
 
 // src/components/factories/FieldFactory.ts
 import { FieldType } from "@asgardeo/browser";
-import { defineComponent as defineComponent38, h as h38 } from "vue";
+import { defineComponent as defineComponent33, h as h33 } from "vue";
 var validateFieldValue = (value, type, required = false, touched = false) => {
   if (required && touched && (!value || value.trim() === "")) {
     return "This field is required";
@@ -5920,44 +6126,44 @@ var createField = (config) => {
   };
   switch (type) {
     case FieldType.Password:
-      return h38(PasswordField_default, {
+      return h33(PasswordField_default, {
         ...commonProps,
         "onUpdate:modelValue": onChange
       });
     case FieldType.Text:
-      return h38(TextField_default, {
+      return h33(TextField_default, {
         ...commonProps,
         autocomplete: "off",
         "onUpdate:modelValue": onChange,
         type: "text"
       });
     case FieldType.Email:
-      return h38(TextField_default, {
+      return h33(TextField_default, {
         ...commonProps,
         autocomplete: "email",
         "onUpdate:modelValue": onChange,
         type: "email"
       });
     case FieldType.Date:
-      return h38(DatePicker_default, {
+      return h33(DatePicker_default, {
         ...commonProps,
         "onUpdate:modelValue": onChange
       });
     case FieldType.Checkbox: {
       const isChecked = value === "true" || value === true;
-      return h38(Checkbox_default, {
+      return h33(Checkbox_default, {
         ...commonProps,
         modelValue: isChecked,
         "onUpdate:modelValue": (checked) => onChange(checked.toString())
       });
     }
     case FieldType.Otp:
-      return h38(OtpField_default, {
+      return h33(OtpField_default, {
         ...commonProps,
         "onUpdate:modelValue": onChange
       });
     case FieldType.Number:
-      return h38(TextField_default, {
+      return h33(TextField_default, {
         ...commonProps,
         helperText: "Enter a numeric value",
         "onUpdate:modelValue": onChange,
@@ -5966,14 +6172,14 @@ var createField = (config) => {
     case FieldType.Select: {
       const fieldOptions = options.length > 0 ? options : [];
       if (fieldOptions.length > 0) {
-        return h38(Select_default, {
+        return h33(Select_default, {
           ...commonProps,
           helperText: "Select from available options",
           "onUpdate:modelValue": onChange,
           options: fieldOptions
         });
       }
-      return h38(TextField_default, {
+      return h33(TextField_default, {
         ...commonProps,
         helperText: "Enter multiple values separated by commas (e.g., value1, value2, value3)",
         "onUpdate:modelValue": onChange,
@@ -5982,7 +6188,7 @@ var createField = (config) => {
       });
     }
     default:
-      return h38(TextField_default, {
+      return h33(TextField_default, {
         ...commonProps,
         helperText: "Unknown field type, treating as text",
         "onUpdate:modelValue": onChange,
@@ -5990,7 +6196,7 @@ var createField = (config) => {
       });
   }
 };
-var FieldFactory = defineComponent38({
+var FieldFactory = defineComponent33({
   emits: ["change", "blur"],
   name: "FieldFactory",
   props: {
@@ -6026,12 +6232,12 @@ var FieldFactory = defineComponent38({
 });
 var FieldFactory_default = FieldFactory;
 
-// src/components/presentation/sign-in/v1/options/SignInOptionFactory.ts
+// src/components/auth/sign-in/v1/options/SignInOptionFactory.ts
 var renderFormFields = (props) => {
   const { authenticator, formValues, touchedFields, isLoading, onInputChange, inputClassName, buttonClassName, t } = props;
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter((param) => param.param !== "totp") || [];
   const fieldNodes = formFields.map(
-    (param) => h39(
+    (param) => h34(
       "div",
       { key: param.param },
       createField({
@@ -6051,7 +6257,7 @@ var renderFormFields = (props) => {
     )
   );
   fieldNodes.push(
-    h39(
+    h34(
       Button_default,
       {
         class: buttonClassName,
@@ -6081,10 +6287,10 @@ var renderMultiOptionButton = (props) => {
     [ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp]: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5z"
   };
   const iconPath = iconPathMap[authenticator.authenticatorId] || "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z";
-  const icon2 = h39("svg", { height: "18", viewBox: "0 0 24 24", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
-    h39("path", { d: iconPath, fill: "currentColor" })
+  const icon2 = h34("svg", { height: "18", viewBox: "0 0 24 24", width: "18", xmlns: "http://www.w3.org/2000/svg" }, [
+    h34("path", { d: iconPath, fill: "currentColor" })
   ]);
-  return h39(
+  return h34(
     Button_default,
     {
       class: buttonClassName,
@@ -6101,17 +6307,17 @@ var renderMultiOptionButton = (props) => {
 };
 var renderSocialButton = (props) => {
   const { authenticator, isLoading, onSubmit, buttonClassName, t } = props;
-  const socialIcon = h39(
+  const socialIcon = h34(
     "svg",
     { height: "18", viewBox: "0 0 24 24", width: "18", xmlns: "http://www.w3.org/2000/svg" },
     [
-      h39("path", {
+      h34("path", {
         d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",
         fill: "currentColor"
       })
     ]
   );
-  return h39(
+  return h34(
     Button_default,
     {
       class: buttonClassName,
@@ -6132,27 +6338,27 @@ var createSignInOption = (props) => {
   switch (authenticator.authenticatorId) {
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.IdentifierFirst:
-      return h39("div", {}, renderFormFields(props));
+      return h34("div", {}, renderFormFields(props));
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google:
-      return h39(GoogleButton_default, {
+      return h34(GoogleButton_default, {
         class: buttonClassName,
         isLoading,
         onClick: () => onSubmit(authenticator)
       });
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.GitHub:
-      return h39(GitHubButton_default, {
+      return h34(GitHubButton_default, {
         class: buttonClassName,
         isLoading,
         onClick: () => onSubmit(authenticator)
       });
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Microsoft:
-      return h39(MicrosoftButton_default, {
+      return h34(MicrosoftButton_default, {
         class: buttonClassName,
         isLoading,
         onClick: () => onSubmit(authenticator)
       });
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Facebook:
-      return h39(FacebookButton_default, {
+      return h34(FacebookButton_default, {
         class: buttonClassName,
         isLoading,
         onClick: () => onSubmit(authenticator)
@@ -6160,12 +6366,12 @@ var createSignInOption = (props) => {
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
-      return hasParams ? h39("div", {}, renderFormFields(props)) : renderMultiOptionButton(props);
+      return hasParams ? h34("div", {}, renderFormFields(props)) : renderMultiOptionButton(props);
     default:
       if (authenticator.idp !== EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
         return renderSocialButton(props);
       }
-      return hasParams ? h39("div", {}, renderFormFields(props)) : renderMultiOptionButton(props);
+      return hasParams ? h34("div", {}, renderFormFields(props)) : renderMultiOptionButton(props);
   }
 };
 var createSignInOptionFromAuthenticator = (authenticator, formValues, touchedFields, isLoading, onInputChange, onSubmit, t, options) => createSignInOption({
@@ -6179,10 +6385,10 @@ var createSignInOptionFromAuthenticator = (authenticator, formValues, touchedFie
   ...options
 });
 
-// src/components/presentation/sign-in/v1/BaseSignIn.ts
+// src/components/auth/sign-in/v1/BaseSignIn.ts
 var HIDDEN_AUTHENTICATORS = ["T3JnYW5pemF0aW9uQXV0aGVudGljYXRvcjpTU08"];
 var isPasskeyAuthenticator = (authenticator) => authenticator.authenticatorId === ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.Passkey && authenticator.metadata?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.InternalPrompt && !!authenticator.metadata?.additionalData?.challengeData;
-var BaseSignIn = defineComponent39({
+var BaseSignIn = defineComponent34({
   emits: ["error", "flowChange", "success"],
   name: "BaseSignInV1",
   props: {
@@ -6571,9 +6777,9 @@ var BaseSignIn = defineComponent39({
       return "info";
     };
     const renderMessages = () => messages.value.map(
-      (msg, i) => h40(Alert_default, { key: i, severity: renderAlertVariant(msg.type) }, { default: () => msg.message })
+      (msg, i) => h35(Alert_default, { key: i, severity: renderAlertVariant(msg.type) }, { default: () => msg.message })
     );
-    const renderError = () => error.value ? h40(Alert_default, { severity: "error" }, { default: () => error.value }) : null;
+    const renderError = () => error.value ? h35(Alert_default, { severity: "error" }, { default: () => error.value }) : null;
     return () => {
       const cardClass = [
         withVendorCSSClassPrefix17("signin"),
@@ -6582,16 +6788,16 @@ var BaseSignIn = defineComponent39({
         props.className
       ].filter(Boolean).join(" ");
       if (!isInitialized.value && isLoading()) {
-        return h40("div", {}, [
-          props.showLogo ? h40("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h40(Logo_default)]) : null,
-          h40(
+        return h35("div", {}, [
+          props.showLogo ? h35("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h35(Logo_default)]) : null,
+          h35(
             Card_default,
             { class: cardClass, variant: props.variant },
             {
               default: () => [
-                h40("div", { class: withVendorCSSClassPrefix17("signin__loading") }, [
-                  h40(Spinner_default, { size: "medium" }),
-                  h40(Typography_default, { variant: "body1" }, { default: () => t("messages.loading.placeholder") })
+                h35("div", { class: withVendorCSSClassPrefix17("signin__loading") }, [
+                  h35(Spinner_default, { size: "medium" }),
+                  h35(Typography_default, { variant: "body1" }, { default: () => t("messages.loading.placeholder") })
                 ])
               ]
             }
@@ -6604,9 +6810,9 @@ var BaseSignIn = defineComponent39({
           (auth) => auth.metadata?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.UserPrompt || auth.idp === "LOCAL" && auth.metadata?.params && auth.metadata.params.length > 0
         );
         const optionAuths = available.filter((auth) => !userPromptAuths.includes(auth)).filter((auth) => !HIDDEN_AUTHENTICATORS.includes(auth.authenticatorId));
-        return h40("div", {}, [
-          props.showLogo ? h40("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h40(Logo_default)]) : null,
-          h40(
+        return h35("div", {}, [
+          props.showLogo ? h35("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h35(Logo_default)]) : null,
+          h35(
             Card_default,
             { class: cardClass, variant: props.variant },
             {
@@ -6614,9 +6820,9 @@ var BaseSignIn = defineComponent39({
                 const children = [];
                 if (props.showTitle || props.showSubtitle) {
                   children.push(
-                    h40("div", { class: withVendorCSSClassPrefix17("signin__header") }, [
-                      props.showTitle ? h40(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signin.heading") }) : null,
-                      props.showSubtitle ? h40(
+                    h35("div", { class: withVendorCSSClassPrefix17("signin__header") }, [
+                      props.showTitle ? h35(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signin.heading") }) : null,
+                      props.showSubtitle ? h35(
                         Typography_default,
                         { variant: "body1" },
                         { default: () => flowSubtitle.value || t("signin.subheading") }
@@ -6626,22 +6832,22 @@ var BaseSignIn = defineComponent39({
                 }
                 if (flowMessages.value?.length > 0) {
                   children.push(
-                    h40(
+                    h35(
                       "div",
                       { class: withVendorCSSClassPrefix17("signin__flow-messages") },
                       flowMessages.value.map(
-                        (fm, i) => h40(Alert_default, { key: fm.id || i, severity: fm.type }, { default: () => fm.message })
+                        (fm, i) => h35(Alert_default, { key: fm.id || i, severity: fm.type }, { default: () => fm.message })
                       )
                     )
                   );
                 }
-                if (messages.value.length > 0) children.push(h40("div", {}, renderMessages()));
+                if (messages.value.length > 0) children.push(h35("div", {}, renderMessages()));
                 const errNode = renderError();
                 if (errNode) children.push(errNode);
                 userPromptAuths.forEach((auth, index) => {
-                  if (index > 0) children.push(h40(Divider_default, {}, { default: () => "OR" }));
+                  if (index > 0) children.push(h35(Divider_default, {}, { default: () => "OR" }));
                   children.push(
-                    h40(
+                    h35(
                       "form",
                       {
                         onSubmit: (e) => {
@@ -6673,11 +6879,11 @@ var BaseSignIn = defineComponent39({
                   );
                 });
                 if (userPromptAuths.length > 0 && optionAuths.length > 0) {
-                  children.push(h40(Divider_default, {}, { default: () => "OR" }));
+                  children.push(h35(Divider_default, {}, { default: () => "OR" }));
                 }
                 optionAuths.forEach((auth) => {
                   children.push(
-                    h40("div", { key: auth.authenticatorId }, [
+                    h35("div", { key: auth.authenticatorId }, [
                       createSignInOptionFromAuthenticator(
                         auth,
                         formValues.value,
@@ -6702,15 +6908,15 @@ var BaseSignIn = defineComponent39({
         ]);
       }
       if (!currentAuthenticator.value) {
-        return h40("div", {}, [
-          props.showLogo ? h40("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h40(Logo_default)]) : null,
-          h40(
+        return h35("div", {}, [
+          props.showLogo ? h35("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h35(Logo_default)]) : null,
+          h35(
             Card_default,
             { class: cardClass, variant: props.variant },
             {
               default: () => {
                 const errNode = renderError();
-                return errNode ? [errNode] : [h40(Typography_default, { variant: "body1" }, { default: () => t("messages.loading.placeholder") })];
+                return errNode ? [errNode] : [h35(Typography_default, { variant: "body1" }, { default: () => t("messages.loading.placeholder") })];
               }
             }
           )
@@ -6718,16 +6924,16 @@ var BaseSignIn = defineComponent39({
       }
       if (isPasskeyAuthenticator(currentAuthenticator.value) && !isLoading()) {
         handleAuthenticatorSelection(currentAuthenticator.value);
-        return h40("div", {}, [
-          props.showLogo ? h40("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h40(Logo_default)]) : null,
-          h40(
+        return h35("div", {}, [
+          props.showLogo ? h35("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h35(Logo_default)]) : null,
+          h35(
             Card_default,
             { class: cardClass, variant: props.variant },
             {
               default: () => [
-                h40("div", { style: "text-align:center" }, [
-                  h40(Spinner_default, { size: "large" }),
-                  h40(
+                h35("div", { style: "text-align:center" }, [
+                  h35(Spinner_default, { size: "large" }),
+                  h35(
                     Typography_default,
                     { variant: "body1" },
                     { default: () => t("passkey.authenticating") || "Authenticating with passkey..." }
@@ -6738,36 +6944,36 @@ var BaseSignIn = defineComponent39({
           )
         ]);
       }
-      return h40("div", {}, [
-        props.showLogo ? h40("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h40(Logo_default)]) : null,
-        h40(
+      return h35("div", {}, [
+        props.showLogo ? h35("div", { class: withVendorCSSClassPrefix17("signin__logo") }, [h35(Logo_default)]) : null,
+        h35(
           Card_default,
           { class: cardClass, variant: props.variant },
           {
             default: () => {
               const children = [];
               children.push(
-                h40("div", { class: withVendorCSSClassPrefix17("signin__header") }, [
-                  h40(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signin.heading") }),
-                  h40(Typography_default, { variant: "body1" }, { default: () => flowSubtitle.value || t("signin.subheading") })
+                h35("div", { class: withVendorCSSClassPrefix17("signin__header") }, [
+                  h35(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signin.heading") }),
+                  h35(Typography_default, { variant: "body1" }, { default: () => flowSubtitle.value || t("signin.subheading") })
                 ])
               );
               if (flowMessages.value?.length > 0) {
                 children.push(
-                  h40(
+                  h35(
                     "div",
                     { class: withVendorCSSClassPrefix17("signin__flow-messages") },
                     flowMessages.value.map(
-                      (fm, i) => h40(Alert_default, { key: fm.id || i, severity: fm.type }, { default: () => fm.message })
+                      (fm, i) => h35(Alert_default, { key: fm.id || i, severity: fm.type }, { default: () => fm.message })
                     )
                   )
                 );
               }
-              if (messages.value.length > 0) children.push(h40("div", {}, renderMessages()));
+              if (messages.value.length > 0) children.push(h35("div", {}, renderMessages()));
               const errNode = renderError();
               if (errNode) children.push(errNode);
               children.push(
-                h40(
+                h35(
                   "form",
                   {
                     class: withVendorCSSClassPrefix17("signin__form"),
@@ -6808,8 +7014,8 @@ var BaseSignIn = defineComponent39({
 });
 var BaseSignIn_default = BaseSignIn;
 
-// src/components/presentation/sign-in/v1/SignIn.ts
-var SignIn = defineComponent40({
+// src/components/auth/sign-in/v1/SignIn.ts
+var SignIn = defineComponent35({
   emits: ["error", "success"],
   name: "SignInV1",
   props: {
@@ -6839,7 +7045,7 @@ var SignIn = defineComponent40({
         window.location.href = url.toString();
       }
     };
-    return () => h41(BaseSignIn_default, {
+    return () => h36(BaseSignIn_default, {
       ...attrs,
       afterSignInUrl,
       class: props.className,
@@ -6858,7 +7064,7 @@ var SignIn = defineComponent40({
 });
 var SignIn_default = SignIn;
 
-// src/components/presentation/sign-in/v2/SignIn.ts
+// src/components/auth/sign-in/v2/SignIn.ts
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError8,
   EmbeddedFlowType,
@@ -6866,27 +7072,27 @@ import {
   EmbeddedSignInFlowTypeV2
 } from "@asgardeo/browser";
 import {
-  defineComponent as defineComponent42,
-  h as h44,
+  defineComponent as defineComponent37,
+  h as h39,
   onMounted as onMounted5,
   onUnmounted as onUnmounted2,
   ref as ref16,
   watch as watch9
 } from "vue";
 
-// src/components/presentation/sign-in/v2/BaseSignIn.ts
+// src/components/auth/sign-in/v2/BaseSignIn.ts
 import {
   withVendorCSSClassPrefix as withVendorCSSClassPrefix18
 } from "@asgardeo/browser";
 import {
   computed as computed6,
-  defineComponent as defineComponent41,
-  h as h43,
+  defineComponent as defineComponent36,
+  h as h38,
   ref as ref15,
   watch as watch8
 } from "vue";
 
-// src/components/presentation/sign-in/AuthOptionFactoryCore.ts
+// src/components/auth/sign-in/AuthOptionFactoryCore.ts
 import {
   FieldType as FieldType3,
   EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
@@ -6896,7 +7102,7 @@ import {
   isEmojiUri
 } from "@asgardeo/browser";
 import DOMPurify from "dompurify";
-import { h as h42 } from "vue";
+import { h as h37 } from "vue";
 var logger5 = createVueLogger("AuthOptionFactory");
 var getConsentOptionalKey = (purposeId, attr) => `consent_${purposeId}_${attr}`;
 var resolveEmojiUrisInHtml = (html) => {
@@ -7022,30 +7228,30 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
         }
       };
       if (matchesSocialProvider(actionId, eventType, buttonText, "google")) {
-        return h42(GoogleButton_default, { class: options.buttonClassName, key, onClick: handleClick });
+        return h37(GoogleButton_default, { class: options.buttonClassName, key, onClick: handleClick });
       }
       if (matchesSocialProvider(actionId, eventType, buttonText, "github")) {
-        return h42(GitHubButton_default, { class: options.buttonClassName, key, onClick: handleClick });
+        return h37(GitHubButton_default, { class: options.buttonClassName, key, onClick: handleClick });
       }
       if (matchesSocialProvider(actionId, eventType, buttonText, "facebook")) {
-        return h42(FacebookButton_default, { class: options.buttonClassName, key, onClick: handleClick });
+        return h37(FacebookButton_default, { class: options.buttonClassName, key, onClick: handleClick });
       }
       if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft")) {
-        return h42(MicrosoftButton_default, { class: options.buttonClassName, key, onClick: handleClick });
+        return h37(MicrosoftButton_default, { class: options.buttonClassName, key, onClick: handleClick });
       }
-      const startIconVNode = component.startIcon ? h42("img", {
+      const startIconVNode = component.startIcon ? h37("img", {
         alt: "",
         "aria-hidden": "true",
         src: component.startIcon,
         style: { height: "1.25em", objectFit: "contain", width: "1.25em" }
       }) : null;
-      const endIconVNode = component.endIcon ? h42("img", {
+      const endIconVNode = component.endIcon ? h37("img", {
         alt: "",
         "aria-hidden": "true",
         src: component.endIcon,
         style: { height: "1.25em", objectFit: "contain", width: "1.25em" }
       }) : null;
-      return h42(
+      return h37(
         Button_default,
         {
           class: options.buttonClassName,
@@ -7065,7 +7271,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     case EmbeddedFlowComponentType.Text: {
       const variant = getTypographyVariant(component.variant);
       const align = typeof component["align"] === "string" ? component["align"] : "left";
-      return h42(
+      return h37(
         Typography_default,
         {
           key,
@@ -7077,7 +7283,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     }
     case EmbeddedFlowComponentType.Divider: {
       const dividerLabel = resolve(component.label) || "";
-      return h42(Divider_default, { key }, dividerLabel ? { default: () => dividerLabel } : void 0);
+      return h37(Divider_default, { key }, dividerLabel ? { default: () => dividerLabel } : void 0);
     }
     case EmbeddedFlowComponentType.Select: {
       const identifier = component.ref;
@@ -7090,7 +7296,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
           value: typeof opt === "string" ? opt : String(opt.value ?? "")
         })
       );
-      return h42(Select_default, {
+      return h37(Select_default, {
         class: options.inputClassName,
         error,
         key,
@@ -7121,12 +7327,12 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
             }
           )
         ).filter(Boolean);
-        return h42("form", { id: component.id, key }, blockChildren);
+        return h37("form", { id: component.id, key }, blockChildren);
       }
       return null;
     }
     case EmbeddedFlowComponentType.RichText: {
-      return h42("div", {
+      return h37("div", {
         innerHTML: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label))),
         key,
         style: { overflowWrap: "anywhere" }
@@ -7135,7 +7341,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     case EmbeddedFlowComponentType.Image: {
       const explicitHeight = resolve(component.height?.toString());
       const explicitWidth = resolve(component.width?.toString());
-      return h42("img", {
+      return h37("img", {
         alt: resolve(component.alt) || resolve(component.label) || "Image",
         key,
         src: resolve(component.src),
@@ -7179,7 +7385,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
           }
         )
       ) : [];
-      return h42("div", { key, style: stackStyle }, stackChildren.filter(Boolean));
+      return h37("div", { key, style: stackStyle }, stackChildren.filter(Boolean));
     }
     case EmbeddedFlowComponentType.Consent: {
       logger5.warn(`Consent component type is not yet fully supported in the Vue SDK.`);
@@ -7190,7 +7396,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
       const timeoutMs = Number(options.additionalData?.["stepTimeout"]) || 0;
       const expiresIn = timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1e3)) : 0;
       const timerText = textTemplate.replace("{time}", String(expiresIn));
-      return h42("div", { class: "asgardeo-flow-timer", key }, timerText);
+      return h37("div", { class: "asgardeo-flow-timer", key }, timerText);
     }
     default:
       logger5.warn(`Unsupported component type: ${component.type}. Skipping render.`);
@@ -7368,7 +7574,7 @@ var normalizeFlowResponse = (response, t, options = {}, meta) => {
   };
 };
 
-// src/components/presentation/sign-in/v2/BaseSignIn.ts
+// src/components/auth/sign-in/v2/BaseSignIn.ts
 var extractFormFields = (flowComponents) => {
   const fields = [];
   const process = (comps) => {
@@ -7384,7 +7590,7 @@ var extractFormFields = (flowComponents) => {
   process(flowComponents);
   return fields;
 };
-var BaseSignIn2 = defineComponent41({
+var BaseSignIn2 = defineComponent36({
   emits: ["error", "success"],
   name: "BaseSignIn",
   props: {
@@ -7550,23 +7756,23 @@ var BaseSignIn2 = defineComponent41({
           validateForm,
           values: formValues.value
         };
-        return h43("div", { class: containerClass, ...attrs }, slots["default"](renderProps));
+        return h38("div", { class: containerClass, ...attrs }, slots["default"](renderProps));
       }
       if (isLoading.value && (!props.components || props.components.length === 0)) {
-        return h43(
+        return h38(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h43("div", { style: "display:flex;justify-content:center;padding:2rem" }, h43(Spinner_default))
+          () => h38("div", { style: "display:flex;justify-content:center;padding:2rem" }, h38(Spinner_default))
         );
       }
       if (!props.components || props.components.length === 0) {
-        return h43(
+        return h38(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h43(
+          () => h38(
             Alert_default,
             { severity: "warning" },
-            () => h43(
+            () => h38(
               Typography_default,
               { variant: "body1" },
               () => t("errors.signin.components.not.available") || "No sign-in options available"
@@ -7576,24 +7782,24 @@ var BaseSignIn2 = defineComponent41({
       }
       const messages = flowMessages.value || [];
       const externalError = props.error;
-      return h43(Card_default, { class: containerClass, ...attrs, variant: props.variant }, () => [
+      return h38(Card_default, { class: containerClass, ...attrs, variant: props.variant }, () => [
         // Show errors and flow messages
-        (externalError || messages.length > 0) && h43(
+        (externalError || messages.length > 0) && h38(
           "div",
           { class: [withVendorCSSClassPrefix18("signin__messages"), props.messageClassName].filter(Boolean).join(" ") },
           [
-            externalError && h43(Alert_default, { severity: "error" }, () => h43(Typography_default, { variant: "body2" }, () => externalError.message)),
+            externalError && h38(Alert_default, { severity: "error" }, () => h38(Typography_default, { variant: "body2" }, () => externalError.message)),
             ...messages.map(
-              (msg, index) => h43(
+              (msg, index) => h38(
                 Alert_default,
                 { key: index, severity: msg.type === "error" ? "error" : "info" },
-                () => h43(Typography_default, { variant: "body2" }, () => msg.message)
+                () => h38(Typography_default, { variant: "body2" }, () => msg.message)
               )
             )
           ]
         ),
         // Render flow components
-        h43("div", { class: withVendorCSSClassPrefix18("signin__content") }, renderComponents())
+        h38("div", { class: withVendorCSSClassPrefix18("signin__content") }, renderComponents())
       ]);
     };
   }
@@ -7767,10 +7973,10 @@ var handlePasskeyAuthentication = async (challengeData) => {
   }
 };
 
-// src/components/presentation/sign-in/v2/SignIn.ts
+// src/components/auth/sign-in/v2/SignIn.ts
 var EXECUTION_ID_STORAGE_KEY = "asgardeo_execution_id";
 var AUTH_ID_STORAGE_KEY = "asgardeo_auth_id";
-var SignIn2 = defineComponent42({
+var SignIn2 = defineComponent37({
   emits: ["error", "success"],
   name: "SignIn",
   props: {
@@ -8163,9 +8369,9 @@ var SignIn2 = defineComponent42({
           meta: flowMeta.value,
           onSubmit: handleSubmit
         };
-        return h44("div", {}, slots["default"](renderProps));
+        return h39("div", {}, slots["default"](renderProps));
       }
-      return h44(BaseSignIn_default2, {
+      return h39(BaseSignIn_default2, {
         ...attrs,
         additionalData: additionalData.value,
         class: props.className,
@@ -8183,8 +8389,8 @@ var SignIn2 = defineComponent42({
 });
 var SignIn_default2 = SignIn2;
 
-// src/components/presentation/sign-in/SignIn.ts
-var SignIn3 = defineComponent43({
+// src/components/auth/sign-in/SignIn.ts
+var SignIn3 = defineComponent38({
   emits: ["error", "success"],
   name: "SignIn",
   props: {
@@ -8202,7 +8408,7 @@ var SignIn3 = defineComponent43({
     const { platform } = useAsgardeo_default();
     return () => {
       if (platform === Platform3.AsgardeoV2) {
-        return h45(
+        return h40(
           SignIn_default2,
           {
             ...attrs,
@@ -8215,7 +8421,7 @@ var SignIn3 = defineComponent43({
           slots
         );
       }
-      return h45(
+      return h40(
         SignIn_default,
         {
           ...attrs,
@@ -8232,36 +8438,36 @@ var SignIn3 = defineComponent43({
 });
 var SignIn_default3 = SignIn3;
 
-// src/components/presentation/sign-in/BaseSignIn.ts
+// src/components/auth/sign-in/BaseSignIn.ts
 import { Platform as Platform4 } from "@asgardeo/browser";
-import { defineComponent as defineComponent44, h as h46 } from "vue";
-var BaseSignIn3 = defineComponent44({
+import { defineComponent as defineComponent39, h as h41 } from "vue";
+var BaseSignIn3 = defineComponent39({
   inheritAttrs: false,
   name: "BaseSignIn",
   setup(_props, { attrs, slots }) {
     const { platform } = useAsgardeo_default();
     return () => {
       if (platform === Platform4.AsgardeoV2) {
-        return h46(BaseSignIn_default2, { ...attrs }, slots);
+        return h41(BaseSignIn_default2, { ...attrs }, slots);
       }
-      return h46(BaseSignIn_default, { ...attrs }, slots);
+      return h41(BaseSignIn_default, { ...attrs }, slots);
     };
   }
 });
 var BaseSignIn_default3 = BaseSignIn3;
 
-// src/components/presentation/sign-up/SignUp.ts
+// src/components/auth/sign-up/SignUp.ts
 import { Platform as Platform5 } from "@asgardeo/browser";
-import { defineComponent as defineComponent49, h as h52 } from "vue";
+import { defineComponent as defineComponent44, h as h47 } from "vue";
 
-// src/components/presentation/sign-up/v1/SignUp.ts
+// src/components/auth/sign-up/v1/SignUp.ts
 import {
   EmbeddedFlowResponseType as EmbeddedFlowResponseType2,
   EmbeddedFlowType as EmbeddedFlowType2
 } from "@asgardeo/browser";
-import { defineComponent as defineComponent46, h as h49 } from "vue";
+import { defineComponent as defineComponent41, h as h44 } from "vue";
 
-// src/components/presentation/sign-up/v1/BaseSignUp.ts
+// src/components/auth/sign-up/v1/BaseSignUp.ts
 import {
   EmbeddedFlowComponentType as EmbeddedFlowComponentType3,
   EmbeddedFlowResponseType,
@@ -8269,15 +8475,15 @@ import {
   withVendorCSSClassPrefix as withVendorCSSClassPrefix19
 } from "@asgardeo/browser";
 import {
-  defineComponent as defineComponent45,
-  h as h48,
+  defineComponent as defineComponent40,
+  h as h43,
   ref as ref17,
   watch as watch10
 } from "vue";
 
-// src/components/presentation/sign-up/v1/options/SignUpOptionFactory.ts
+// src/components/auth/sign-up/v1/options/SignUpOptionFactory.ts
 import { EmbeddedFlowComponentType as EmbeddedFlowComponentType2, FieldType as FieldType4 } from "@asgardeo/browser";
-import { h as h47 } from "vue";
+import { h as h42 } from "vue";
 var getInputName = (component) => {
   const cfg = component.config || {};
   return cfg.name || cfg.identifier || component.id;
@@ -8345,7 +8551,7 @@ var createSignUpComponent = (props) => {
   switch (component.type) {
     case EmbeddedFlowComponentType2.Typography: {
       const text = String(cfg.text || cfg.label || "");
-      return h47(
+      return h42(
         Typography_default,
         { style: "margin-bottom:0.5rem", variant: inferTypographyVariant(component) },
         { default: () => text }
@@ -8377,18 +8583,18 @@ var createSignUpComponent = (props) => {
       const isPrimary = variant === "PRIMARY";
       const handleClick = () => onSubmit(component, void 0);
       if (matchesSocialProvider2(component, "google")) {
-        return h47(GoogleButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+        return h42(GoogleButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
       }
       if (matchesSocialProvider2(component, "github")) {
-        return h47(GitHubButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+        return h42(GitHubButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
       }
       if (matchesSocialProvider2(component, "microsoft")) {
-        return h47(MicrosoftButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+        return h42(MicrosoftButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
       }
       if (matchesSocialProvider2(component, "facebook")) {
-        return h47(FacebookButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+        return h42(FacebookButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
       }
-      return h47(
+      return h42(
         Button_default,
         {
           class: buttonClassName,
@@ -8416,7 +8622,7 @@ var createSignUpComponent = (props) => {
       return nodes;
     }
     case EmbeddedFlowComponentType2.Divider: {
-      return h47("hr", {
+      return h42("hr", {
         class: "asgardeo-signup__divider",
         style: "margin:0.75rem 0;border:0;border-top:1px solid #e5e7eb"
       });
@@ -8425,12 +8631,12 @@ var createSignUpComponent = (props) => {
       const src = String(cfg.src || cfg.url || "");
       const alt = String(cfg.alt || "");
       if (!src) return null;
-      return h47("img", { alt, src, style: "max-width:100%;height:auto;display:block;margin:0.5rem auto" });
+      return h42("img", { alt, src, style: "max-width:100%;height:auto;display:block;margin:0.5rem auto" });
     }
     default: {
       if (String(component.type).toUpperCase() === "RICH_TEXT") {
         const html = String(cfg.text || cfg.label || "");
-        return h47("div", { class: "asgardeo-signup__rich-text", innerHTML: html });
+        return h42("div", { class: "asgardeo-signup__rich-text", innerHTML: html });
       }
       return null;
     }
@@ -8459,9 +8665,9 @@ var renderSignUpComponents2 = (components, formValues, touchedFields, formErrors
   return result;
 };
 
-// src/components/presentation/sign-up/v1/BaseSignUp.ts
+// src/components/auth/sign-up/v1/BaseSignUp.ts
 var logger6 = createVueLogger("BaseSignUpV1");
-var BaseSignUp = defineComponent45({
+var BaseSignUp = defineComponent40({
   emits: ["error", "flowChange", "complete"],
   name: "BaseSignUpV1",
   props: {
@@ -8746,20 +8952,20 @@ var BaseSignUp = defineComponent45({
           touched: touchedFields.value,
           values: formValues.value
         };
-        return h48("div", { class: containerClass }, slots["default"](renderProps));
+        return h43("div", { class: containerClass }, slots["default"](renderProps));
       }
       if (!isFlowInitialized.value && isLoading.value) {
-        return h48(
+        return h43(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h48("div", { style: "display:flex;justify-content:center;padding:2rem" }, h48(Spinner_default))
+          () => h43("div", { style: "display:flex;justify-content:center;padding:2rem" }, h43(Spinner_default))
         );
       }
       if (!currentFlow.value) {
-        return h48(
+        return h43(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h48(
+          () => h43(
             Alert_default,
             { variant: "error" },
             () => t("errors.signup.flow.initialization.failure") || "Failed to initialize sign-up flow"
@@ -8784,33 +8990,33 @@ var BaseSignUp = defineComponent45({
       );
       const cardChildren = [];
       if (props.showLogo) {
-        cardChildren.push(h48("div", { style: "display:flex;justify-content:center;margin-bottom:1rem" }, [h48(Logo_default)]));
+        cardChildren.push(h43("div", { style: "display:flex;justify-content:center;margin-bottom:1rem" }, [h43(Logo_default)]));
       }
       if (props.showTitle || props.showSubtitle) {
         const headerChildren = [];
         if (props.showTitle) {
           headerChildren.push(
-            h48(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signup.heading") || "Sign Up" })
+            h43(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signup.heading") || "Sign Up" })
           );
         }
         if (props.showSubtitle) {
           headerChildren.push(
-            h48(
+            h43(
               Typography_default,
               { variant: "body1" },
               { default: () => flowSubtitle.value || t("signup.subheading") || "Create your account" }
             )
           );
         }
-        cardChildren.push(h48("div", { style: "padding: 0 1rem 1rem" }, headerChildren));
+        cardChildren.push(h43("div", { style: "padding: 0 1rem 1rem" }, headerChildren));
       }
       if (flowMessages.value && flowMessages.value.length > 0) {
         cardChildren.push(
-          h48(
+          h43(
             "div",
             { style: "padding: 0 1rem" },
             flowMessages.value.map(
-              (msg, i) => h48(
+              (msg, i) => h43(
                 Alert_default,
                 {
                   class: props.messageClassName,
@@ -8824,7 +9030,7 @@ var BaseSignUp = defineComponent45({
         );
       }
       cardChildren.push(
-        h48(
+        h43(
           "form",
           {
             class: withVendorCSSClassPrefix19("signup__form"),
@@ -8835,7 +9041,7 @@ var BaseSignUp = defineComponent45({
             style: "padding: 1rem;display:flex;flex-direction:column;gap:0.75rem"
           },
           rendered.length > 0 ? rendered : [
-            h48(
+            h43(
               Alert_default,
               { variant: "warning" },
               () => t("errors.signup.components.not.available") || "No components available"
@@ -8843,14 +9049,14 @@ var BaseSignUp = defineComponent45({
           ]
         )
       );
-      return h48(Card_default, { class: containerClass, variant: props.variant }, () => cardChildren);
+      return h43(Card_default, { class: containerClass, variant: props.variant }, () => cardChildren);
     };
   }
 });
 var BaseSignUp_default = BaseSignUp;
 
-// src/components/presentation/sign-up/v1/SignUp.ts
-var SignUp = defineComponent46({
+// src/components/auth/sign-up/v1/SignUp.ts
+var SignUp = defineComponent41({
   name: "SignUpV1",
   props: {
     afterSignUpUrl: { default: void 0, type: String },
@@ -8894,7 +9100,7 @@ var SignUp = defineComponent46({
         }
       }
     };
-    return () => h49(
+    return () => h44(
       BaseSignUp_default,
       {
         afterSignUpUrl: props.afterSignUpUrl,
@@ -8919,14 +9125,14 @@ var SignUp = defineComponent46({
 });
 var SignUp_default = SignUp;
 
-// src/components/presentation/sign-up/v2/SignUp.ts
+// src/components/auth/sign-up/v2/SignUp.ts
 import {
   EmbeddedFlowResponseType as EmbeddedFlowResponseType4,
   EmbeddedFlowType as EmbeddedFlowType3
 } from "@asgardeo/browser";
-import { defineComponent as defineComponent48, h as h51 } from "vue";
+import { defineComponent as defineComponent43, h as h46 } from "vue";
 
-// src/components/presentation/sign-up/v2/BaseSignUp.ts
+// src/components/auth/sign-up/v2/BaseSignUp.ts
 import {
   EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType4,
   EmbeddedFlowResponseType as EmbeddedFlowResponseType3,
@@ -8934,8 +9140,8 @@ import {
   withVendorCSSClassPrefix as withVendorCSSClassPrefix20
 } from "@asgardeo/browser";
 import {
-  defineComponent as defineComponent47,
-  h as h50,
+  defineComponent as defineComponent42,
+  h as h45,
   ref as ref18,
   watch as watch11
 } from "vue";
@@ -9001,7 +9207,7 @@ var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitl
 };
 var getAuthComponentHeadings_default = getAuthComponentHeadings;
 
-// src/components/presentation/sign-up/v2/BaseSignUp.ts
+// src/components/auth/sign-up/v2/BaseSignUp.ts
 var logger7 = createVueLogger("BaseSignUp");
 var extractFormFields2 = (components) => {
   const fields = [];
@@ -9019,7 +9225,7 @@ var extractFormFields2 = (components) => {
   process(components);
   return fields;
 };
-var BaseSignUp2 = defineComponent47({
+var BaseSignUp2 = defineComponent42({
   emits: ["error", "complete", "flowChange"],
   name: "BaseSignUp",
   props: {
@@ -9390,20 +9596,20 @@ var BaseSignUp2 = defineComponent47({
           },
           values: formValues.value
         };
-        return h50("div", { class: containerClass }, slots["default"](renderProps));
+        return h45("div", { class: containerClass }, slots["default"](renderProps));
       }
       if (!isFlowInitialized.value && isLoading.value) {
-        return h50(
+        return h45(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h50("div", { style: "display:flex;justify-content:center;padding:2rem" }, h50(Spinner_default))
+          () => h45("div", { style: "display:flex;justify-content:center;padding:2rem" }, h45(Spinner_default))
         );
       }
       if (!currentFlow.value) {
-        return h50(
+        return h45(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h50(
+          () => h45(
             Alert_default,
             { variant: "error" },
             () => t("errors.signup.flow.initialization.failure") || "Failed to initialize sign-up flow"
@@ -9438,32 +9644,32 @@ var BaseSignUp2 = defineComponent47({
           variant: props.variant
         }
       ) : [];
-      return h50(Card_default, { class: containerClass, variant: props.variant }, () => [
+      return h45(Card_default, { class: containerClass, variant: props.variant }, () => [
         // Header with title/subtitle
-        props.showTitle || props.showSubtitle ? h50("div", { style: "padding: 1rem 1rem 0" }, [
-          props.showTitle ? h50(Typography_default, { variant: "h5" }, () => title) : null,
-          props.showSubtitle ? h50(Typography_default, { style: "margin-top: 0.25rem", variant: "body1" }, () => subtitle) : null
+        props.showTitle || props.showSubtitle ? h45("div", { style: "padding: 1rem 1rem 0" }, [
+          props.showTitle ? h45(Typography_default, { variant: "h5" }, () => title) : null,
+          props.showSubtitle ? h45(Typography_default, { style: "margin-top: 0.25rem", variant: "body1" }, () => subtitle) : null
         ]) : null,
         // External error
-        props.error ? h50(
+        props.error ? h45(
           "div",
           { style: "padding: 0 1rem" },
-          h50(Alert_default, { variant: "error" }, () => props.error.message)
+          h45(Alert_default, { variant: "error" }, () => props.error.message)
         ) : null,
         // Flow messages
-        flowMessages.value.length > 0 ? h50(
+        flowMessages.value.length > 0 ? h45(
           "div",
           { style: "padding: 0 1rem" },
           flowMessages.value.map(
-            (msg, i) => h50(Alert_default, { key: i, variant: msg.type === "error" ? "error" : "info" }, () => msg.message)
+            (msg, i) => h45(Alert_default, { key: i, variant: msg.type === "error" ? "error" : "info" }, () => msg.message)
           )
         ) : null,
         // Components
-        h50(
+        h45(
           "div",
           { style: "padding: 1rem" },
           renderedComponents.length > 0 ? renderedComponents : [
-            h50(
+            h45(
               Alert_default,
               { variant: "warning" },
               () => t("errors.signup.components.not.available") || "No components available"
@@ -9476,8 +9682,8 @@ var BaseSignUp2 = defineComponent47({
 });
 var BaseSignUp_default2 = BaseSignUp2;
 
-// src/components/presentation/sign-up/v2/SignUp.ts
-var SignUp2 = defineComponent48({
+// src/components/auth/sign-up/v2/SignUp.ts
+var SignUp2 = defineComponent43({
   name: "SignUp",
   props: {
     afterSignUpUrl: { default: void 0, type: String },
@@ -9521,7 +9727,7 @@ var SignUp2 = defineComponent48({
         window.location.href = response.data.redirectURL;
       }
     };
-    return () => h51(
+    return () => h46(
       BaseSignUp_default2,
       {
         afterSignUpUrl: props.afterSignUpUrl,
@@ -9546,74 +9752,233 @@ var SignUp2 = defineComponent48({
 });
 var SignUp_default2 = SignUp2;
 
-// src/components/presentation/sign-up/SignUp.ts
-var SignUp3 = defineComponent49({
+// src/components/auth/sign-up/SignUp.ts
+var SignUp3 = defineComponent44({
   inheritAttrs: false,
   name: "SignUp",
   setup(_props, { attrs, slots }) {
     const { platform } = useAsgardeo_default();
     return () => {
       if (platform === Platform5.AsgardeoV2) {
-        return h52(SignUp_default2, { ...attrs }, slots);
+        return h47(SignUp_default2, { ...attrs }, slots);
       }
-      return h52(SignUp_default, { ...attrs }, slots);
+      return h47(SignUp_default, { ...attrs }, slots);
     };
   }
 });
 var SignUp_default3 = SignUp3;
 
-// src/components/presentation/sign-up/BaseSignUp.ts
+// src/components/auth/sign-up/BaseSignUp.ts
 import { Platform as Platform6 } from "@asgardeo/browser";
-import { defineComponent as defineComponent50, h as h53 } from "vue";
-var BaseSignUp3 = defineComponent50({
+import { defineComponent as defineComponent45, h as h48 } from "vue";
+var BaseSignUp3 = defineComponent45({
   inheritAttrs: false,
   name: "BaseSignUp",
   setup(_props, { attrs, slots }) {
     const { platform } = useAsgardeo_default();
     return () => {
       if (platform === Platform6.AsgardeoV2) {
-        return h53(BaseSignUp_default2, { ...attrs }, slots);
+        return h48(BaseSignUp_default2, { ...attrs }, slots);
       }
-      return h53(BaseSignUp_default, { ...attrs }, slots);
+      return h48(BaseSignUp_default, { ...attrs }, slots);
     };
   }
 });
 var BaseSignUp_default3 = BaseSignUp3;
 
+// src/components/control/SignedIn.ts
+import { defineComponent as defineComponent46, h as h49, Fragment } from "vue";
+var SignedIn = defineComponent46({
+  name: "SignedIn",
+  setup(_props, { slots }) {
+    const { isSignedIn } = useAsgardeo_default();
+    return () => {
+      if (!isSignedIn.value) {
+        const fallbackContent = slots["fallback"]?.();
+        return fallbackContent ? h49(Fragment, {}, fallbackContent) : null;
+      }
+      const defaultContent = slots["default"]?.();
+      return defaultContent ? h49(Fragment, {}, defaultContent) : null;
+    };
+  }
+});
+var SignedIn_default = SignedIn;
+
+// src/components/control/SignedOut.ts
+import { defineComponent as defineComponent47, h as h50, Fragment as Fragment2 } from "vue";
+var SignedOut = defineComponent47({
+  name: "SignedOut",
+  setup(_props, { slots }) {
+    const { isSignedIn } = useAsgardeo_default();
+    return () => {
+      if (isSignedIn.value) {
+        const fallbackContent = slots["fallback"]?.();
+        return fallbackContent ? h50(Fragment2, {}, fallbackContent) : null;
+      }
+      const defaultContent = slots["default"]?.();
+      return defaultContent ? h50(Fragment2, {}, defaultContent) : null;
+    };
+  }
+});
+var SignedOut_default = SignedOut;
+
+// src/components/control/Loading.ts
+import { defineComponent as defineComponent48, h as h51, Fragment as Fragment3 } from "vue";
+var Loading = defineComponent48({
+  name: "Loading",
+  setup(_props, { slots }) {
+    const { isLoading } = useAsgardeo_default();
+    return () => {
+      if (!isLoading.value) {
+        const fallbackContent = slots["fallback"]?.();
+        return fallbackContent ? h51(Fragment3, {}, fallbackContent) : null;
+      }
+      const defaultContent = slots["default"]?.();
+      return defaultContent ? h51(Fragment3, {}, defaultContent) : null;
+    };
+  }
+});
+var Loading_default = Loading;
+
+// src/components/presentation/user/User.ts
+import { defineComponent as defineComponent49, h as h52, Fragment as Fragment4 } from "vue";
+var User5 = defineComponent49({
+  name: "User",
+  setup(_props, { slots }) {
+    const { user } = useAsgardeo_default();
+    return () => {
+      if (!user.value) {
+        const fallbackContent = slots["fallback"]?.();
+        return fallbackContent ? h52(Fragment4, {}, fallbackContent) : null;
+      }
+      const defaultContent = slots["default"]?.({ user: user.value });
+      return defaultContent ? h52(Fragment4, {}, defaultContent) : null;
+    };
+  }
+});
+var User_default = User5;
+
+// src/components/presentation/organization/Organization.ts
+import { defineComponent as defineComponent50, h as h53, Fragment as Fragment5 } from "vue";
+var Organization5 = defineComponent50({
+  name: "Organization",
+  setup(_props, { slots }) {
+    const { currentOrganization } = useOrganization_default();
+    return () => {
+      if (!currentOrganization?.value) {
+        const fallbackContent = slots["fallback"]?.();
+        return fallbackContent ? h53(Fragment5, {}, fallbackContent) : null;
+      }
+      const defaultContent = slots["default"]?.({ organization: currentOrganization.value });
+      return defaultContent ? h53(Fragment5, {}, defaultContent) : null;
+    };
+  }
+});
+var Organization_default = Organization5;
+
 // src/components/presentation/user-profile/UserProfile.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22 } from "@asgardeo/browser";
-import { defineComponent as defineComponent52, h as h55 } from "vue";
+import { AsgardeoError, withVendorCSSClassPrefix as withVendorCSSClassPrefix22 } from "@asgardeo/browser";
+import { defineComponent as defineComponent52, h as h55, ref as ref20 } from "vue";
 
 // src/components/presentation/user-profile/BaseUserProfile.ts
-import {
-  WellKnownSchemaIds,
-  withVendorCSSClassPrefix as withVendorCSSClassPrefix21
-} from "@asgardeo/browser";
+import { WellKnownSchemaIds, withVendorCSSClassPrefix as withVendorCSSClassPrefix21 } from "@asgardeo/browser";
 import { defineComponent as defineComponent51, h as h54, ref as ref19 } from "vue";
-var PROFILE_FIELD_DESCRIPTORS = [
-  { keys: ["userName", "username"], label: "Username", readonly: true },
-  { keys: ["name.givenName", "firstName", "givenName"], label: "First Name", readonly: false },
-  { keys: ["name.familyName", "lastName", "familyName"], label: "Last Name", readonly: false },
-  { keys: ["emails", "email"], label: "Email", readonly: true },
-  { keys: ["country"], label: "Country", readonly: false },
-  { keys: ["dateOfBirth", "birthdate", "birthDate"], label: "Birth Date", readonly: false },
-  { keys: ["phoneNumbers.mobile", "mobile", "mobileNumbers"], label: "Mobile", readonly: false }
-];
-var CORE_USER_SCHEMA_ID = WellKnownSchemaIds.User;
-var setNestedPath = (target, segments, value) => {
-  let cursor = target;
-  for (let i = 0; i < segments.length - 1; i += 1) {
-    const segment = segments[i];
-    if (typeof cursor[segment] !== "object" || cursor[segment] === null) {
-      cursor[segment] = {};
-    }
-    cursor = cursor[segment];
+
+// src/utils/getMappedUserProfileValue.ts
+import { get } from "@asgardeo/browser";
+var getMappedUserProfileValue = (key, mappings, user) => {
+  if (!key || !mappings || !user) return void 0;
+  const mapping = mappings[key];
+  if (!mapping) return get(user, key);
+  if (Array.isArray(mapping)) {
+    let foundValue;
+    let found = false;
+    mapping.some((path) => {
+      const value = get(user, path);
+      if (value !== void 0 && value !== null && value !== "") {
+        foundValue = value;
+        found = true;
+        return true;
+      }
+      return false;
+    });
+    return found ? foundValue : void 0;
   }
-  cursor[segments[segments.length - 1]] = value;
+  return get(user, mapping);
 };
-var buildScimPatchValue = (flatKey, rawValue, schemas) => {
-  const list = schemas ?? [];
-  const entry = list.find((s) => s.name === flatKey);
+var getMappedUserProfileValue_default = getMappedUserProfileValue;
+
+// src/utils/getDisplayName.ts
+var getDisplayName = (mergedMappings, user, displayAttributes) => {
+  if (displayAttributes && displayAttributes.length > 0) {
+    let foundValue;
+    displayAttributes.some((attr) => {
+      const value = getMappedUserProfileValue_default(attr, mergedMappings, user);
+      if (value !== void 0 && value !== null && value !== "") {
+        foundValue = String(value);
+        return true;
+      }
+      return false;
+    });
+    if (foundValue !== void 0) return foundValue;
+  }
+  const firstName = getMappedUserProfileValue_default("firstName", mergedMappings, user);
+  const lastName = getMappedUserProfileValue_default("lastName", mergedMappings, user);
+  if (firstName && lastName) return `${firstName} ${lastName}`;
+  return getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user) || getMappedUserProfileValue_default("name", mergedMappings, user) || "User";
+};
+var getDisplayName_default = getDisplayName;
+
+// src/components/presentation/user-profile/BaseUserProfile.ts
+var FIELDS_TO_SKIP = [
+  "roles.default",
+  "active",
+  "groups",
+  "accountLocked",
+  "accountDisabled",
+  "oneTimePassword",
+  "userSourceId",
+  "idpType",
+  "localCredentialExists",
+  "ResourceType",
+  "ExternalID",
+  "MetaData",
+  "verifiedMobileNumbers",
+  "verifiedEmailAddresses",
+  "phoneNumbers.mobile",
+  "emailAddresses",
+  "preferredMFAOption"
+];
+var READONLY_FIELDS = ["username", "userName", "user_name"];
+var DEFAULT_ATTRIBUTE_MAPPINGS = {
+  email: ["emails", "email"],
+  firstName: ["name.givenName", "given_name"],
+  lastName: ["name.familyName", "family_name"],
+  picture: ["profile", "profileUrl", "picture", "URL"],
+  username: ["userName", "username", "user_name"]
+};
+var AVATAR_GRADIENTS = [
+  "linear-gradient(135deg, #4b6ef5 0%, #7c3aed 100%)",
+  "linear-gradient(135deg, #0ea5e9 0%, #4b6ef5 100%)",
+  "linear-gradient(135deg, #10b981 0%, #0ea5e9 100%)",
+  "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
+  "linear-gradient(135deg, #ec4899 0%, #7c3aed 100%)",
+  "linear-gradient(135deg, #8b5cf6 0%, #4b6ef5 100%)",
+  "linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%)",
+  "linear-gradient(135deg, #f97316 0%, #ec4899 100%)"
+];
+function getAvatarGradient(seed) {
+  if (!seed) return AVATAR_GRADIENTS[0];
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return AVATAR_GRADIENTS[Math.abs(hash) % AVATAR_GRADIENTS.length];
+}
+function formatLabel(key) {
+  return key.split(/(?=[A-Z])|[_.]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function buildScimPatchValue(flatKey, rawValue, schemaId, multiValued) {
   if (flatKey === "phoneNumbers.mobile") {
     return {
       phoneNumbers: [{ type: "mobile", value: rawValue }],
@@ -9638,240 +10003,362 @@ var buildScimPatchValue = (flatKey, rawValue, schemas) => {
       return { [head]: [{ type: tail, value: rawValue }] };
     }
   }
-  const value = entry?.multiValued ? [rawValue] : rawValue;
+  const value = multiValued ? [rawValue] : rawValue;
+  if (schemaId && schemaId !== WellKnownSchemaIds.User) {
+    return { [schemaId]: { [flatKey]: value } };
+  }
   const segments = flatKey.split(".");
   const nested = {};
-  setNestedPath(nested, segments, value);
-  const schemaId = entry?.schemaId;
-  if (schemaId && schemaId !== CORE_USER_SCHEMA_ID) {
-    return { [schemaId]: nested };
+  let cursor = nested;
+  for (let i = 0; i < segments.length - 1; i += 1) {
+    cursor[segments[i]] = {};
+    cursor = cursor[segments[i]];
   }
+  cursor[segments[segments.length - 1]] = value;
   return nested;
-};
-var AVATAR_GRADIENTS = [
-  "linear-gradient(135deg, #a855f7 0%, #ec4899 100%)",
-  "linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%)",
-  "linear-gradient(135deg, #22c55e 0%, #10b981 100%)",
-  "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
-  "linear-gradient(135deg, #ec4899 0%, #f43f5e 100%)",
-  "linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)",
-  "linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%)",
-  "linear-gradient(135deg, #f97316 0%, #eab308 100%)"
-];
-var getAvatarGradient = (seed) => {
-  if (!seed) return AVATAR_GRADIENTS[0];
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    const char = seed.charCodeAt(i);
-    hash = hash * 31 + char >>> 0;
-  }
-  return AVATAR_GRADIENTS[Math.abs(hash) % AVATAR_GRADIENTS.length];
-};
-var getUserInitials = (user) => {
-  if (!user) return "?";
-  const given = String(user["givenName"] || user["firstName"] || "");
-  const family = String(user["familyName"] || user["lastName"] || "");
-  if (given || family) return `${given.charAt(0)}${family.charAt(0)}`.toUpperCase();
-  const fallback = String(user["username"] || user["userName"] || user["email"] || user["sub"] || "");
-  return fallback.charAt(0).toUpperCase() || "?";
-};
+}
 var BaseUserProfile = defineComponent51({
   inheritAttrs: false,
   name: "BaseUserProfile",
   props: {
+    /** Avatar circle size. */
+    avatarSize: {
+      default: "lg",
+      type: String
+    },
     cardLayout: { default: true, type: Boolean },
+    /** Shadow / border style of the Card wrapper. */
+    cardVariant: {
+      default: "elevated",
+      type: String
+    },
     className: { default: "", type: String },
+    /** Tighter field spacing for modal / dropdown contexts. */
+    compact: { default: false, type: Boolean },
     editable: { default: true, type: Boolean },
     error: { default: null, type: String },
     flattenedProfile: { default: null, type: Object },
     hideFields: { default: () => [], type: Array },
     isLoading: { default: false, type: Boolean },
-    onUpdate: {
-      default: void 0,
-      type: Function
-    },
+    onUpdate: { default: void 0, type: Function },
     profile: { default: null, type: Object },
     schemas: { default: () => [], type: Array },
+    /** Whether to render the avatar hero banner. */
+    showAvatar: { default: true, type: Boolean },
     showFields: { default: () => [], type: Array },
     title: { default: "Profile", type: String }
   },
   setup(props, { slots }) {
     const editingFields = ref19({});
     const editedValues = ref19({});
-    return () => {
-      if (slots["default"]) {
-        return slots["default"]({
-          error: props.error,
-          isLoading: props.isLoading,
-          profile: props.flattenedProfile || props.profile
-        });
+    const px = withVendorCSSClassPrefix21;
+    function shouldShowField(fieldName) {
+      if (FIELDS_TO_SKIP.includes(fieldName)) return false;
+      if (props.hideFields && props.hideFields.length > 0 && props.hideFields.includes(fieldName)) return false;
+      if (props.showFields && props.showFields.length > 0) return props.showFields.includes(fieldName);
+      return true;
+    }
+    function startEditing(fieldName, currentValue) {
+      editedValues.value = { ...editedValues.value, [fieldName]: currentValue ?? "" };
+      editingFields.value = { ...editingFields.value, [fieldName]: true };
+    }
+    function cancelEditing(fieldName) {
+      const data = props.flattenedProfile || props.profile;
+      const originalValue = data?.[fieldName] ?? "";
+      editedValues.value = { ...editedValues.value, [fieldName]: originalValue };
+      editingFields.value = { ...editingFields.value, [fieldName]: false };
+    }
+    function saveField(schema) {
+      if (!props.onUpdate || !schema.name) return;
+      const value = editedValues.value[schema.name] ?? "";
+      const payload = buildScimPatchValue(
+        schema.name,
+        value,
+        schema.schemaId,
+        schema.multiValued
+      );
+      props.onUpdate(payload);
+      editingFields.value = { ...editingFields.value, [schema.name]: false };
+    }
+    function renderInput(schema) {
+      const fieldName = schema.name;
+      const currentValue = editedValues.value[fieldName];
+      switch (schema.type) {
+        case "DATE_TIME":
+          return h54(DatePicker_default, {
+            modelValue: String(currentValue ?? ""),
+            "onUpdate:modelValue": (v) => {
+              editedValues.value = { ...editedValues.value, [fieldName]: v };
+            },
+            placeholder: `Enter your ${(schema.displayName || fieldName).toLowerCase()}`,
+            required: schema.required
+          });
+        case "BOOLEAN":
+          return h54(Checkbox_default, {
+            label: schema.displayName || fieldName,
+            modelValue: Boolean(currentValue),
+            "onUpdate:modelValue": (v) => {
+              editedValues.value = { ...editedValues.value, [fieldName]: v };
+            }
+          });
+        default:
+          return h54(TextField_default, {
+            modelValue: String(currentValue ?? ""),
+            "onUpdate:modelValue": (v) => {
+              editedValues.value = { ...editedValues.value, [fieldName]: v };
+            },
+            placeholder: `Enter your ${(schema.displayName || fieldName).toLowerCase()}`,
+            required: schema.required
+          });
       }
-      const prefix = withVendorCSSClassPrefix21;
+    }
+    function renderSchemaFieldRow(schema) {
+      const { name, displayName, description, mutability, value } = schema;
+      if (!name || !shouldShowField(name)) return null;
+      const label = displayName || description || formatLabel(name);
+      const isReadonly = mutability === "READ_ONLY" || READONLY_FIELDS.includes(name);
+      const isEditable = Boolean(props.editable) && !isReadonly;
+      const isEditing = Boolean(editingFields.value[name]);
+      const hasValue = value !== void 0 && value !== null && value !== "";
+      if (!hasValue && !isEditing && !(isEditable && mutability === "READ_WRITE")) return null;
+      const editablePlaceholder = isEditable ? h54(
+        "span",
+        { class: px("user-profile__field-placeholder"), onClick: () => startEditing(name, value) },
+        `Enter your ${label.toLowerCase()}`
+      ) : null;
+      const displayValueNode = hasValue ? h54(Typography_default, { class: px("user-profile__field-value"), variant: "body1" }, () => String(value)) : editablePlaceholder;
+      return h54("div", { class: px("user-profile__field"), key: name }, [
+        h54("div", { class: px("user-profile__field-label-col") }, [
+          h54(Typography_default, { class: px("user-profile__field-label"), variant: "body2" }, () => label)
+        ]),
+        h54("div", { class: px("user-profile__field-value-col") }, [
+          isEditing ? h54("div", { class: px("user-profile__field-edit") }, [
+            renderInput(schema),
+            h54("div", { class: px("user-profile__field-edit-actions") }, [
+              h54(
+                Button_default,
+                { onClick: () => saveField(schema), size: "small", variant: "solid" },
+                () => "Save"
+              ),
+              h54(
+                Button_default,
+                { onClick: () => cancelEditing(name), size: "small", variant: "text" },
+                () => "Cancel"
+              )
+            ])
+          ]) : h54("div", { class: px("user-profile__field-display") }, [
+            displayValueNode,
+            isEditable ? h54(
+              "button",
+              {
+                "aria-label": `Edit ${label}`,
+                class: px("user-profile__field-edit-btn"),
+                onClick: () => startEditing(name, value),
+                type: "button"
+              },
+              [h54(PencilIcon)]
+            ) : null
+          ])
+        ])
+      ]);
+    }
+    function renderProfileWithoutSchemas() {
       const data = props.flattenedProfile || props.profile;
-      const dataRecord = data;
-      const initials = getUserInitials(dataRecord);
+      if (!data) return [];
+      return Object.entries(data).filter(([key, value]) => {
+        if (!shouldShowField(key)) return false;
+        return value !== void 0 && value !== null && value !== "";
+      }).sort(([a], [b]) => a.localeCompare(b)).map(
+        ([key, value]) => h54("div", { class: px("user-profile__field"), key }, [
+          h54("div", { class: px("user-profile__field-label-col") }, [
+            h54(Typography_default, { class: px("user-profile__field-label"), variant: "body2" }, () => formatLabel(key))
+          ]),
+          h54("div", { class: px("user-profile__field-value-col") }, [
+            h54(
+              Typography_default,
+              { class: px("user-profile__field-value"), variant: "body1" },
+              () => typeof value === "object" ? JSON.stringify(value) : String(value)
+            )
+          ])
+        ])
+      );
+    }
+    function renderHero(currentUser) {
+      const displayName = getDisplayName_default(DEFAULT_ATTRIBUTE_MAPPINGS, currentUser);
+      const email = getMappedUserProfileValue_default("email", DEFAULT_ATTRIBUTE_MAPPINGS, currentUser) || getMappedUserProfileValue_default("username", DEFAULT_ATTRIBUTE_MAPPINGS, currentUser);
       const avatarSeed = String(
-        (dataRecord && (dataRecord["username"] || dataRecord["userName"] || dataRecord["email"] || dataRecord["sub"])) ?? initials
+        currentUser["username"] || currentUser["userName"] || currentUser["email"] || currentUser["sub"] || displayName
       );
       const avatarGradient = getAvatarGradient(avatarSeed);
-      const children = [];
-      children.push(
-        h54("div", { class: prefix("user-profile__header") }, [
-          h54(Typography_default, { class: prefix("user-profile__title"), variant: "h5" }, () => props.title)
-        ])
-      );
-      children.push(h54(Divider_default, { class: prefix("user-profile__header-divider") }));
-      children.push(
-        h54("div", { class: prefix("user-profile__avatar-section") }, [
+      const initials = displayName.split(" ").map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase() || "?";
+      const avatarSizeClass = px(`user-profile__avatar--${props.avatarSize ?? "lg"}`);
+      return h54("div", { class: px("user-profile__hero") }, [
+        h54("div", { class: px("user-profile__avatar-wrapper") }, [
           h54(
             "div",
-            {
-              class: prefix("user-profile__avatar"),
-              style: { background: avatarGradient }
-            },
-            [h54("span", { class: prefix("user-profile__avatar-initials") }, initials)]
+            { class: [px("user-profile__avatar"), avatarSizeClass].join(" "), style: { background: avatarGradient } },
+            [h54("span", { class: px("user-profile__avatar-initials") }, initials)]
           )
+        ]),
+        h54("div", { class: px("user-profile__hero-info") }, [
+          h54("span", { class: px("user-profile__hero-name") }, displayName),
+          email ? h54("span", { class: px("user-profile__hero-subtitle") }, String(email)) : null
+        ])
+      ]);
+    }
+    return () => {
+      const data = props.flattenedProfile || props.profile;
+      if (!data && !props.isLoading) {
+        return slots["default"] ? slots["default"]({ error: props.error, isLoading: props.isLoading, profile: null }) : null;
+      }
+      if (slots["default"]) {
+        return slots["default"]({ error: props.error, isLoading: props.isLoading, profile: data });
+      }
+      const currentUser = data;
+      const schemas = props.schemas ?? [];
+      const hasSchemas = schemas.length > 0;
+      const rootClasses = [
+        px("user-profile"),
+        props.compact ? px("user-profile--compact") : "",
+        props.className ?? ""
+      ].filter(Boolean).join(" ");
+      const children = [];
+      children.push(
+        h54("div", { class: px("user-profile__header") }, [
+          h54("span", { class: px("user-profile__title") }, props.title ?? "Profile")
         ])
       );
+      children.push(h54(Divider_default, { class: px("user-profile__header-divider") }));
+      if (props.showAvatar !== false && currentUser) {
+        children.push(renderHero(currentUser));
+      }
       if (props.error) {
-        children.push(h54(Alert_default, { class: prefix("user-profile__error"), severity: "error" }, () => props.error));
+        children.push(h54(Alert_default, { class: px("user-profile__error"), severity: "error" }, () => props.error));
       }
       if (props.isLoading) {
-        children.push(h54("div", { class: prefix("user-profile__loading") }, [h54(Spinner_default)]));
-      } else if (data) {
-        const fieldDataRecord = data;
-        const descriptors = PROFILE_FIELD_DESCRIPTORS.filter((d) => {
-          const activeKey = d.keys.find((k) => k in fieldDataRecord);
-          const matchKey = activeKey ?? d.keys[0];
-          if (props.hideFields && props.hideFields.length > 0 && props.hideFields.includes(matchKey)) return false;
-          if (props.showFields && props.showFields.length > 0 && !props.showFields.some((f) => d.keys.includes(f)))
-            return false;
-          return true;
-        });
-        const fieldRows = [];
-        descriptors.forEach((descriptor) => {
-          const key = descriptor.keys.find((k) => k in fieldDataRecord) ?? descriptor.keys[0];
-          const value = fieldDataRecord[key];
-          const isReadonly = descriptor.readonly;
-          const isEditing = editingFields.value[key];
-          const isEmpty2 = value == null || value === "";
-          const { label } = descriptor;
-          fieldRows.push(
-            h54("div", { class: prefix("user-profile__field"), key }, [
-              // Label column
-              h54("div", { class: prefix("user-profile__field-label-col") }, [
-                h54(Typography_default, { class: prefix("user-profile__field-label"), variant: "body2" }, () => label)
-              ]),
-              // Value column
-              h54("div", { class: prefix("user-profile__field-value-col") }, [
-                isEditing ? h54("div", { class: prefix("user-profile__field-edit") }, [
-                  h54(TextField_default, {
-                    modelValue: editedValues.value[key] ?? String(value ?? ""),
-                    "onUpdate:modelValue": (v) => {
-                      editedValues.value = { ...editedValues.value, [key]: v };
-                    }
-                  }),
-                  h54("div", { class: prefix("user-profile__field-edit-actions") }, [
-                    h54(
-                      Button_default,
-                      {
-                        onClick: async () => {
-                          if (props.onUpdate) {
-                            await props.onUpdate({
-                              payload: buildScimPatchValue(key, editedValues.value[key] ?? "", props.schemas)
-                            });
-                          }
-                          editingFields.value = { ...editingFields.value, [key]: false };
-                        },
-                        size: "small",
-                        variant: "solid"
-                      },
-                      () => "Save"
-                    ),
-                    h54(
-                      Button_default,
-                      {
-                        onClick: () => {
-                          editingFields.value = { ...editingFields.value, [key]: false };
-                        },
-                        size: "small",
-                        variant: "text"
-                      },
-                      () => "Cancel"
-                    )
-                  ])
-                ]) : h54("div", { class: prefix("user-profile__field-display") }, [
-                  isEmpty2 ? h54(
-                    "span",
-                    {
-                      class: prefix("user-profile__field-placeholder"),
-                      onClick: props.editable && !isReadonly ? () => {
-                        editingFields.value = { ...editingFields.value, [key]: true };
-                        editedValues.value = { ...editedValues.value, [key]: "" };
-                      } : void 0
-                    },
-                    `Enter your ${label.toLowerCase()}`
-                  ) : h54(
-                    Typography_default,
-                    { class: prefix("user-profile__field-value"), variant: "body1" },
-                    () => String(value)
-                  ),
-                  props.editable && !isReadonly ? h54(
-                    "button",
-                    {
-                      "aria-label": `Edit ${label}`,
-                      class: prefix("user-profile__field-edit-btn"),
-                      onClick: () => {
-                        editingFields.value = { ...editingFields.value, [key]: true };
-                        editedValues.value = { ...editedValues.value, [key]: String(value ?? "") };
-                      },
-                      type: "button"
-                    },
-                    [h54(PencilIcon)]
-                  ) : null
-                ])
-              ])
-            ])
-          );
-        });
-        children.push(h54("div", { class: prefix("user-profile__fields") }, fieldRows));
+        children.push(h54("div", { class: px("user-profile__loading") }, [h54(Spinner_default)]));
+      } else if (hasSchemas) {
+        const fieldRows = schemas.filter((s) => s.name && shouldShowField(s.name)).sort((a, b) => {
+          const orderA = a.displayOrder ? parseInt(a.displayOrder, 10) : 999;
+          const orderB = b.displayOrder ? parseInt(b.displayOrder, 10) : 999;
+          return orderA - orderB;
+        }).map((schema) => {
+          const value = currentUser && schema.name ? currentUser[schema.name] : void 0;
+          return renderSchemaFieldRow({ ...schema, value });
+        }).filter((node) => node !== null);
+        children.push(h54("div", { class: px("user-profile__fields") }, fieldRows));
+      } else {
+        children.push(h54("div", { class: px("user-profile__fields") }, renderProfileWithoutSchemas()));
       }
       if (slots["footer"]) {
-        children.push(h54("div", { class: prefix("user-profile__footer") }, slots["footer"]()));
+        children.push(h54("div", { class: px("user-profile__footer") }, slots["footer"]()));
       }
       if (props.cardLayout) {
-        return h54(Card_default, { class: [prefix("user-profile"), props.className].filter(Boolean).join(" ") }, () => children);
+        return h54(Card_default, { class: rootClasses, variant: props.cardVariant ?? "elevated" }, () => children);
       }
-      return h54("div", { class: [prefix("user-profile"), props.className].filter(Boolean).join(" ") }, children);
+      return h54("div", { class: rootClasses }, children);
     };
   }
 });
 var BaseUserProfile_default = BaseUserProfile;
 
+// src/api/updateMeProfile.ts
+import {
+  AsgardeoSPAClient as AsgardeoSPAClient6,
+  updateMeProfile as baseUpdateMeProfile
+} from "@asgardeo/browser";
+var updateMeProfile = async ({ fetcher, instanceId = 0, ...requestConfig }) => {
+  const defaultFetcher = async (url, config) => {
+    const client = AsgardeoSPAClient6.getInstance(instanceId);
+    const httpClient = client.httpRequest.bind(client);
+    const response = await httpClient({
+      data: config.body ? JSON.parse(config.body) : void 0,
+      headers: config.headers,
+      method: config.method || "PATCH",
+      url
+    });
+    return {
+      json: () => Promise.resolve(response.data),
+      ok: response.status >= 200 && response.status < 300,
+      status: response.status,
+      statusText: response.statusText || "",
+      text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
+    };
+  };
+  return baseUpdateMeProfile({
+    ...requestConfig,
+    fetcher: fetcher || defaultFetcher
+  });
+};
+var updateMeProfile_default = updateMeProfile;
+
 // src/components/presentation/user-profile/UserProfile.ts
 var UserProfile3 = defineComponent52({
   name: "UserProfile",
   props: {
+    /** Avatar circle size. */
+    avatarSize: {
+      default: "lg",
+      type: String
+    },
+    /** Whether to render the component inside a Card wrapper. */
     cardLayout: { default: true, type: Boolean },
+    /** Shadow / border style of the card wrapper. */
+    cardVariant: {
+      default: "elevated",
+      type: String
+    },
+    /** Extra CSS class added to the root element. */
     className: { default: "", type: String },
+    /** Tighter spacing — useful when embedded in a modal or dropdown. */
+    compact: { default: false, type: Boolean },
+    /** Whether fields can be edited inline. */
     editable: { default: true, type: Boolean },
+    /** Fields to hide by name. */
     hideFields: { default: () => [], type: Array },
+    /** Whether to render the avatar hero section. */
+    showAvatar: { default: true, type: Boolean },
+    /** Fields to show exclusively (empty = show all). */
     showFields: { default: () => [], type: Array },
+    /** Card header title. */
     title: { default: "Profile", type: String }
   },
   setup(props, { slots }) {
-    const { flattenedProfile, schemas, updateProfile } = useUser_default();
+    const { baseUrl, instanceId } = useAsgardeo_default();
+    const { flattenedProfile, profile, schemas, onUpdateProfile } = useUser_default();
+    const { t } = useI18n_default();
+    const error = ref20(null);
+    async function handleProfileUpdate(payload) {
+      if (!baseUrl) return;
+      error.value = null;
+      try {
+        const response = await updateMeProfile_default({ baseUrl, instanceId, payload });
+        onUpdateProfile(response);
+      } catch (caughtError) {
+        let message = t("user.profile.update.generic.error") || "Failed to update profile. Please try again.";
+        if (caughtError instanceof AsgardeoError) {
+          message = caughtError.message;
+        }
+        error.value = message;
+      }
+    }
     return () => h55(
       BaseUserProfile_default,
       {
+        avatarSize: props.avatarSize,
         cardLayout: props.cardLayout,
+        cardVariant: props.cardVariant,
         class: withVendorCSSClassPrefix22("user-profile--styled"),
         className: props.className,
+        compact: props.compact,
         editable: props.editable,
+        error: error.value,
         flattenedProfile: flattenedProfile?.value,
         hideFields: props.hideFields,
-        onUpdate: updateProfile,
+        onUpdate: handleProfileUpdate,
+        profile: profile?.value?.profile ?? flattenedProfile?.value,
         schemas: schemas?.value,
+        showAvatar: props.showAvatar,
         showFields: props.showFields,
         title: props.title
       },
@@ -9883,26 +10370,111 @@ var UserProfile_default = UserProfile3;
 
 // src/components/presentation/user-dropdown/UserDropdown.ts
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24 } from "@asgardeo/browser";
-import { defineComponent as defineComponent54, h as h57, ref as ref21 } from "vue";
+import { defineComponent as defineComponent54, h as h57, ref as ref22 } from "vue";
 
 // src/components/presentation/user-dropdown/BaseUserDropdown.ts
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23 } from "@asgardeo/browser";
-import { defineComponent as defineComponent53, h as h56, ref as ref20 } from "vue";
+import {
+  defineComponent as defineComponent53,
+  h as h56,
+  onMounted as onMounted6,
+  onUnmounted as onUnmounted3,
+  ref as ref21
+} from "vue";
+var DEFAULT_ATTRIBUTE_MAPPINGS2 = {
+  email: ["emails", "email"],
+  firstName: ["name.givenName", "given_name"],
+  lastName: ["name.familyName", "family_name"],
+  username: ["userName", "username", "user_name"]
+};
+var MENU_MIN_WIDTHS = { lg: 280, md: 220, sm: 180 };
+var AVATAR_GRADIENTS2 = [
+  "linear-gradient(135deg, #4b6ef5 0%, #7c3aed 100%)",
+  "linear-gradient(135deg, #0ea5e9 0%, #4b6ef5 100%)",
+  "linear-gradient(135deg, #10b981 0%, #0ea5e9 100%)",
+  "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
+  "linear-gradient(135deg, #ec4899 0%, #7c3aed 100%)",
+  "linear-gradient(135deg, #8b5cf6 0%, #4b6ef5 100%)",
+  "linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%)",
+  "linear-gradient(135deg, #f97316 0%, #ec4899 100%)"
+];
+function getAvatarGradient2(seed) {
+  if (!seed) return AVATAR_GRADIENTS2[0];
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return AVATAR_GRADIENTS2[Math.abs(hash) % AVATAR_GRADIENTS2.length];
+}
+function resolveUserInfo(user) {
+  if (!user) {
+    return { displayName: "User", gradient: AVATAR_GRADIENTS2[0], initials: "?", subtitle: "" };
+  }
+  const displayName = getDisplayName_default(DEFAULT_ATTRIBUTE_MAPPINGS2, user) || "User";
+  const initials = displayName.split(" ").map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase() || "?";
+  const seed = String(
+    getMappedUserProfileValue_default("username", DEFAULT_ATTRIBUTE_MAPPINGS2, user) || getMappedUserProfileValue_default("email", DEFAULT_ATTRIBUTE_MAPPINGS2, user) || displayName
+  );
+  const subtitle = String(
+    getMappedUserProfileValue_default("email", DEFAULT_ATTRIBUTE_MAPPINGS2, user) || getMappedUserProfileValue_default("username", DEFAULT_ATTRIBUTE_MAPPINGS2, user) || ""
+  );
+  return { displayName, gradient: getAvatarGradient2(seed), initials, subtitle };
+}
 var BaseUserDropdown = defineComponent53({
   inheritAttrs: false,
   name: "BaseUserDropdown",
   props: {
     className: { default: "", type: String },
     isProfileModalOpen: { default: false, type: Boolean },
+    /**
+     * How to align the dropdown panel relative to the trigger.
+     * - `'auto'` (default) — opens toward the side with more viewport space.
+     * - `'left'` — panel left edge aligns with trigger left edge.
+     * - `'right'` — panel right edge aligns with trigger right edge.
+     */
+    menuAlign: { default: "auto", type: String },
+    /**
+     * Extra items rendered between the Profile link and Sign Out.
+     * Each item can carry an icon, a danger flag, and a separatorBefore flag.
+     */
+    menuItems: { default: void 0, type: Array },
     onProfileClick: { default: void 0, type: Function },
     onProfileModalClose: { default: void 0, type: Function },
     onSignOut: { default: void 0, type: Function },
     profileContent: { default: null, type: Object },
+    /** Show the animated chevron on the trigger. Default `false`. */
+    showChevron: { default: false, type: Boolean },
+    /** Controls avatar size on the trigger and spacing density of the menu. */
+    size: { default: "md", type: String },
     user: { default: null, type: Object }
   },
   setup(props, { slots }) {
-    const isOpen = ref20(false);
-    const prefix = withVendorCSSClassPrefix23;
+    const isOpen = ref21(false);
+    const containerRef = ref21(null);
+    const px = withVendorCSSClassPrefix23;
+    function handleClickOutside(event) {
+      if (containerRef.value && !containerRef.value.contains(event.target)) {
+        isOpen.value = false;
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") isOpen.value = false;
+    }
+    onMounted6(() => {
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    onUnmounted3(() => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    });
+    function resolveMenuAlign() {
+      if (props.menuAlign !== "auto") return props.menuAlign;
+      if (!containerRef.value) return "right";
+      const rect = containerRef.value.getBoundingClientRect();
+      const menuWidth = MENU_MIN_WIDTHS[props.size ?? "md"] ?? 220;
+      return window.innerWidth - rect.right >= menuWidth ? "right" : "left";
+    }
     return () => {
       if (slots["default"]) {
         return slots["default"]({
@@ -9913,85 +10485,148 @@ var BaseUserDropdown = defineComponent53({
           user: props.user
         });
       }
-      const resolveDisplayName = () => {
-        if (!props.user) return void 0;
-        const { displayName: displayName2, name, email, username, sub } = props.user;
-        if (typeof displayName2 === "string") return displayName2;
-        if (typeof name === "string") return name;
-        if (typeof name === "object" && name) {
-          const parts = [name.givenName, name.familyName].filter(Boolean);
-          if (parts.length > 0) return parts.join(" ");
-        }
-        if (typeof email === "string") return email;
-        if (typeof username === "string") return username;
-        if (typeof sub === "string") return sub;
-        return void 0;
-      };
-      const displayName = resolveDisplayName();
-      const children = [];
-      children.push(
-        h56(
-          "button",
-          {
-            class: prefix("user-dropdown__trigger"),
-            onClick: () => {
-              isOpen.value = !isOpen.value;
-            },
-            type: "button"
+      const { displayName, initials, gradient, subtitle } = resolveUserInfo(props.user ?? null);
+      const size = props.size ?? "md";
+      const avatarSizeClass = size !== "md" ? px(`user-dropdown__avatar--${size}`) : "";
+      const triggerClass = [
+        px("user-dropdown__trigger"),
+        isOpen.value ? px("user-dropdown__trigger--open") : ""
+      ].filter(Boolean).join(" ");
+      const trigger = h56(
+        "button",
+        {
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": "true",
+          class: triggerClass,
+          onClick: (e) => {
+            e.stopPropagation();
+            isOpen.value = !isOpen.value;
           },
-          [
-            h56("span", { class: prefix("user-dropdown__avatar") }, [h56(UserIcon, { size: 20 })]),
-            displayName ? h56(Typography_default, { class: prefix("user-dropdown__name"), variant: "body2" }, () => displayName) : null,
-            h56(ChevronDownIcon, { size: 16 })
-          ]
-        )
+          type: "button"
+        },
+        [
+          h56(
+            "span",
+            {
+              class: [px("user-dropdown__avatar"), avatarSizeClass].filter(Boolean).join(" "),
+              style: { background: gradient }
+            },
+            initials
+          ),
+          props.showChevron ? h56("span", { class: px("user-dropdown__chevron") }, [h56(ChevronDownIcon, { size: 14 })]) : null
+        ]
       );
+      let menu = null;
       if (isOpen.value) {
-        const menuItems = [];
-        if (props.onProfileClick) {
-          menuItems.push(
-            h56("button", { class: prefix("user-dropdown__item"), onClick: props.onProfileClick, type: "button" }, [
-              h56(UserIcon, { size: 16 }),
-              h56("span", null, "Profile")
+        const resolvedAlign = resolveMenuAlign();
+        const alignClass = resolvedAlign === "left" ? px("user-dropdown__menu--align-left") : "";
+        const sizeClass = size !== "md" ? px(`user-dropdown__menu--size-${size}`) : "";
+        const menuClass = [px("user-dropdown__menu"), alignClass, sizeClass].filter(Boolean).join(" ");
+        const menuChildren = [];
+        menuChildren.push(
+          h56("div", { class: px("user-dropdown__menu-header") }, [
+            h56("div", { class: px("user-dropdown__menu-header-avatar"), style: { background: gradient } }, initials),
+            h56("div", { class: px("user-dropdown__menu-header-info") }, [
+              h56("span", { class: px("user-dropdown__menu-header-name") }, displayName),
+              subtitle ? h56("span", { class: px("user-dropdown__menu-header-subtitle") }, subtitle) : null
             ])
+          ])
+        );
+        menuChildren.push(h56("div", { class: px("user-dropdown__menu-divider") }));
+        if (props.onProfileClick) {
+          menuChildren.push(
+            h56(
+              "button",
+              {
+                class: px("user-dropdown__item"),
+                onClick: () => {
+                  isOpen.value = false;
+                  props.onProfileClick();
+                },
+                type: "button"
+              },
+              [h56(UserIcon, { size: 15 }), h56("span", null, "Profile")]
+            )
           );
         }
+        if (props.menuItems && props.menuItems.length > 0) {
+          props.menuItems.forEach((item, idx) => {
+            if (item.separatorBefore) {
+              menuChildren.push(h56("div", { class: px("user-dropdown__menu-divider"), key: `sep-${idx}` }));
+            }
+            menuChildren.push(
+              h56(
+                "button",
+                {
+                  class: [px("user-dropdown__item"), item.danger ? px("user-dropdown__item--danger") : ""].filter(Boolean).join(" "),
+                  key: `item-${idx}`,
+                  onClick: () => {
+                    isOpen.value = false;
+                    item.onClick();
+                  },
+                  type: "button"
+                },
+                [item.icon ?? null, h56("span", null, item.label)]
+              )
+            );
+          });
+        }
         if (slots["items"]) {
-          menuItems.push(...slots["items"]() ?? []);
+          menuChildren.push(...slots["items"]() ?? []);
         }
         if (props.onSignOut) {
-          menuItems.push(
-            h56("button", { class: prefix("user-dropdown__item"), onClick: props.onSignOut, type: "button" }, [
-              h56(LogOutIcon, { size: 16 }),
-              h56("span", null, "Sign Out")
-            ])
+          menuChildren.push(h56("div", { class: px("user-dropdown__menu-divider") }));
+          menuChildren.push(
+            h56(
+              "button",
+              {
+                class: [px("user-dropdown__item"), px("user-dropdown__item--danger")].join(" "),
+                onClick: () => {
+                  isOpen.value = false;
+                  props.onSignOut();
+                },
+                type: "button"
+              },
+              [h56(LogOutIcon, { size: 15 }), h56("span", null, "Sign Out")]
+            )
           );
         }
-        children.push(h56("div", { class: prefix("user-dropdown__menu") }, menuItems));
+        menu = h56("div", { class: menuClass }, menuChildren.filter(Boolean));
       }
       const container = h56(
         "div",
-        { class: [prefix("user-dropdown"), props.className].filter(Boolean).join(" ") },
-        children
+        { class: [px("user-dropdown"), props.className].filter(Boolean).join(" "), ref: containerRef },
+        [trigger, menu]
       );
       if (props.isProfileModalOpen) {
         return h56("div", [
           container,
-          h56("div", { class: prefix("user-dropdown__modal-overlay") }, [
-            h56("div", { class: prefix("user-dropdown__modal-content") }, [
-              h56(
-                "button",
-                {
-                  "aria-label": "Close profile modal",
-                  class: prefix("user-dropdown__modal-close"),
-                  onClick: props.onProfileModalClose,
-                  type: "button"
-                },
-                [h56(XIcon, { size: 24 })]
-              ),
-              props.profileContent
-            ])
-          ])
+          h56(
+            "div",
+            {
+              class: px("user-dropdown__modal-overlay"),
+              onClick: (e) => {
+                if (e.target.classList.contains(px("user-dropdown__modal-overlay"))) {
+                  props.onProfileModalClose?.();
+                }
+              }
+            },
+            [
+              h56("div", { class: px("user-dropdown__modal-content") }, [
+                h56(
+                  "button",
+                  {
+                    "aria-label": "Close profile",
+                    class: px("user-dropdown__modal-close"),
+                    onClick: props.onProfileModalClose,
+                    type: "button"
+                  },
+                  [h56(XIcon, { size: 18 })]
+                ),
+                props.profileContent
+              ])
+            ]
+          )
         ]);
       }
       return container;
@@ -10005,20 +10640,52 @@ var UserDropdown = defineComponent54({
   emits: ["profileClick"],
   name: "UserDropdown",
   props: {
-    className: {
-      default: "",
+    /** Extra CSS class added to the root element. */
+    className: { default: "", type: String },
+    /**
+     * How to align the dropdown panel relative to the trigger button.
+     * - `'auto'` (default) — picks the side with more available viewport space at open time.
+     * - `'left'` — panel left edge aligns with trigger left edge.
+     * - `'right'` — panel right edge aligns with trigger right edge.
+     */
+    menuAlign: {
+      default: "auto",
+      type: String
+    },
+    /**
+     * Extra items inserted between the Profile link and Sign Out.
+     * Set `separatorBefore: true` on any item to add a divider line before it.
+     * Set `danger: true` for destructive actions (red styling).
+     * Pass an `icon` VNode to render an icon to the left of the label.
+     */
+    menuItems: {
+      default: void 0,
+      type: Array
+    },
+    /** Whether to show the animated down-chevron beside the avatar. Default `false`. */
+    showChevron: { default: false, type: Boolean },
+    /**
+     * Overall density / avatar size of the component.
+     * - `'sm'` — 28 px avatar, compact menu (180 px min-width).
+     * - `'md'` (default) — 32 px avatar, standard menu (220 px min-width).
+     * - `'lg'` — 38 px avatar, spacious menu (280 px min-width).
+     */
+    size: {
+      default: "md",
       type: String
     }
   },
   setup(props, { slots, emit }) {
     const { user, signOut } = useAsgardeo_default();
-    const isProfileModalOpen = ref21(false);
+    const isProfileModalOpen = ref22(false);
     return () => h57(
       BaseUserDropdown_default,
       {
         class: withVendorCSSClassPrefix24("user-dropdown--styled"),
         className: props.className,
         isProfileModalOpen: isProfileModalOpen.value,
+        menuAlign: props.menuAlign,
+        menuItems: props.menuItems,
         onProfileClick: () => {
           isProfileModalOpen.value = true;
           emit("profileClick");
@@ -10031,8 +10698,11 @@ var UserDropdown = defineComponent54({
         },
         profileContent: isProfileModalOpen.value ? h57(UserProfile_default, {
           cardLayout: false,
+          compact: true,
           editable: true
         }) : null,
+        showChevron: props.showChevron,
+        size: props.size,
         user: user.value
       },
       slots
@@ -10049,7 +10719,7 @@ import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25 } from "@asgarde
 import {
   defineComponent as defineComponent55,
   h as h58,
-  ref as ref22,
+  ref as ref23,
   watch as watch12
 } from "vue";
 var BaseAcceptInvite = defineComponent55({
@@ -10077,17 +10747,17 @@ var BaseAcceptInvite = defineComponent55({
   setup(props, { slots }) {
     const { meta: metaRef } = useFlowMeta_default();
     const { t } = useI18n_default();
-    const isLoading = ref22(false);
-    const isValidatingToken = ref22(true);
-    const isTokenInvalid = ref22(false);
-    const isComplete = ref22(false);
-    const currentFlow = ref22(null);
-    const apiError = ref22(null);
-    const completionTitle = ref22(void 0);
-    const formValues = ref22({});
-    const formErrors = ref22({});
-    const touchedFields = ref22({});
-    const isFormValid = ref22(true);
+    const isLoading = ref23(false);
+    const isValidatingToken = ref23(true);
+    const isTokenInvalid = ref23(false);
+    const isComplete = ref23(false);
+    const currentFlow = ref23(null);
+    const apiError = ref23(null);
+    const completionTitle = ref23(void 0);
+    const formValues = ref23({});
+    const formErrors = ref23({});
+    const touchedFields = ref23({});
+    const isFormValid = ref23(true);
     let tokenValidationAttempted = false;
     const handleError = (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.acceptInvite.errors.generic");
@@ -10109,8 +10779,8 @@ var BaseAcceptInvite = defineComponent55({
       }
     };
     useOAuthCallback({
-      currentFlowId: ref22(props.flowId ?? null),
-      isInitialized: ref22(true),
+      currentFlowId: ref23(props.flowId ?? null),
+      isInitialized: ref23(true),
       onComplete: () => {
         isComplete.value = true;
         isValidatingToken.value = false;
@@ -10486,7 +11156,7 @@ import { EmbeddedFlowType as EmbeddedFlowType4, withVendorCSSClassPrefix as with
 import {
   defineComponent as defineComponent57,
   h as h60,
-  ref as ref23,
+  ref as ref24,
   watch as watch13
 } from "vue";
 var BaseInviteUser = defineComponent57({
@@ -10519,17 +11189,17 @@ var BaseInviteUser = defineComponent57({
   setup(props, { slots }) {
     const { meta: metaRef } = useFlowMeta_default();
     const { t } = useI18n_default();
-    const isLoading = ref23(false);
-    const isFlowInitialized = ref23(false);
-    const currentFlow = ref23(null);
-    const apiError = ref23(null);
-    const formValues = ref23({});
-    const formErrors = ref23({});
-    const touchedFields = ref23({});
-    const isFormValid = ref23(true);
-    const inviteLink = ref23(void 0);
-    const inviteLinkCopied = ref23(false);
-    const emailSent = ref23(false);
+    const isLoading = ref24(false);
+    const isFlowInitialized = ref24(false);
+    const currentFlow = ref24(null);
+    const apiError = ref24(null);
+    const formValues = ref24({});
+    const formErrors = ref24({});
+    const touchedFields = ref24({});
+    const isFormValid = ref24(true);
+    const inviteLink = ref24(void 0);
+    const inviteLinkCopied = ref24(false);
+    const emailSent = ref24(false);
     let initializationAttempted = false;
     const handleError = (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.inviteUser.errors.generic");
@@ -10996,7 +11666,7 @@ import { defineComponent as defineComponent62, h as h65 } from "vue";
 
 // src/components/presentation/organization-profile/BaseOrganizationProfile.ts
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix29 } from "@asgardeo/browser";
-import { defineComponent as defineComponent61, h as h64, ref as ref24 } from "vue";
+import { defineComponent as defineComponent61, h as h64, ref as ref25 } from "vue";
 var ORG_AVATAR_GRADIENTS = [
   "linear-gradient(135deg, #22d3ee 0%, #2dd4bf 100%)",
   "linear-gradient(135deg, #34d399 0%, #059669 100%)",
@@ -11041,10 +11711,10 @@ var BaseOrganizationProfile = defineComponent61({
     title: { default: "Organization Profile", type: String }
   },
   setup(props, { slots }) {
-    const editingName = ref24(false);
-    const editingDescription = ref24(false);
-    const editedName = ref24("");
-    const editedDescription = ref24("");
+    const editingName = ref25(false);
+    const editingDescription = ref25(false);
+    const editedName = ref25("");
+    const editedDescription = ref25("");
     return () => {
       if (slots["default"]) {
         return slots["default"]({ organization: props.organization });
@@ -11350,7 +12020,7 @@ import { defineComponent as defineComponent64, h as h67 } from "vue";
 
 // src/components/presentation/organization-switcher/BaseOrganizationSwitcher.ts
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix31 } from "@asgardeo/browser";
-import { defineComponent as defineComponent63, h as h66, ref as ref25 } from "vue";
+import { defineComponent as defineComponent63, h as h66, ref as ref26 } from "vue";
 var cls = (name) => withVendorCSSClassPrefix31(`organization-switcher${name}`);
 var BaseOrganizationSwitcher = defineComponent63({
   inheritAttrs: false,
@@ -11363,7 +12033,7 @@ var BaseOrganizationSwitcher = defineComponent63({
     organizations: { default: () => [], type: Array }
   },
   setup(props, { slots }) {
-    const isOpen = ref25(false);
+    const isOpen = ref26(false);
     const toggle = () => {
       isOpen.value = !isOpen.value;
     };
@@ -11460,7 +12130,7 @@ import { defineComponent as defineComponent66, h as h69 } from "vue";
 
 // src/components/presentation/create-organization/BaseCreateOrganization.ts
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix33 } from "@asgardeo/browser";
-import { defineComponent as defineComponent65, h as h68, ref as ref26 } from "vue";
+import { defineComponent as defineComponent65, h as h68, ref as ref27 } from "vue";
 var cls2 = (name) => withVendorCSSClassPrefix33(`create-organization${name}`);
 var BaseCreateOrganization = defineComponent65({
   name: "BaseCreateOrganization",
@@ -11471,9 +12141,9 @@ var BaseCreateOrganization = defineComponent65({
     title: { default: "Create Organization", type: String }
   },
   setup(props, { slots }) {
-    const orgName = ref26("");
-    const isSubmitting = ref26(false);
-    const error = ref26(null);
+    const orgName = ref27("");
+    const isSubmitting = ref27(false);
+    const error = ref27(null);
     const handleSubmit = async () => {
       const name = orgName.value.trim();
       if (!name) {
@@ -11567,7 +12237,7 @@ import { defineComponent as defineComponent68, h as h71 } from "vue";
 
 // src/components/presentation/language-switcher/BaseLanguageSwitcher.ts
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix35 } from "@asgardeo/browser";
-import { defineComponent as defineComponent67, h as h70, ref as ref27 } from "vue";
+import { defineComponent as defineComponent67, h as h70, ref as ref28 } from "vue";
 var cls3 = (name) => withVendorCSSClassPrefix35(`language-switcher${name}`);
 var BaseLanguageSwitcher = defineComponent67({
   name: "BaseLanguageSwitcher",
@@ -11578,7 +12248,7 @@ var BaseLanguageSwitcher = defineComponent67({
     onLanguageChange: { default: void 0, type: Function }
   },
   setup(props, { slots }) {
-    const isOpen = ref27(false);
+    const isOpen = ref28(false);
     const toggle = () => {
       isOpen.value = !isOpen.value;
     };
@@ -11884,7 +12554,7 @@ export {
   Logo_default as Logo,
   MicrosoftButton_default as MicrosoftButton,
   ORGANIZATION_KEY,
-  Organization_default as OrganizationComponent,
+  Organization_default as Organization,
   OrganizationList_default as OrganizationList,
   OrganizationProfile_default as OrganizationProfile,
   OrganizationProvider_default as OrganizationProvider,
@@ -11908,7 +12578,7 @@ export {
   TriangleAlertIcon,
   Typography_default as Typography,
   USER_KEY,
-  User_default as UserComponent,
+  User_default as User,
   UserDropdown_default as UserDropdown,
   UserIcon,
   UserProfile_default as UserProfile,