@asgardeo/react 0.7.0 → 0.8.0

package/dist/index.js

@@ -7178,6 +7178,22 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
     }
   )
 ).filter(Boolean);
+var renderInviteUserComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
+  (component, index) => createAuthComponentFromFlow(
+    component,
+    formValues,
+    touchedFields,
+    formErrors,
+    isLoading,
+    isFormValid,
+    onInputChange,
+    "signup",
+    {
+      ...options,
+      key: component.id || index
+    }
+  )
+).filter(Boolean);
 
 // src/utils/v2/resolveTranslation.ts
 var isTranslationString = (text) => {
@@ -7697,7 +7713,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     sessionStorage.removeItem("asgardeo_auth_id");
     oauthCodeProcessedRef.current = false;
   };
-  const getUrlParams = () => {
+  const getUrlParams2 = () => {
     const urlParams = new URL(window?.location?.href ?? "").searchParams;
     return {
       code: urlParams.get("code"),
@@ -7757,7 +7773,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
         if (response.flowId) {
           setFlowId(response.flowId);
         }
-        const urlParams = getUrlParams();
+        const urlParams = getUrlParams2();
         handleAuthId(urlParams.authId);
         window.location.href = redirectURL;
         return true;
@@ -7767,7 +7783,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
   };
   useEffect13(() => {
     const storedFlowId = sessionStorage.getItem("asgardeo_flow_id");
-    const urlParams = getUrlParams();
+    const urlParams = getUrlParams2();
     if (urlParams.error) {
       handleOAuthError(urlParams.error, urlParams.errorDescription);
       return;
@@ -7776,14 +7792,14 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     if (urlParams.code || urlParams.state) {
       return;
     }
-    const currentUrlParams = getUrlParams();
+    const currentUrlParams = getUrlParams2();
     if (isInitialized && !isLoading && !isFlowInitialized && !initializationAttemptedRef.current && !currentFlowId && !currentUrlParams.code && !currentUrlParams.state && !isSubmitting && !oauthCodeProcessedRef.current) {
       initializationAttemptedRef.current = true;
       initializeFlow();
     }
   }, [isInitialized, isLoading, isFlowInitialized, currentFlowId]);
   const initializeFlow = async () => {
-    const urlParams = getUrlParams();
+    const urlParams = getUrlParams2();
     oauthCodeProcessedRef.current = false;
     handleAuthId(urlParams.authId);
     const effectiveApplicationId = applicationId || urlParams.applicationId;
@@ -7895,7 +7911,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     setError(error);
   };
   useEffect13(() => {
-    const urlParams = getUrlParams();
+    const urlParams = getUrlParams2();
     const storedFlowId = sessionStorage.getItem("asgardeo_flow_id");
     if (urlParams.error) {
       handleOAuthError(urlParams.error, urlParams.errorDescription);
@@ -9522,7 +9538,7 @@ var BaseSignUpContent2 = ({
       handleInputBlur
     ]
   );
-  const getUrlParams = () => {
+  const getUrlParams2 = () => {
     const urlParams = new URL(window?.location?.href ?? "").searchParams;
     return {
       code: urlParams.get("code"),
@@ -9531,7 +9547,7 @@ var BaseSignUpContent2 = ({
     };
   };
   useEffect15(() => {
-    const urlParams = getUrlParams();
+    const urlParams = getUrlParams2();
     if (urlParams.code || urlParams.state) {
       return;
     }
@@ -9692,131 +9708,1003 @@ var SignUp = ({
       onComplete: handleComplete,
       className,
       size,
-      isInitialized,
-      children,
-      showLogo: true,
-      showTitle: false,
-      showSubtitle: false,
-      ...rest
-    }
+      isInitialized,
+      children,
+      showLogo: true,
+      showTitle: false,
+      showSubtitle: false,
+      ...rest
+    }
+  );
+};
+var SignUp_default = SignUp;
+
+// src/components/presentation/auth/SignUp/v2/SignUp.tsx
+import {
+  EmbeddedFlowResponseType as EmbeddedFlowResponseType4,
+  EmbeddedFlowType as EmbeddedFlowType3
+} from "@asgardeo/browser";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var SignUp2 = ({
+  className,
+  size = "medium",
+  afterSignUpUrl,
+  onError,
+  onComplete,
+  shouldRedirectAfterSignUp = true,
+  children,
+  ...rest
+}) => {
+  const { signUp, isInitialized, applicationId } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const urlParams = new URL(window.location.href).searchParams;
+    const applicationIdFromUrl = urlParams.get("applicationId");
+    const effectiveApplicationId = applicationId || applicationIdFromUrl;
+    const initialPayload = payload || {
+      flowType: EmbeddedFlowType3.Registration,
+      ...effectiveApplicationId && { applicationId: effectiveApplicationId }
+    };
+    return await signUp(initialPayload);
+  };
+  const handleOnSubmit = async (payload) => await signUp(payload);
+  const handleComplete = (response) => {
+    onComplete?.(response);
+    if (shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType4.Redirection && afterSignUpUrl) {
+      window.location.href = afterSignUpUrl;
+    }
+    if (shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType4.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    !response.data.redirectURL.includes("auth")) {
+      window.location.href = response.data.redirectURL;
+    }
+  };
+  return /* @__PURE__ */ jsx71(
+    BaseSignUp_default2,
+    {
+      afterSignUpUrl,
+      onInitialize: handleInitialize,
+      onSubmit: handleOnSubmit,
+      onError,
+      onComplete: handleComplete,
+      className,
+      size,
+      isInitialized,
+      children,
+      showLogo: true,
+      showTitle: true,
+      showSubtitle: true,
+      ...rest
+    }
+  );
+};
+var SignUp_default2 = SignUp2;
+
+// src/components/presentation/auth/SignUp/SignUp.tsx
+import { jsx as jsx72 } from "react/jsx-runtime";
+var SignUp3 = (props) => {
+  const { platform } = useAsgardeo_default();
+  if (platform === Platform6.AsgardeoV2) {
+    return /* @__PURE__ */ jsx72(SignUp_default2, { ...props });
+  }
+  return /* @__PURE__ */ jsx72(SignUp_default, { ...props });
+};
+var SignUp_default3 = SignUp3;
+
+// src/components/presentation/auth/InviteUser/v2/InviteUser.tsx
+import { EmbeddedFlowType as EmbeddedFlowType5 } from "@asgardeo/browser";
+
+// src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx
+import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRef7, useState as useState19 } from "react";
+import { EmbeddedFlowType as EmbeddedFlowType4 } from "@asgardeo/browser";
+import { cx as cx23 } from "@emotion/css";
+
+// src/components/presentation/auth/InviteUser/v2/BaseInviteUser.styles.ts
+import { css as css18 } from "@emotion/css";
+import { useMemo as useMemo25 } from "react";
+var useStyles18 = (theme, colorScheme) => {
+  return useMemo25(() => {
+    const card = css18`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      min-width: 420px;
+    `;
+    const header = css18`
+      gap: 0;
+      align-items: center;
+    `;
+    const title = css18`
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+    const subtitle = css18`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+      color: ${theme.vars.colors.text.secondary};
+    `;
+    return {
+      card,
+      header,
+      title,
+      subtitle
+    };
+  }, [
+    theme.vars.colors.background.surface,
+    theme.vars.colors.text.primary,
+    theme.vars.colors.text.secondary,
+    theme.vars.borderRadius.large,
+    theme.vars.spacing.unit,
+    colorScheme
+  ]);
+};
+var BaseInviteUser_styles_default = useStyles18;
+
+// src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx
+import { jsx as jsx73, jsxs as jsxs30 } from "react/jsx-runtime";
+var BaseInviteUser = ({
+  onInitialize,
+  onSubmit,
+  onError,
+  onFlowChange,
+  onInviteLinkGenerated,
+  className = "",
+  children,
+  isInitialized = true,
+  size = "medium",
+  variant = "outlined",
+  showTitle = true,
+  showSubtitle = true
+}) => {
+  const { t } = useTranslation_default();
+  const { theme } = useTheme_default();
+  const styles = BaseInviteUser_styles_default(theme, theme.vars.colors.text.primary);
+  const [isLoading, setIsLoading] = useState19(false);
+  const [isFlowInitialized, setIsFlowInitialized] = useState19(false);
+  const [currentFlow, setCurrentFlow] = useState19(null);
+  const [apiError, setApiError] = useState19(null);
+  const [formValues, setFormValues] = useState19({});
+  const [formErrors, setFormErrors] = useState19({});
+  const [touchedFields, setTouchedFields] = useState19({});
+  const [inviteLink, setInviteLink] = useState19();
+  const [inviteLinkCopied, setInviteLinkCopied] = useState19(false);
+  const [isFormValid, setIsFormValid] = useState19(true);
+  const initializationAttemptedRef = useRef7(false);
+  const handleError = useCallback13(
+    (error) => {
+      const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.inviteUser.errors.generic");
+      setApiError(error instanceof Error ? error : new Error(errorMessage));
+      onError?.(error instanceof Error ? error : new Error(errorMessage));
+    },
+    [t, onError]
+  );
+  const normalizeFlowResponseLocal = useCallback13(
+    (response) => {
+      if (!response?.data?.meta?.components) {
+        return response;
+      }
+      try {
+        const { components: components2 } = normalizeFlowResponse(response, t, {
+          defaultErrorKey: "components.inviteUser.errors.generic",
+          resolveTranslations: !children
+        });
+        return {
+          ...response,
+          data: {
+            ...response.data,
+            components: components2
+          }
+        };
+      } catch {
+        return response;
+      }
+    },
+    [t, children]
+  );
+  const handleInputChange = useCallback13((name, value) => {
+    setFormValues((prev) => ({ ...prev, [name]: value }));
+    setFormErrors((prev) => {
+      const newErrors = { ...prev };
+      delete newErrors[name];
+      return newErrors;
+    });
+  }, []);
+  const handleInputBlur = useCallback13((name) => {
+    setTouchedFields((prev) => ({ ...prev, [name]: true }));
+  }, []);
+  const validateForm = useCallback13(
+    (components2) => {
+      const errors = {};
+      const validateComponents = (comps) => {
+        comps.forEach((comp) => {
+          if ((comp.type === "TEXT_INPUT" || comp.type === "EMAIL_INPUT" || comp.type === "SELECT") && comp.required && comp.ref) {
+            const value = formValues[comp.ref];
+            if (!value || value.trim() === "") {
+              errors[comp.ref] = `${comp.label || comp.ref} is required`;
+            }
+            if (comp.type === "EMAIL_INPUT" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+              errors[comp.ref] = "Please enter a valid email address";
+            }
+          }
+          if (comp.components && Array.isArray(comp.components)) {
+            validateComponents(comp.components);
+          }
+        });
+      };
+      validateComponents(components2);
+      return { isValid: Object.keys(errors).length === 0, errors };
+    },
+    [formValues]
+  );
+  const handleSubmit = useCallback13(
+    async (component, data) => {
+      if (!currentFlow) {
+        return;
+      }
+      const components2 = currentFlow.data?.components || [];
+      const validation = validateForm(components2);
+      if (!validation.isValid) {
+        setFormErrors(validation.errors);
+        setIsFormValid(false);
+        const touched = {};
+        Object.keys(validation.errors).forEach((key) => {
+          touched[key] = true;
+        });
+        setTouchedFields((prev) => ({ ...prev, ...touched }));
+        return;
+      }
+      setIsLoading(true);
+      setApiError(null);
+      setIsFormValid(true);
+      try {
+        const inputs = data || formValues;
+        const payload = {
+          flowId: currentFlow.flowId,
+          inputs,
+          verbose: true
+        };
+        if (component?.id) {
+          payload["action"] = component.id;
+        }
+        const rawResponse = await onSubmit(payload);
+        const response = normalizeFlowResponseLocal(rawResponse);
+        onFlowChange?.(response);
+        if (response.data?.additionalData?.["inviteLink"]) {
+          const inviteLinkValue = response.data.additionalData["inviteLink"];
+          setInviteLink(inviteLinkValue);
+          onInviteLinkGenerated?.(inviteLinkValue, response.flowId);
+        }
+        if (response.flowStatus === "ERROR") {
+          handleError(response);
+          return;
+        }
+        setCurrentFlow(response);
+        setFormValues({});
+        setFormErrors({});
+        setTouchedFields({});
+      } catch (err) {
+        handleError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [currentFlow, formValues, validateForm, onSubmit, onFlowChange, onInviteLinkGenerated, handleError, normalizeFlowResponseLocal]
+  );
+  const copyInviteLink = useCallback13(async () => {
+    if (!inviteLink) return;
+    try {
+      await navigator.clipboard.writeText(inviteLink);
+      setInviteLinkCopied(true);
+      setTimeout(() => setInviteLinkCopied(false), 3e3);
+    } catch {
+      const textArea = document.createElement("textarea");
+      textArea.value = inviteLink;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textArea);
+      setInviteLinkCopied(true);
+      setTimeout(() => setInviteLinkCopied(false), 3e3);
+    }
+  }, [inviteLink]);
+  const resetFlow = useCallback13(() => {
+    setIsFlowInitialized(false);
+    setCurrentFlow(null);
+    setApiError(null);
+    setFormValues({});
+    setFormErrors({});
+    setTouchedFields({});
+    setInviteLink(void 0);
+    setInviteLinkCopied(false);
+    initializationAttemptedRef.current = false;
+  }, []);
+  useEffect16(() => {
+    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
+      initializationAttemptedRef.current = true;
+      (async () => {
+        setIsLoading(true);
+        setApiError(null);
+        try {
+          const payload = {
+            flowType: EmbeddedFlowType4.UserOnboarding,
+            verbose: true
+          };
+          const rawResponse = await onInitialize(payload);
+          const response = normalizeFlowResponseLocal(rawResponse);
+          setCurrentFlow(response);
+          setIsFlowInitialized(true);
+          onFlowChange?.(response);
+          if (response.flowStatus === "ERROR") {
+            handleError(response);
+          }
+        } catch (err) {
+          handleError(err);
+        } finally {
+          setIsLoading(false);
+        }
+      })();
+    }
+  }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);
+  useEffect16(() => {
+    if (currentFlow && isFlowInitialized) {
+      const components2 = currentFlow.data?.components || [];
+      if (components2.length > 0) {
+        const validation = validateForm(components2);
+        setIsFormValid(validation.isValid);
+      }
+    }
+  }, [formValues, currentFlow, isFlowInitialized, validateForm]);
+  const extractHeadings = useCallback13((components2) => {
+    let title2;
+    let subtitle2;
+    components2.forEach((comp) => {
+      if (comp.type === "TEXT") {
+        if (comp.variant === "HEADING_1" && !title2) {
+          title2 = comp.label;
+        } else if ((comp.variant === "HEADING_2" || comp.variant === "SUBTITLE_1") && !subtitle2) {
+          subtitle2 = comp.label;
+        }
+      }
+    });
+    return { title: title2, subtitle: subtitle2 };
+  }, []);
+  const filterHeadings = useCallback13((components2) => {
+    return components2.filter(
+      (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
+    );
+  }, []);
+  const renderComponents = useCallback13(
+    (components2) => renderInviteUserComponents(components2, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
+      onInputBlur: handleInputBlur,
+      onSubmit: handleSubmit,
+      size,
+      variant
+    }),
+    [formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, handleInputBlur, handleSubmit, size, variant]
+  );
+  const components = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];
+  const { title, subtitle } = extractHeadings(components);
+  const componentsWithoutHeadings = filterHeadings(components);
+  const isInviteGenerated = !!inviteLink;
+  const renderProps = {
+    values: formValues,
+    fieldErrors: formErrors,
+    error: apiError,
+    touched: touchedFields,
+    isLoading,
+    components,
+    inviteLink,
+    flowId: currentFlow?.flowId,
+    handleInputChange,
+    handleInputBlur,
+    handleSubmit,
+    isInviteGenerated,
+    title,
+    subtitle,
+    isValid: isFormValid,
+    copyInviteLink,
+    inviteLinkCopied,
+    resetFlow
+  };
+  if (children) {
+    return /* @__PURE__ */ jsx73("div", { className, children: children(renderProps) });
+  }
+  if (!isInitialized) {
+    return /* @__PURE__ */ jsx73(Card_default, { className: cx23(className, styles.card), variant, children: /* @__PURE__ */ jsx73(Card_default.Content, { children: /* @__PURE__ */ jsx73("div", { style: { display: "flex", justifyContent: "center", padding: "2rem" }, children: /* @__PURE__ */ jsx73(Spinner_default, { size: "medium" }) }) }) });
+  }
+  if (!isFlowInitialized && isLoading) {
+    return /* @__PURE__ */ jsx73(Card_default, { className: cx23(className, styles.card), variant, children: /* @__PURE__ */ jsx73(Card_default.Content, { children: /* @__PURE__ */ jsx73("div", { style: { display: "flex", justifyContent: "center", padding: "2rem" }, children: /* @__PURE__ */ jsx73(Spinner_default, { size: "medium" }) }) }) });
+  }
+  if (!currentFlow && apiError) {
+    return /* @__PURE__ */ jsx73(Card_default, { className: cx23(className, styles.card), variant, children: /* @__PURE__ */ jsx73(Card_default.Content, { children: /* @__PURE__ */ jsxs30(Alert_default, { variant: "error", children: [
+      /* @__PURE__ */ jsx73(Alert_default.Title, { children: "Error" }),
+      /* @__PURE__ */ jsx73(Alert_default.Description, { children: apiError.message })
+    ] }) }) });
+  }
+  if (isInviteGenerated && inviteLink) {
+    return /* @__PURE__ */ jsxs30(Card_default, { className: cx23(className, styles.card), variant, children: [
+      /* @__PURE__ */ jsx73(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ jsx73(Card_default.Title, { level: 2, className: styles.title, children: "Invite Link Generated!" }) }),
+      /* @__PURE__ */ jsxs30(Card_default.Content, { children: [
+        /* @__PURE__ */ jsx73(Alert_default, { variant: "success", children: /* @__PURE__ */ jsx73(Alert_default.Description, { children: "Share this link with the user to complete their registration." }) }),
+        /* @__PURE__ */ jsxs30("div", { style: { marginTop: "1rem" }, children: [
+          /* @__PURE__ */ jsx73(Typography_default, { variant: "body2", style: { marginBottom: "0.5rem" }, children: "Invite Link" }),
+          /* @__PURE__ */ jsxs30(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                padding: "0.75rem",
+                backgroundColor: "var(--asgardeo-color-background-secondary, #f5f5f5)",
+                borderRadius: "4px",
+                wordBreak: "break-all"
+              },
+              children: [
+                /* @__PURE__ */ jsx73(Typography_default, { variant: "body2", style: { flex: 1 }, children: inviteLink }),
+                /* @__PURE__ */ jsx73(Button_default, { variant: "outline", size: "small", onClick: copyInviteLink, children: inviteLinkCopied ? "Copied!" : "Copy" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx73("div", { style: { marginTop: "1.5rem", display: "flex", gap: "0.5rem" }, children: /* @__PURE__ */ jsx73(Button_default, { variant: "outline", onClick: resetFlow, children: "Invite Another User" }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs30(Card_default, { className: cx23(className, styles.card), variant, children: [
+    (showTitle || showSubtitle) && (title || subtitle) && /* @__PURE__ */ jsxs30(Card_default.Header, { className: styles.header, children: [
+      showTitle && title && /* @__PURE__ */ jsx73(Card_default.Title, { level: 2, className: styles.title, children: title }),
+      showSubtitle && subtitle && /* @__PURE__ */ jsx73(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs30(Card_default.Content, { children: [
+      apiError && /* @__PURE__ */ jsx73("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsx73(Alert_default, { variant: "error", children: /* @__PURE__ */ jsx73(Alert_default.Description, { children: apiError.message }) }) }),
+      /* @__PURE__ */ jsxs30("div", { children: [
+        componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : !isLoading && /* @__PURE__ */ jsx73(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx73(Typography_default, { variant: "body1", children: "No form components available" }) }),
+        isLoading && /* @__PURE__ */ jsx73("div", { style: { display: "flex", justifyContent: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx73(Spinner_default, { size: "small" }) })
+      ] })
+    ] })
+  ] });
+};
+var BaseInviteUser_default = BaseInviteUser;
+
+// src/components/presentation/auth/InviteUser/v2/InviteUser.tsx
+import { jsx as jsx74 } from "react/jsx-runtime";
+var InviteUser = ({
+  onInviteLinkGenerated,
+  onError,
+  onFlowChange,
+  className,
+  children,
+  size = "medium",
+  variant = "outlined",
+  showTitle = true,
+  showSubtitle = true
+}) => {
+  const { http: http2, baseUrl, isInitialized } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const response = await http2.request({
+      url: `${baseUrl}/flow/execute`,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      data: {
+        ...payload,
+        flowType: EmbeddedFlowType5.UserOnboarding,
+        verbose: true
+      }
+    });
+    return response.data;
+  };
+  const handleSubmit = async (payload) => {
+    const response = await http2.request({
+      url: `${baseUrl}/flow/execute`,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      data: {
+        ...payload,
+        verbose: true
+      }
+    });
+    return response.data;
+  };
+  return /* @__PURE__ */ jsx74(
+    BaseInviteUser_default,
+    {
+      onInitialize: handleInitialize,
+      onSubmit: handleSubmit,
+      onInviteLinkGenerated,
+      onError,
+      onFlowChange,
+      className,
+      isInitialized,
+      size,
+      variant,
+      showTitle,
+      showSubtitle,
+      children
+    }
+  );
+};
+var InviteUser_default = InviteUser;
+
+// src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx
+import { useMemo as useMemo27 } from "react";
+
+// src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.tsx
+import { useCallback as useCallback14, useEffect as useEffect17, useRef as useRef8, useState as useState20 } from "react";
+import { cx as cx24 } from "@emotion/css";
+
+// src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.styles.ts
+import { css as css19 } from "@emotion/css";
+import { useMemo as useMemo26 } from "react";
+var useStyles19 = (theme, colorScheme) => {
+  return useMemo26(() => {
+    const card = css19`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      min-width: 420px;
+    `;
+    const header = css19`
+      gap: 0;
+      align-items: center;
+    `;
+    const title = css19`
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+    const subtitle = css19`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+      color: ${theme.vars.colors.text.secondary};
+    `;
+    return {
+      card,
+      header,
+      title,
+      subtitle
+    };
+  }, [
+    theme.vars.colors.background.surface,
+    theme.vars.colors.text.primary,
+    theme.vars.colors.text.secondary,
+    theme.vars.borderRadius.large,
+    theme.vars.spacing.unit,
+    colorScheme
+  ]);
+};
+var BaseAcceptInvite_styles_default = useStyles19;
+
+// src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.tsx
+import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
+var BaseAcceptInvite = ({
+  flowId,
+  inviteToken,
+  onSubmit,
+  onComplete,
+  onError,
+  onFlowChange,
+  onGoToSignIn,
+  className = "",
+  children,
+  size = "medium",
+  variant = "outlined",
+  showTitle = true,
+  showSubtitle = true
+}) => {
+  const { t } = useTranslation_default();
+  const { theme } = useTheme_default();
+  const styles = BaseAcceptInvite_styles_default(theme, theme.vars.colors.text.primary);
+  const [isLoading, setIsLoading] = useState20(false);
+  const [isValidatingToken, setIsValidatingToken] = useState20(true);
+  const [isTokenInvalid, setIsTokenInvalid] = useState20(false);
+  const [isComplete, setIsComplete] = useState20(false);
+  const [currentFlow, setCurrentFlow] = useState20(null);
+  const [apiError, setApiError] = useState20(null);
+  const [formValues, setFormValues] = useState20({});
+  const [formErrors, setFormErrors] = useState20({});
+  const [touchedFields, setTouchedFields] = useState20({});
+  const [isFormValid, setIsFormValid] = useState20(true);
+  const [completionTitle, setCompletionTitle] = useState20(void 0);
+  const tokenValidationAttemptedRef = useRef8(false);
+  const handleError = useCallback14(
+    (error) => {
+      const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.acceptInvite.errors.generic");
+      setApiError(error instanceof Error ? error : new Error(errorMessage));
+      onError?.(error instanceof Error ? error : new Error(errorMessage));
+    },
+    [t, onError]
+  );
+  const normalizeFlowResponseLocal = useCallback14(
+    (response) => {
+      if (!response?.data?.meta?.components) {
+        return response;
+      }
+      try {
+        const { components: components2 } = normalizeFlowResponse(response, t, {
+          defaultErrorKey: "components.acceptInvite.errors.generic",
+          resolveTranslations: !children
+        });
+        return {
+          ...response,
+          data: {
+            ...response.data,
+            components: components2
+          }
+        };
+      } catch {
+        return response;
+      }
+    },
+    [t, children]
+  );
+  const handleInputChange = useCallback14((name, value) => {
+    setFormValues((prev) => ({ ...prev, [name]: value }));
+    setFormErrors((prev) => {
+      const newErrors = { ...prev };
+      delete newErrors[name];
+      return newErrors;
+    });
+  }, []);
+  const handleInputBlur = useCallback14((name) => {
+    setTouchedFields((prev) => ({ ...prev, [name]: true }));
+  }, []);
+  const validateForm = useCallback14(
+    (components2) => {
+      const errors = {};
+      const validateComponents = (comps) => {
+        comps.forEach((comp) => {
+          if ((comp.type === "PASSWORD_INPUT" || comp.type === "TEXT_INPUT" || comp.type === "EMAIL_INPUT") && comp.required && comp.ref) {
+            const value = formValues[comp.ref];
+            if (!value || value.trim() === "") {
+              errors[comp.ref] = `${comp.label || comp.ref} is required`;
+            }
+          }
+          if (comp.components && Array.isArray(comp.components)) {
+            validateComponents(comp.components);
+          }
+        });
+      };
+      validateComponents(components2);
+      return { isValid: Object.keys(errors).length === 0, errors };
+    },
+    [formValues]
+  );
+  const handleSubmit = useCallback14(
+    async (component, data) => {
+      if (!currentFlow) {
+        return;
+      }
+      const components2 = currentFlow.data?.components || [];
+      const validation = validateForm(components2);
+      if (!validation.isValid) {
+        setFormErrors(validation.errors);
+        setIsFormValid(false);
+        const touched = {};
+        Object.keys(validation.errors).forEach((key) => {
+          touched[key] = true;
+        });
+        setTouchedFields((prev) => ({ ...prev, ...touched }));
+        return;
+      }
+      setIsLoading(true);
+      setApiError(null);
+      setIsFormValid(true);
+      try {
+        const inputs = data || formValues;
+        const payload = {
+          flowId: currentFlow.flowId,
+          inputs,
+          verbose: true
+        };
+        if (component?.id) {
+          payload["action"] = component.id;
+        }
+        const rawResponse = await onSubmit(payload);
+        const response = normalizeFlowResponseLocal(rawResponse);
+        onFlowChange?.(response);
+        if (currentFlow?.data?.components || currentFlow?.data?.meta?.components) {
+          const currentComponents = currentFlow.data.components || currentFlow.data.meta?.components || [];
+          const heading = currentComponents.find(
+            (comp) => comp.type === "TEXT" && comp.variant === "HEADING_1"
+          );
+          if (heading?.label) {
+            setCompletionTitle(heading.label);
+          }
+        }
+        if (response.flowStatus === "COMPLETE") {
+          setIsComplete(true);
+          onComplete?.();
+          return;
+        }
+        if (response.flowStatus === "ERROR") {
+          handleError(response);
+          return;
+        }
+        setCurrentFlow(response);
+        setFormValues({});
+        setFormErrors({});
+        setTouchedFields({});
+      } catch (err) {
+        handleError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [currentFlow, formValues, validateForm, onSubmit, onFlowChange, onComplete, handleError, normalizeFlowResponseLocal]
+  );
+  useEffect17(() => {
+    if (!flowId || !inviteToken || tokenValidationAttemptedRef.current) {
+      if (!flowId || !inviteToken) {
+        setIsValidatingToken(false);
+        setIsTokenInvalid(true);
+        handleError(new Error("Invalid invite link. Missing flowId or inviteToken."));
+      }
+      return;
+    }
+    tokenValidationAttemptedRef.current = true;
+    (async () => {
+      setIsValidatingToken(true);
+      setApiError(null);
+      try {
+        const payload = {
+          flowId,
+          inputs: {
+            inviteToken
+          },
+          verbose: true
+        };
+        const rawResponse = await onSubmit(payload);
+        const response = normalizeFlowResponseLocal(rawResponse);
+        onFlowChange?.(response);
+        if (response.flowStatus === "ERROR") {
+          setIsTokenInvalid(true);
+          handleError(response);
+          return;
+        }
+        setCurrentFlow(response);
+      } catch (err) {
+        setIsTokenInvalid(true);
+        handleError(err);
+      } finally {
+        setIsValidatingToken(false);
+      }
+    })();
+  }, [flowId, inviteToken, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal]);
+  const extractHeadings = useCallback14((components2) => {
+    let title2;
+    let subtitle2;
+    components2.forEach((comp) => {
+      if (comp.type === "TEXT") {
+        if (comp.variant === "HEADING_1" && !title2) {
+          title2 = comp.label;
+        } else if ((comp.variant === "HEADING_2" || comp.variant === "SUBTITLE_1") && !subtitle2) {
+          subtitle2 = comp.label;
+        }
+      }
+    });
+    return { title: title2, subtitle: subtitle2 };
+  }, []);
+  const filterHeadings = useCallback14((components2) => {
+    return components2.filter(
+      (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
+    );
+  }, []);
+  const renderComponents = useCallback14(
+    (components2) => renderInviteUserComponents(components2, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
+      onInputBlur: handleInputBlur,
+      onSubmit: handleSubmit,
+      size,
+      variant
+    }),
+    [formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, handleInputBlur, handleSubmit, size, variant]
   );
+  const components = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];
+  const { title, subtitle } = extractHeadings(components);
+  const componentsWithoutHeadings = filterHeadings(components);
+  const renderProps = {
+    values: formValues,
+    fieldErrors: formErrors,
+    error: apiError,
+    touched: touchedFields,
+    isLoading,
+    components,
+    flowId,
+    inviteToken,
+    handleInputChange,
+    handleInputBlur,
+    handleSubmit,
+    isComplete,
+    isValidatingToken,
+    isTokenInvalid,
+    title,
+    subtitle,
+    isValid: isFormValid,
+    goToSignIn: onGoToSignIn,
+    completionTitle
+  };
+  if (children) {
+    return /* @__PURE__ */ jsx75("div", { className, children: children(renderProps) });
+  }
+  if (isValidatingToken) {
+    return /* @__PURE__ */ jsx75(Card_default, { className: cx24(className, styles.card), variant, children: /* @__PURE__ */ jsx75(Card_default.Content, { children: /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", padding: "2rem", gap: "1rem" }, children: [
+      /* @__PURE__ */ jsx75(Spinner_default, { size: "medium" }),
+      /* @__PURE__ */ jsx75(Typography_default, { variant: "body1", children: "Validating your invite link..." })
+    ] }) }) });
+  }
+  if (isTokenInvalid) {
+    return /* @__PURE__ */ jsxs31(Card_default, { className: cx24(className, styles.card), variant, children: [
+      /* @__PURE__ */ jsx75(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ jsx75(Card_default.Title, { level: 2, className: styles.title, children: "Invalid Invite Link" }) }),
+      /* @__PURE__ */ jsxs31(Card_default.Content, { children: [
+        /* @__PURE__ */ jsxs31(Alert_default, { variant: "error", children: [
+          /* @__PURE__ */ jsx75(Alert_default.Title, { children: "Unable to verify invite" }),
+          /* @__PURE__ */ jsx75(Alert_default.Description, { children: apiError?.message || "This invite link is invalid or has expired. Please contact your administrator for a new invite." })
+        ] }),
+        onGoToSignIn && /* @__PURE__ */ jsx75("div", { style: { marginTop: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx75(Button_default, { variant: "outline", onClick: onGoToSignIn, children: "Go to Sign In" }) })
+      ] })
+    ] });
+  }
+  if (isComplete) {
+    return /* @__PURE__ */ jsxs31(Card_default, { className: cx24(className, styles.card), variant, children: [
+      /* @__PURE__ */ jsx75(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ jsx75(Card_default.Title, { level: 2, className: styles.title, children: "Account Setup Complete!" }) }),
+      /* @__PURE__ */ jsxs31(Card_default.Content, { children: [
+        /* @__PURE__ */ jsx75(Alert_default, { variant: "success", children: /* @__PURE__ */ jsx75(Alert_default.Description, { children: "Your account has been successfully set up. You can now sign in with your credentials." }) }),
+        onGoToSignIn && /* @__PURE__ */ jsx75("div", { style: { marginTop: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx75(Button_default, { variant: "solid", color: "primary", onClick: onGoToSignIn, children: "Sign In" }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs31(Card_default, { className: cx24(className, styles.card), variant, children: [
+    (showTitle || showSubtitle) && (title || subtitle) && /* @__PURE__ */ jsxs31(Card_default.Header, { className: styles.header, children: [
+      showTitle && title && /* @__PURE__ */ jsx75(Card_default.Title, { level: 2, className: styles.title, children: title }),
+      showSubtitle && subtitle && /* @__PURE__ */ jsx75(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs31(Card_default.Content, { children: [
+      apiError && /* @__PURE__ */ jsx75("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsx75(Alert_default, { variant: "error", children: /* @__PURE__ */ jsx75(Alert_default.Description, { children: apiError.message }) }) }),
+      /* @__PURE__ */ jsxs31("div", { children: [
+        componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : !isLoading && /* @__PURE__ */ jsx75(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx75(Typography_default, { variant: "body1", children: "No form components available" }) }),
+        isLoading && /* @__PURE__ */ jsx75("div", { style: { display: "flex", justifyContent: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx75(Spinner_default, { size: "small" }) })
+      ] }),
+      onGoToSignIn && /* @__PURE__ */ jsx75("div", { style: { marginTop: "1.5rem", textAlign: "center" }, children: /* @__PURE__ */ jsxs31(Typography_default, { variant: "body2", children: [
+        "Already have an account?",
+        " ",
+        /* @__PURE__ */ jsx75(
+          Button_default,
+          {
+            variant: "text",
+            onClick: onGoToSignIn,
+            style: { padding: 0, minWidth: "auto" },
+            children: "Sign In"
+          }
+        )
+      ] }) })
+    ] })
+  ] });
 };
-var SignUp_default = SignUp;
+var BaseAcceptInvite_default = BaseAcceptInvite;
 
-// src/components/presentation/auth/SignUp/v2/SignUp.tsx
-import {
-  EmbeddedFlowResponseType as EmbeddedFlowResponseType4,
-  EmbeddedFlowType as EmbeddedFlowType3
-} from "@asgardeo/browser";
-import { jsx as jsx71 } from "react/jsx-runtime";
-var SignUp2 = ({
-  className,
-  size = "medium",
-  afterSignUpUrl,
-  onError,
+// src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx
+import { jsx as jsx76 } from "react/jsx-runtime";
+var getUrlParams = () => {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  const params = new URLSearchParams(window.location.search);
+  return {
+    flowId: params.get("flowId") || void 0,
+    inviteToken: params.get("inviteToken") || void 0
+  };
+};
+var AcceptInvite = ({
+  baseUrl,
+  flowId: flowIdProp,
+  inviteToken: inviteTokenProp,
   onComplete,
-  shouldRedirectAfterSignUp = true,
+  onError,
+  onFlowChange,
+  onGoToSignIn,
+  className,
   children,
-  ...rest
+  size = "medium",
+  variant = "outlined",
+  showTitle = true,
+  showSubtitle = true
 }) => {
-  const { signUp, isInitialized, applicationId } = useAsgardeo_default();
-  const handleInitialize = async (payload) => {
-    const urlParams = new URL(window.location.href).searchParams;
-    const applicationIdFromUrl = urlParams.get("applicationId");
-    const effectiveApplicationId = applicationId || applicationIdFromUrl;
-    const initialPayload = payload || {
-      flowType: EmbeddedFlowType3.Registration,
-      ...effectiveApplicationId && { applicationId: effectiveApplicationId }
-    };
-    return await signUp(initialPayload);
-  };
-  const handleOnSubmit = async (payload) => await signUp(payload);
-  const handleComplete = (response) => {
-    onComplete?.(response);
-    if (shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType4.Redirection && afterSignUpUrl) {
-      window.location.href = afterSignUpUrl;
+  const { flowId: urlFlowId, inviteToken: urlInviteToken } = useMemo27(() => getUrlParams(), []);
+  const flowId = flowIdProp || urlFlowId;
+  const inviteToken = inviteTokenProp || urlInviteToken;
+  const apiBaseUrl = useMemo27(() => {
+    if (baseUrl) {
+      return baseUrl;
     }
-    if (shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType4.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
-    !response.data.redirectURL.includes("auth")) {
-      window.location.href = response.data.redirectURL;
+    if (typeof window !== "undefined") {
+      return window.location.origin;
+    }
+    return "";
+  }, [baseUrl]);
+  const handleSubmit = async (payload) => {
+    const response = await fetch(`${apiBaseUrl}/flow/execute`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        ...payload,
+        verbose: true
+      })
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Request failed: ${errorText}`);
     }
+    return response.json();
   };
-  return /* @__PURE__ */ jsx71(
-    BaseSignUp_default2,
+  return /* @__PURE__ */ jsx76(
+    BaseAcceptInvite_default,
     {
-      afterSignUpUrl,
-      onInitialize: handleInitialize,
-      onSubmit: handleOnSubmit,
+      flowId,
+      inviteToken,
+      onSubmit: handleSubmit,
+      onComplete,
       onError,
-      onComplete: handleComplete,
+      onFlowChange,
+      onGoToSignIn,
       className,
       size,
-      isInitialized,
-      children,
-      showLogo: true,
-      showTitle: true,
-      showSubtitle: true,
-      ...rest
+      variant,
+      showTitle,
+      showSubtitle,
+      children
     }
   );
 };
-var SignUp_default2 = SignUp2;
-
-// src/components/presentation/auth/SignUp/SignUp.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
-var SignUp3 = (props) => {
-  const { platform } = useAsgardeo_default();
-  if (platform === Platform6.AsgardeoV2) {
-    return /* @__PURE__ */ jsx72(SignUp_default2, { ...props });
-  }
-  return /* @__PURE__ */ jsx72(SignUp_default, { ...props });
-};
-var SignUp_default3 = SignUp3;
+var AcceptInvite_default = AcceptInvite;
 
 // src/components/presentation/User/BaseUser.tsx
-import { Fragment as Fragment13, jsx as jsx73 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx77 } from "react/jsx-runtime";
 var BaseUser = ({ user, children, fallback = null }) => {
   if (!user) {
-    return /* @__PURE__ */ jsx73(Fragment13, { children: fallback });
+    return /* @__PURE__ */ jsx77(Fragment13, { children: fallback });
   }
-  return /* @__PURE__ */ jsx73(Fragment13, { children: children(user) });
+  return /* @__PURE__ */ jsx77(Fragment13, { children: children(user) });
 };
 BaseUser.displayName = "BaseUser";
 var BaseUser_default = BaseUser;
 
 // src/components/presentation/User/User.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var User5 = ({ children, fallback = null }) => {
   const { user } = useAsgardeo_default();
-  return /* @__PURE__ */ jsx74(BaseUser_default, { user, fallback, children });
+  return /* @__PURE__ */ jsx78(BaseUser_default, { user, fallback, children });
 };
 User5.displayName = "User";
 var User_default = User5;
 
 // src/components/presentation/Organization/BaseOrganization.tsx
-import { Fragment as Fragment14, jsx as jsx75 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx79 } from "react/jsx-runtime";
 var BaseOrganization = ({ children, fallback = null, organization }) => {
   if (!organization) {
-    return /* @__PURE__ */ jsx75(Fragment14, { children: fallback });
+    return /* @__PURE__ */ jsx79(Fragment14, { children: fallback });
   }
-  return /* @__PURE__ */ jsx75(Fragment14, { children: children(organization) });
+  return /* @__PURE__ */ jsx79(Fragment14, { children: children(organization) });
 };
 BaseOrganization.displayName = "BaseOrganization";
 var BaseOrganization_default = BaseOrganization;
 
 // src/components/presentation/Organization/Organization.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var Organization5 = ({ children, fallback = null }) => {
   const { currentOrganization } = useOrganization_default();
-  return /* @__PURE__ */ jsx76(BaseOrganization_default, { organization: currentOrganization, fallback, children });
+  return /* @__PURE__ */ jsx80(BaseOrganization_default, { organization: currentOrganization, fallback, children });
 };
 Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix27, WellKnownSchemaIds, bem as bem19 } from "@asgardeo/browser";
-import { cx as cx26 } from "@emotion/css";
-import { useState as useState20, useCallback as useCallback14 } from "react";
+import { cx as cx28 } from "@emotion/css";
+import { useState as useState22, useCallback as useCallback16 } from "react";
 
 // src/utils/getMappedUserProfileValue.ts
 import { get } from "@asgardeo/browser";
@@ -9843,15 +10731,15 @@ var getMappedUserProfileValue_default = getMappedUserProfileValue;
 
 // src/components/primitives/Avatar/Avatar.tsx
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23, bem as bem16 } from "@asgardeo/browser";
-import { cx as cx23 } from "@emotion/css";
-import { useMemo as useMemo26 } from "react";
+import { cx as cx25 } from "@emotion/css";
+import { useMemo as useMemo29 } from "react";
 
 // src/components/primitives/Avatar/Avatar.styles.ts
-import { css as css18 } from "@emotion/css";
-import { useMemo as useMemo25 } from "react";
-var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
-  return useMemo25(() => {
-    const baseAvatar = css18`
+import { css as css20 } from "@emotion/css";
+import { useMemo as useMemo28 } from "react";
+var useStyles20 = (theme, colorScheme, size, variant, backgroundColor) => {
+  return useMemo28(() => {
+    const baseAvatar = css20`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
       border: ${backgroundColor ? "none" : `1px solid ${theme.vars.colors.border}`};
@@ -9867,19 +10755,19 @@ var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
       width: ${size}px;
     `;
     const variantStyles = {
-      circular: css18`
+      circular: css20`
         border-radius: 50%;
       `,
-      square: css18`
+      square: css20`
         border-radius: 8px;
       `
     };
-    const imageStyles = css18`
+    const imageStyles = css20`
       height: 100%;
       object-fit: cover;
       width: 100%;
     `;
-    const skeletonStyles = css18`
+    const skeletonStyles = css20`
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
@@ -9896,7 +10784,7 @@ var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
         }
       }
     `;
-    const iconStyles = css18`
+    const iconStyles = css20`
       width: 60%;
       height: 60%;
       fill: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.secondary};
@@ -9911,10 +10799,10 @@ var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
     };
   }, [theme, colorScheme, size, variant, backgroundColor]);
 };
-var Avatar_styles_default = useStyles18;
+var Avatar_styles_default = useStyles20;
 
 // src/components/primitives/Avatar/Avatar.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var Avatar = ({
   alt = "User avatar",
   background = "random",
@@ -9944,7 +10832,7 @@ var Avatar = ({
     const colors = generateColor(seed);
     return `linear-gradient(${angle}deg, ${colors})`;
   };
-  const backgroundColor = useMemo26(() => {
+  const backgroundColor = useMemo29(() => {
     if (!name || imageUrl) {
       return void 0;
     }
@@ -9961,28 +10849,28 @@ var Avatar = ({
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ jsx77("img", { src: imageUrl, alt, className: cx23(withVendorCSSClassPrefix23(bem16("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ jsx81("img", { src: imageUrl, alt, className: cx25(withVendorCSSClassPrefix23(bem16("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx77("div", { className: cx23(withVendorCSSClassPrefix23(bem16("avatar", "skeleton")), styles.skeleton) });
+      return /* @__PURE__ */ jsx81("div", { className: cx25(withVendorCSSClassPrefix23(bem16("avatar", "skeleton")), styles.skeleton) });
     }
-    return /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsx81(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
-        className: cx23(withVendorCSSClassPrefix23(bem16("avatar", "icon")), styles.icon),
-        children: /* @__PURE__ */ jsx77("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
+        className: cx25(withVendorCSSClassPrefix23(bem16("avatar", "icon")), styles.icon),
+        children: /* @__PURE__ */ jsx81("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
       }
     );
   };
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx81(
     "div",
     {
-      className: cx23(
+      className: cx25(
         withVendorCSSClassPrefix23(bem16("avatar")),
         styles.avatar,
         styles.variant,
@@ -10010,12 +10898,12 @@ import {
   FloatingPortal,
   useId
 } from "@floating-ui/react";
-import { cx as cx24 } from "@emotion/css";
+import { cx as cx26 } from "@emotion/css";
 import React2 from "react";
 
 // src/components/primitives/Icons/LogOut.tsx
-import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
-var LogOut = (props) => /* @__PURE__ */ jsxs30(
+import { jsx as jsx82, jsxs as jsxs32 } from "react/jsx-runtime";
+var LogOut = (props) => /* @__PURE__ */ jsxs32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10029,17 +10917,17 @@ var LogOut = (props) => /* @__PURE__ */ jsxs30(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx78("path", { d: "m16 17 5-5-5-5" }),
-      /* @__PURE__ */ jsx78("path", { d: "M21 12H9" }),
-      /* @__PURE__ */ jsx78("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+      /* @__PURE__ */ jsx82("path", { d: "m16 17 5-5-5-5" }),
+      /* @__PURE__ */ jsx82("path", { d: "M21 12H9" }),
+      /* @__PURE__ */ jsx82("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
     ]
   }
 );
 var LogOut_default = LogOut;
 
 // src/components/primitives/Icons/Plus.tsx
-import { jsx as jsx79, jsxs as jsxs31 } from "react/jsx-runtime";
-var Plus = (props) => /* @__PURE__ */ jsxs31(
+import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
+var Plus = (props) => /* @__PURE__ */ jsxs33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10053,16 +10941,16 @@ var Plus = (props) => /* @__PURE__ */ jsxs31(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx79("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ jsx79("path", { d: "M12 5v14" })
+      /* @__PURE__ */ jsx83("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx83("path", { d: "M12 5v14" })
     ]
   }
 );
 var Plus_default = Plus;
 
 // src/components/primitives/Icons/User.tsx
-import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
-var User7 = (props) => /* @__PURE__ */ jsxs32(
+import { jsx as jsx84, jsxs as jsxs34 } from "react/jsx-runtime";
+var User7 = (props) => /* @__PURE__ */ jsxs34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10076,16 +10964,16 @@ var User7 = (props) => /* @__PURE__ */ jsxs32(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx80("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ jsx80("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ jsx84("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx84("circle", { cx: "12", cy: "7", r: "4" })
     ]
   }
 );
 var User_default2 = User7;
 
 // src/components/primitives/Icons/X.tsx
-import { jsx as jsx81, jsxs as jsxs33 } from "react/jsx-runtime";
-var X = (props) => /* @__PURE__ */ jsxs33(
+import { jsx as jsx85, jsxs as jsxs35 } from "react/jsx-runtime";
+var X = (props) => /* @__PURE__ */ jsxs35(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10099,26 +10987,26 @@ var X = (props) => /* @__PURE__ */ jsxs33(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx81("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ jsx81("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ jsx85("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx85("path", { d: "m6 6 12 12" })
     ]
   }
 );
 var X_default = X;
 
 // src/components/primitives/Dialog/Dialog.styles.ts
-import { css as css19 } from "@emotion/css";
-import { useMemo as useMemo27 } from "react";
-var useStyles19 = (theme, colorScheme) => {
-  return useMemo27(() => {
-    const overlay = css19`
+import { css as css21 } from "@emotion/css";
+import { useMemo as useMemo30 } from "react";
+var useStyles21 = (theme, colorScheme) => {
+  return useMemo30(() => {
+    const overlay = css21`
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
     `;
-    const content = css19`
+    const content = css21`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
@@ -10126,7 +11014,7 @@ var useStyles19 = (theme, colorScheme) => {
       overflow-y: auto;
       z-index: 10000;
     `;
-    const dropdownContent = css19`
+    const dropdownContent = css21`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
@@ -10136,23 +11024,23 @@ var useStyles19 = (theme, colorScheme) => {
       overflow-y: auto;
       z-index: 10000;
     `;
-    const header = css19`
+    const header = css21`
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} * 3) calc(${theme.vars.spacing.unit} * 4.5);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerTitle = css19`
+    const headerTitle = css21`
       margin: 0;
       font-size: 1.2rem;
       font-weight: 600;
       color: ${theme.vars.colors.text.primary};
     `;
-    const contentBody = css19`
+    const contentBody = css21`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const description = css19`
+    const description = css21`
       margin: 0;
       color: ${theme.vars.colors.text.secondary};
       font-size: ${theme.vars.typography.fontSizes.sm};
@@ -10169,10 +11057,10 @@ var useStyles19 = (theme, colorScheme) => {
     };
   }, [theme, colorScheme]);
 };
-var Dialog_styles_default = useStyles19;
+var Dialog_styles_default = useStyles21;
 
 // src/components/primitives/Dialog/Dialog.tsx
-import { jsx as jsx82, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs36 } from "react/jsx-runtime";
 function useDialog({
   initialOpen = false,
   open: controlledOpen,
@@ -10218,7 +11106,7 @@ var useDialogContext = () => {
 };
 function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
-  return /* @__PURE__ */ jsx82(DialogContext.Provider, { value: dialog, children });
+  return /* @__PURE__ */ jsx86(DialogContext.Provider, { value: dialog, children });
 }
 var DialogTrigger = React2.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
@@ -10236,7 +11124,7 @@ var DialogTrigger = React2.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ jsx82("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
+    return /* @__PURE__ */ jsx86("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
 var DialogContent = React2.forwardRef((props, propRef) => {
@@ -10245,11 +11133,11 @@ var DialogContent = React2.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ jsx82(FloatingPortal, { children: /* @__PURE__ */ jsx82(FloatingOverlay, { className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx82(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx86(FloatingPortal, { children: /* @__PURE__ */ jsx86(FloatingOverlay, { className: cx26(withVendorCSSClassPrefix24(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx86(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx86(
     "div",
     {
       ref,
-      className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "content")), styles.content, props.className),
+      className: cx26(withVendorCSSClassPrefix24(bem17("dialog", "content")), styles.content, props.className),
       "aria-labelledby": context.labelId,
       "aria-describedby": context.descriptionId,
       ...context.getFloatingProps(props),
@@ -10267,18 +11155,18 @@ var DialogHeading = React2.forwardRef(
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ jsxs34("div", { className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "header")), styles.header), children: [
-      /* @__PURE__ */ jsx82(
+    return /* @__PURE__ */ jsxs36("div", { className: cx26(withVendorCSSClassPrefix24(bem17("dialog", "header")), styles.header), children: [
+      /* @__PURE__ */ jsx86(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "title")), styles.headerTitle),
+          className: cx26(withVendorCSSClassPrefix24(bem17("dialog", "title")), styles.headerTitle),
           children
         }
       ),
-      /* @__PURE__ */ jsx82(
+      /* @__PURE__ */ jsx86(
         Button_default,
         {
           color: "tertiary",
@@ -10287,7 +11175,7 @@ var DialogHeading = React2.forwardRef(
           shape: "round",
           onClick: () => context.setOpen(false),
           "aria-label": "Close",
-          children: /* @__PURE__ */ jsx82(X_default, { width: 16, height: 16 })
+          children: /* @__PURE__ */ jsx86(X_default, { width: 16, height: 16 })
         }
       )
     ] });
@@ -10303,13 +11191,13 @@ var DialogDescription = React2.forwardRef(
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
-    return /* @__PURE__ */ jsx82(
+    return /* @__PURE__ */ jsx86(
       "p",
       {
         ...props,
         ref,
         id,
-        className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "description")), styles.description, props.className),
+        className: cx26(withVendorCSSClassPrefix24(bem17("dialog", "description")), styles.description, props.className),
         children
       }
     );
@@ -10333,13 +11221,13 @@ var DialogClose = React2.forwardRef(({ children, asChild = false, ...props }, pr
       onClick: handleClick
     });
   }
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx86(
     Button_default,
     {
       ...props,
       ref,
       onClick: handleClick,
-      className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "close")), props.className),
+      className: cx26(withVendorCSSClassPrefix24(bem17("dialog", "close")), props.className),
       variant: "text",
       children
     }
@@ -10358,41 +11246,41 @@ Dialog.Close = DialogClose;
 var Dialog_default = Dialog;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-import { useCallback as useCallback13, useState as useState19 } from "react";
-import { cx as cx25 } from "@emotion/css";
+import { useCallback as useCallback15, useState as useState21 } from "react";
+import { cx as cx27 } from "@emotion/css";
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25, bem as bem18 } from "@asgardeo/browser";
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
-import { css as css20 } from "@emotion/css";
-import { useMemo as useMemo28 } from "react";
-var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => {
-  return useMemo28(() => {
-    const container = css20`
+import { css as css22 } from "@emotion/css";
+import { useMemo as useMemo31 } from "react";
+var useStyles22 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => {
+  return useMemo31(() => {
+    const container = css22`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-    const inputRow = css20`
+    const inputRow = css22`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       position: relative;
     `;
-    const inputWrapper = css20`
+    const inputWrapper = css22`
       flex: 1;
     `;
-    const plusIcon = css20`
+    const plusIcon = css22`
       background: ${theme.vars.colors.secondary.main};
       border-radius: 50%;
       outline: 4px ${theme.vars.colors.secondary.main} auto;
       color: ${theme.vars.colors.secondary.contrastText};
     `;
-    const listContainer = css20`
+    const listContainer = css22`
       display: flex;
       flex-direction: column;
       gap: 0;
     `;
-    const listItem = css20`
+    const listItem = css22`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -10407,11 +11295,11 @@ var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         margin-bottom: 0;
       }
     `;
-    const listItemText = css20`
+    const listItemText = css22`
       flex: 1;
       word-break: break-word;
     `;
-    const removeButton = css20`
+    const removeButton = css22`
       padding: calc(${theme.vars.spacing.unit} / 2);
       min-width: auto;
       color: ${theme.vars.colors.error.main};
@@ -10431,7 +11319,7 @@ var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         opacity: 0.6;
       }
     `;
-    const icon = css20`
+    const icon = css22`
       width: 16px;
       height: 16px;
       stroke: currentColor;
@@ -10453,10 +11341,10 @@ var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
     };
   }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);
 };
-var MultiInput_styles_default = useStyles20;
+var MultiInput_styles_default = useStyles22;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-import { jsx as jsx83, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs37 } from "react/jsx-runtime";
 var MultiInput = ({
   label,
   error,
@@ -10479,9 +11367,9 @@ var MultiInput = ({
   const canAddMore = !maxFields || values.length < maxFields;
   const canRemove = values.length > minFields;
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
-  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ jsx83("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx25(styles.icon, className2), children: /* @__PURE__ */ jsx83("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx83("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx25(styles.icon, className2), children: /* @__PURE__ */ jsx83("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
-  const handleAddValue = useCallback13(
+  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ jsx87("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx27(styles.icon, className2), children: /* @__PURE__ */ jsx87("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx87("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx27(styles.icon, className2), children: /* @__PURE__ */ jsx87("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
+  const handleAddValue = useCallback15(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
         onChange([...values, newValue.trim()]);
@@ -10489,7 +11377,7 @@ var MultiInput = ({
     },
     [values, onChange, maxFields]
   );
-  const handleRemoveValue = useCallback13(
+  const handleRemoveValue = useCallback15(
     (index) => {
       if (values.length > minFields) {
         const updatedValues = values.filter((_, i) => i !== index);
@@ -10498,7 +11386,7 @@ var MultiInput = ({
     },
     [values, onChange, minFields]
   );
-  const renderInputField = useCallback13(
+  const renderInputField = useCallback15(
     (value, onValueChange, attachedEndIcon, onEndIconClick) => {
       const handleInputChange = (e) => {
         const newValue = e.target ? e.target.value : e;
@@ -10524,9 +11412,9 @@ var MultiInput = ({
       };
       switch (fieldType) {
         case "DATE_TIME":
-          return /* @__PURE__ */ jsx83(DatePicker_default, { ...commonProps });
+          return /* @__PURE__ */ jsx87(DatePicker_default, { ...commonProps });
         case "BOOLEAN":
-          return /* @__PURE__ */ jsx83(
+          return /* @__PURE__ */ jsx87(
             Checkbox_default,
             {
               ...commonProps,
@@ -10535,55 +11423,55 @@ var MultiInput = ({
             }
           );
         default:
-          return /* @__PURE__ */ jsx83(TextField_default, { ...commonProps, type });
+          return /* @__PURE__ */ jsx87(TextField_default, { ...commonProps, type });
       }
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
   );
-  const [currentInputValue, setCurrentInputValue] = useState19("");
-  const handleInputSubmit = useCallback13(() => {
+  const [currentInputValue, setCurrentInputValue] = useState21("");
+  const handleInputSubmit = useCallback15(() => {
     if (currentInputValue.trim() !== "") {
       handleAddValue(currentInputValue);
       setCurrentInputValue("");
     }
   }, [currentInputValue, handleAddValue]);
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs37(
     FormControl_default,
     {
       error,
       helperText,
-      className: cx25(withVendorCSSClassPrefix25(bem18("multi-input")), className),
+      className: cx27(withVendorCSSClassPrefix25(bem18("multi-input")), className),
       style,
       children: [
-        label && /* @__PURE__ */ jsx83(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ jsxs35("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ jsx83("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx83("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        label && /* @__PURE__ */ jsx87(InputLabel_default, { required, error: !!error, children: label }),
+        /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ jsx87("div", { className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx87("div", { className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
-            canAddMore ? /* @__PURE__ */ jsx83(PlusIcon, { className: styles.plusIcon }) : void 0,
+            canAddMore ? /* @__PURE__ */ jsx87(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ jsx83("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs35(
+          values.length > 0 && /* @__PURE__ */ jsx87("div", { className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs37(
             "div",
             {
-              className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "list-item")), styles.listItem),
+              className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "list-item")), styles.listItem),
               children: [
-                /* @__PURE__ */ jsx83(
+                /* @__PURE__ */ jsx87(
                   "span",
                   {
-                    className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "list-item-text")), styles.listItemText),
+                    className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
-                canRemove && /* @__PURE__ */ jsx83(
+                canRemove && /* @__PURE__ */ jsx87(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRemoveValue(index),
                     disabled,
-                    className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "remove-button")), styles.removeButton),
+                    className: cx27(withVendorCSSClassPrefix25(bem18("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
-                    children: /* @__PURE__ */ jsx83(BinIcon, { className: styles.icon })
+                    children: /* @__PURE__ */ jsx87(BinIcon, { className: styles.icon })
                   }
                 )
               ]
@@ -10598,15 +11486,15 @@ var MultiInput = ({
 var MultiInput_default = MultiInput;
 
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
-import { css as css21 } from "@emotion/css";
-import { useMemo as useMemo29 } from "react";
+import { css as css23 } from "@emotion/css";
+import { useMemo as useMemo32 } from "react";
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix26 } from "@asgardeo/browser";
-var useStyles21 = (theme, colorScheme) => {
-  const valuePlaceholder = css21`
+var useStyles23 = (theme, colorScheme) => {
+  const valuePlaceholder = css23`
     font-style: italic;
     opacity: 0.7;
   `;
-  const editButton = css21`
+  const editButton = css23`
     font-style: italic;
     text-decoration: underline;
     opacity: 0.7;
@@ -10617,19 +11505,19 @@ var useStyles21 = (theme, colorScheme) => {
       background-color: transparent;
     }
   `;
-  const fieldInner = css21`
+  const fieldInner = css23`
     flex: 1;
     display: flex;
     align-items: center;
     gap: ${theme.vars.spacing.unit};
   `;
-  const fieldActions = css21`
+  const fieldActions = css23`
     display: flex;
     gap: calc(${theme.vars.spacing.unit} / 2);
     align-items: center;
     margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
   `;
-  const complexTextarea = css21`
+  const complexTextarea = css23`
     min-height: 60px;
     width: 100%;
     padding: 8px;
@@ -10637,57 +11525,57 @@ var useStyles21 = (theme, colorScheme) => {
     border-radius: ${theme.vars.borderRadius.small};
     resize: vertical;
   `;
-  const objectKey = css21`
+  const objectKey = css23`
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  const objectValue = css21`
+  const objectValue = css23`
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  return useMemo29(() => {
-    const root = css21`
+  return useMemo32(() => {
+    const root = css23`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
     `;
-    const card = css21`
+    const card = css23`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
     `;
-    const header = css21`
+    const header = css23`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
       margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const profileInfo = css21`
+    const profileInfo = css23`
       flex: 1;
     `;
-    const name = css21`
+    const name = css23`
       font-size: 1.5rem;
       font-weight: 600;
       margin: 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const infoContainer = css21`
+    const infoContainer = css23`
       display: flex;
       flex-direction: column;
     `;
-    const info = css21`
+    const info = css23`
       padding: calc(${theme.vars.spacing.unit} * 1.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const field = css21`
+    const field = css23`
       display: flex;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} / 2) 0;
       min-height: 28px;
     `;
-    const lastField = css21`
+    const lastField = css23`
       border-bottom: none;
     `;
-    const label = css21`
+    const label = css23`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
@@ -10696,7 +11584,7 @@ var useStyles21 = (theme, colorScheme) => {
       line-height: 28px;
       text-align: start;
     `;
-    const value = css21`
+    const value = css23`
       color: ${theme.vars.colors.text.primary};
       flex: 1;
       display: inline-block;
@@ -10729,10 +11617,10 @@ var useStyles21 = (theme, colorScheme) => {
         border-color: ${theme.vars.colors.border};
       }
     `;
-    const popup = css21`
+    const popup = css23`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const alert = css21`
+    const alert = css23`
       margin-bottom: calc(${theme.vars.spacing.unit} * 3);
     `;
     return {
@@ -10768,7 +11656,7 @@ var useStyles21 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseUserProfile_styles_default = useStyles21;
+var BaseUserProfile_styles_default = useStyles23;
 
 // src/utils/getDisplayName.ts
 var getDisplayName = (mergedMappings, user) => {
@@ -10782,7 +11670,7 @@ var getDisplayName = (mergedMappings, user) => {
 var getDisplayName_default = getDisplayName;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { Fragment as Fragment15, jsx as jsx84, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx88, jsxs as jsxs38 } from "react/jsx-runtime";
 var fieldsToSkip = [
   "roles.default",
   "active",
@@ -10824,10 +11712,10 @@ var BaseUserProfile = ({
   hideFields = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [editedUser, setEditedUser] = useState20(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = useState20({});
+  const [editedUser, setEditedUser] = useState22(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = useState22({});
   const { t } = useTranslation_default();
-  const shouldShowField = useCallback14(
+  const shouldShowField = useCallback16(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
         return false;
@@ -10842,7 +11730,7 @@ var BaseUserProfile = ({
     },
     [showFields, hideFields]
   );
-  const PencilIcon = () => /* @__PURE__ */ jsx84(
+  const PencilIcon = () => /* @__PURE__ */ jsx88(
     "svg",
     {
       width: "16",
@@ -10853,16 +11741,16 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx84("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx88("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = useCallback14((fieldName) => {
+  const toggleFieldEdit = useCallback16((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = useCallback14((schema) => {
+  const getFieldPlaceholder = useCallback16((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -10878,12 +11766,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ jsx84("table", { className: styles.value, children: /* @__PURE__ */ jsx84("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs36("tr", { children: [
-      /* @__PURE__ */ jsx84("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs36("strong", { children: [
+    return /* @__PURE__ */ jsx88("table", { className: styles.value, children: /* @__PURE__ */ jsx88("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs38("tr", { children: [
+      /* @__PURE__ */ jsx88("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs38("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ jsx84("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx84(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ jsx88("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx88(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -10901,7 +11789,7 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = useCallback14(
+  const handleFieldSave = useCallback16(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
@@ -10924,7 +11812,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = useCallback14(
+  const handleFieldCancel = useCallback16(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -10935,7 +11823,7 @@ var BaseUserProfile = ({
     },
     [flattenedProfile, profile, toggleFieldEdit]
   );
-  const formatLabel = useCallback14(
+  const formatLabel = useCallback16(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
@@ -10956,9 +11844,9 @@ var BaseUserProfile = ({
     const { value, displayName, description, name, type, required, mutability, subAttributes, multiValued } = schema;
     const label = displayName || description || name || "";
     if (subAttributes && Array.isArray(subAttributes)) {
-      return /* @__PURE__ */ jsx84(Fragment15, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs36("div", { className: styles.field, children: [
-        /* @__PURE__ */ jsx84("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ jsx84("div", { className: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
+      return /* @__PURE__ */ jsx88(Fragment15, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs38("div", { className: styles.field, children: [
+        /* @__PURE__ */ jsx88("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ jsx88("div", { className: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
       ] }, index)) });
     }
     if (Array.isArray(value) || multiValued) {
@@ -10974,9 +11862,9 @@ var BaseUserProfile = ({
         } else {
           fieldValues = [];
         }
-        return /* @__PURE__ */ jsxs36(Fragment15, { children: [
-          /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
-          /* @__PURE__ */ jsx84("div", { className: styles.value, children: /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsxs38(Fragment15, { children: [
+          /* @__PURE__ */ jsx88("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ jsx88("div", { className: styles.value, children: /* @__PURE__ */ jsx88(
             MultiInput_default,
             {
               values: fieldValues,
@@ -11007,9 +11895,9 @@ var BaseUserProfile = ({
       } else {
         displayValue2 = "-";
       }
-      return /* @__PURE__ */ jsxs36(Fragment15, { children: [
-        /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx84("div", { className: cx26(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx84(
+      return /* @__PURE__ */ jsxs38(Fragment15, { children: [
+        /* @__PURE__ */ jsx88("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx88("div", { className: cx28(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx88(
           Button_default,
           {
             onClick: onStartEdit,
@@ -11024,7 +11912,7 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ jsx84(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ jsx88(ObjectDisplay, { data: value });
     }
     if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
       const fieldValue = editedUser && name && editedUser[name] !== void 0 ? editedUser[name] : flattenedProfile && name && flattenedProfile[name] !== void 0 ? flattenedProfile[name] : value || "";
@@ -11039,16 +11927,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ jsx84(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx88(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ jsx84(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx88(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ jsx84(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ jsx88(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ jsx84(
+          field = /* @__PURE__ */ jsx88(
             "textarea",
             {
               value: fieldValue,
@@ -11060,11 +11948,11 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ jsx84(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx88(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs36(Fragment15, { children: [
-        /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx84("div", { className: styles.value, children: field })
+      return /* @__PURE__ */ jsxs38(Fragment15, { children: [
+        /* @__PURE__ */ jsx88("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx88("div", { className: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -11077,9 +11965,9 @@ var BaseUserProfile = ({
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs36(Fragment15, { children: [
-      /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx84("div", { className: cx26(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsxs38(Fragment15, { children: [
+      /* @__PURE__ */ jsx88("span", { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx88("div", { className: cx28(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx88(
         Button_default,
         {
           onClick: onStartEdit,
@@ -11107,8 +11995,8 @@ var BaseUserProfile = ({
       alignItems: "center",
       gap: theme.vars.spacing.unit
     };
-    return /* @__PURE__ */ jsxs36("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx84("div", { className: styles.fieldInner, children: renderSchemaField(
+    return /* @__PURE__ */ jsxs38("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx88("div", { className: styles.fieldInner, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -11118,12 +12006,12 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs36("div", { className: styles.fieldActions, children: [
-        isFieldEditing && /* @__PURE__ */ jsxs36(Fragment15, { children: [
-          /* @__PURE__ */ jsx84(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-          /* @__PURE__ */ jsx84(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
+      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs38("div", { className: styles.fieldActions, children: [
+        isFieldEditing && /* @__PURE__ */ jsxs38(Fragment15, { children: [
+          /* @__PURE__ */ jsx88(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+          /* @__PURE__ */ jsx88(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
         ] }),
-        !isFieldEditing && hasValue && /* @__PURE__ */ jsx84(
+        !isFieldEditing && hasValue && /* @__PURE__ */ jsx88(
           Button_default,
           {
             size: "small",
@@ -11132,7 +12020,7 @@ var BaseUserProfile = ({
             onClick: () => toggleFieldEdit(schema.name),
             title: "Edit",
             className: styles.editButton,
-            children: /* @__PURE__ */ jsx84(PencilIcon, {})
+            children: /* @__PURE__ */ jsx88(PencilIcon, {})
           }
         )
       ] })
@@ -11141,7 +12029,7 @@ var BaseUserProfile = ({
   if (!profile && !flattenedProfile) {
     return fallback;
   }
-  const containerClasses = cx26(
+  const containerClasses = cx28(
     styles.root,
     cardLayout ? styles.card : "",
     withVendorCSSClassPrefix27("user-profile"),
@@ -11156,17 +12044,17 @@ var BaseUserProfile = ({
       if (!shouldShowField(key)) return false;
       return value !== void 0 && value !== "" && value !== null;
     }).sort(([a], [b]) => a.localeCompare(b));
-    return /* @__PURE__ */ jsx84(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs36("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx84("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ jsx84("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
+    return /* @__PURE__ */ jsx88(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs38("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx88("span", { className: styles.label, children: formatLabel(key) }),
+      /* @__PURE__ */ jsx88("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
     ] }, key)) });
   };
-  const profileContent = /* @__PURE__ */ jsxs36(Card_default, { className: containerClasses, children: [
-    error && /* @__PURE__ */ jsxs36(Alert_default, { variant: "error", className: cx26(withVendorCSSClassPrefix27(bem19("user-profile", "alert")), styles.alert), children: [
-      /* @__PURE__ */ jsx84(Alert_default.Title, { children: t("errors.heading") || "Error" }),
-      /* @__PURE__ */ jsx84(Alert_default.Description, { children: error })
+  const profileContent = /* @__PURE__ */ jsxs38(Card_default, { className: containerClasses, children: [
+    error && /* @__PURE__ */ jsxs38(Alert_default, { variant: "error", className: cx28(withVendorCSSClassPrefix27(bem19("user-profile", "alert")), styles.alert), children: [
+      /* @__PURE__ */ jsx88(Alert_default.Title, { children: t("errors.heading") || "Error" }),
+      /* @__PURE__ */ jsx88(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ jsx84("div", { className: styles.header, children: /* @__PURE__ */ jsx84(
+    /* @__PURE__ */ jsx88("div", { className: styles.header, children: /* @__PURE__ */ jsx88(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
@@ -11176,7 +12064,7 @@ var BaseUserProfile = ({
         isLoading
       }
     ) }),
-    /* @__PURE__ */ jsx84("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
+    /* @__PURE__ */ jsx88("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
       if (!schema.name || !shouldShowField(schema.name)) return false;
       if (!editable) {
         const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : void 0;
@@ -11193,13 +12081,13 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ jsx84("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ jsx88("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) : renderProfileWithoutSchemas() })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx84(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx84(Dialog_default.Heading, { children: title ?? t("user.profile.heading") }),
-      /* @__PURE__ */ jsx84("div", { className: styles.popup, children: profileContent })
+    return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs38(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title ?? t("user.profile.heading") }),
+      /* @__PURE__ */ jsx88("div", { className: styles.popup, children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -11207,7 +12095,7 @@ var BaseUserProfile = ({
 var BaseUserProfile_default = BaseUserProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-import { useState as useState21 } from "react";
+import { useState as useState23 } from "react";
 
 // src/api/updateMeProfile.ts
 import {
@@ -11240,12 +12128,12 @@ var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 import { AsgardeoError } from "@asgardeo/browser";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var UserProfile3 = ({ ...rest }) => {
   const { baseUrl, isLoading } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const { t } = useTranslation_default();
-  const [error, setError] = useState21(null);
+  const [error, setError] = useState23(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
     try {
@@ -11259,7 +12147,7 @@ var UserProfile3 = ({ ...rest }) => {
       setError(message);
     }
   };
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx89(
     BaseUserProfile_default,
     {
       profile,
@@ -11288,15 +12176,15 @@ import {
   FloatingFocusManager as FloatingFocusManager2,
   FloatingPortal as FloatingPortal2
 } from "@floating-ui/react";
-import { cx as cx27 } from "@emotion/css";
-import { useState as useState22 } from "react";
+import { cx as cx29 } from "@emotion/css";
+import { useState as useState24 } from "react";
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
-import { css as css22 } from "@emotion/css";
-import { useMemo as useMemo30 } from "react";
-var useStyles22 = (theme, colorScheme) => {
-  return useMemo30(() => {
-    const trigger = css22`
+import { css as css24 } from "@emotion/css";
+import { useMemo as useMemo33 } from "react";
+var useStyles24 = (theme, colorScheme) => {
+  return useMemo33(() => {
+    const trigger = css24`
       display: inline-flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 0.75);
@@ -11323,7 +12211,7 @@ var useStyles22 = (theme, colorScheme) => {
         box-shadow: none;
       }
     `;
-    const userName = css22`
+    const userName = css24`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11332,7 +12220,7 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const dropdownContent = css22`
+    const dropdownContent = css24`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -11342,12 +12230,12 @@ var useStyles22 = (theme, colorScheme) => {
       z-index: 1000;
       overflow: hidden;
     `;
-    const dropdownMenu = css22`
+    const dropdownMenu = css24`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-    const menuItem = css22`
+    const menuItem = css24`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -11375,7 +12263,7 @@ var useStyles22 = (theme, colorScheme) => {
         box-shadow: none;
       }
     `;
-    const menuItemAnchor = css22`
+    const menuItemAnchor = css24`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -11396,18 +12284,18 @@ var useStyles22 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
       }
     `;
-    const divider = css22`
+    const divider = css24`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const dropdownHeader = css22`
+    const dropdownHeader = css24`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       padding: calc(${theme.vars.spacing.unit} * 1.5);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerInfo = css22`
+    const headerInfo = css24`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11417,7 +12305,7 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerName = css22`
+    const headerName = css24`
       color: ${theme.vars.colors.text.primary};
       font-size: 1rem;
       font-weight: 500;
@@ -11426,7 +12314,7 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerEmail = css22`
+    const headerEmail = css24`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
@@ -11434,14 +12322,14 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const loadingContainer = css22`
+    const loadingContainer = css24`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `;
-    const loadingText = css22`
+    const loadingText = css24`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `;
@@ -11473,10 +12361,10 @@ var useStyles22 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseUserDropdown_styles_default = useStyles22;
+var BaseUserDropdown_styles_default = useStyles24;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-import { jsx as jsx86, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs39 } from "react/jsx-runtime";
 var BaseUserDropdown = ({
   fallback = null,
   className = "",
@@ -11492,8 +12380,8 @@ var BaseUserDropdown = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseUserDropdown_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = useState22(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = useState22(null);
+  const [isOpen, setIsOpen] = useState24(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState24(null);
   const { refs, floatingStyles, context } = useFloating2({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -11530,14 +12418,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ jsx86(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx90(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ jsx86(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx90(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -11547,18 +12435,18 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown"), className), children: [
-    /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39("div", { className: cx29(withVendorCSSClassPrefix28("user-dropdown"), className), children: [
+    /* @__PURE__ */ jsxs39(
       Button_default,
       {
         ref: refs.setReference,
-        className: cx27(withVendorCSSClassPrefix28("user-dropdown__trigger"), styles.trigger),
+        className: cx29(withVendorCSSClassPrefix28("user-dropdown__trigger"), styles.trigger),
         color: "tertiary",
         variant: "text",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ jsx86(
+          /* @__PURE__ */ jsx90(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -11567,22 +12455,22 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ jsx86(
+          showTriggerLabel && /* @__PURE__ */ jsx90(
             Typography_default,
             {
               variant: "body2",
-              className: cx27(withVendorCSSClassPrefix28("user-dropdown__trigger-label"), styles.userName),
+              className: cx29(withVendorCSSClassPrefix28("user-dropdown__trigger-label"), styles.userName),
               children: getDisplayName_default(mergedMappings, user)
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx86(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx86(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs37(
+    isOpen && /* @__PURE__ */ jsx90(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx90(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs39(
       "div",
       {
         ref: refs.setFloating,
-        className: cx27(withVendorCSSClassPrefix28("user-dropdown__content"), styles.dropdownContent),
+        className: cx29(withVendorCSSClassPrefix28("user-dropdown__content"), styles.dropdownContent),
         style: {
           ...floatingStyles,
           // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.
@@ -11591,8 +12479,8 @@ var BaseUserDropdown = ({
         },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__header"), styles.dropdownHeader), children: [
-            /* @__PURE__ */ jsx86(
+          /* @__PURE__ */ jsxs39("div", { className: cx29(withVendorCSSClassPrefix28("user-dropdown__header"), styles.dropdownHeader), children: [
+            /* @__PURE__ */ jsx90(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -11601,8 +12489,8 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
               }
             ),
-            /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__header-info"), styles.headerInfo), children: [
-              /* @__PURE__ */ jsx86(
+            /* @__PURE__ */ jsxs39("div", { className: cx29(withVendorCSSClassPrefix28("user-dropdown__header-info"), styles.headerInfo), children: [
+              /* @__PURE__ */ jsx90(
                 Typography_default,
                 {
                   noWrap: true,
@@ -11612,7 +12500,7 @@ var BaseUserDropdown = ({
                   children: getDisplayName_default(mergedMappings, user)
                 }
               ),
-              /* @__PURE__ */ jsx86(
+              /* @__PURE__ */ jsx90(
                 Typography_default,
                 {
                   noWrap: true,
@@ -11624,31 +12512,31 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx86("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx86("div", { children: item.label === "" ? /* @__PURE__ */ jsx86("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs37(
+          /* @__PURE__ */ jsx90("div", { className: cx29(withVendorCSSClassPrefix28("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx90("div", { children: item.label === "" ? /* @__PURE__ */ jsx90("div", { className: cx29(withVendorCSSClassPrefix28("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs39(
             "a",
             {
               href: item.href,
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu-item"), styles.menuItemAnchor),
+              className: cx29(withVendorCSSClassPrefix28("user-dropdown__menu-item"), styles.menuItemAnchor),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ jsx86("span", { children: item.label })
+                /* @__PURE__ */ jsx90("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ jsx86(
+          ) : /* @__PURE__ */ jsx90(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu-item"), styles.menuItem),
+              className: cx29(withVendorCSSClassPrefix28("user-dropdown__menu-item"), styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -11666,8 +12554,8 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-import { useState as useState23 } from "react";
-import { Fragment as Fragment16, jsx as jsx87, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useState as useState25 } from "react";
+import { Fragment as Fragment16, jsx as jsx91, jsxs as jsxs40 } from "react/jsx-runtime";
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -11676,7 +12564,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = useState23(false);
+  const [isProfileOpen, setIsProfileOpen] = useState25(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -11696,14 +12584,14 @@ var UserDropdown = ({
     closeProfile
   };
   if (children) {
-    return /* @__PURE__ */ jsxs38(Fragment16, { children: [
+    return /* @__PURE__ */ jsxs40(Fragment16, { children: [
       children(renderProps),
-      /* @__PURE__ */ jsx87(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx91(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
-    return /* @__PURE__ */ jsxs38(Fragment16, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx87(
+    return /* @__PURE__ */ jsxs40(Fragment16, { children: [
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx91(
         BaseUserDropdown_default,
         {
           user,
@@ -11713,11 +12601,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx87(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx91(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
-  return /* @__PURE__ */ jsxs38(Fragment16, { children: [
-    /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsxs40(Fragment16, { children: [
+    /* @__PURE__ */ jsx91(
       BaseUserDropdown_default,
       {
         user,
@@ -11727,7 +12615,7 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ jsx87(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ jsx91(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
@@ -11746,13 +12634,13 @@ import {
   FloatingFocusManager as FloatingFocusManager3,
   FloatingPortal as FloatingPortal3
 } from "@floating-ui/react";
-import { cx as cx28 } from "@emotion/css";
-import { useState as useState24 } from "react";
+import { cx as cx30 } from "@emotion/css";
+import { useState as useState26 } from "react";
 
 // src/components/primitives/Icons/Building.tsx
-import { jsx as jsx88, jsxs as jsxs39 } from "react/jsx-runtime";
-var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs39("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx88(
+import { jsx as jsx92, jsxs as jsxs41 } from "react/jsx-runtime";
+var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs41("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx92(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -11762,38 +12650,38 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx88("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx88("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx88("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx88("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx88("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx88("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx92("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx92("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx92("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx92("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx92("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx92("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 Building.displayName = "Building";
 var Building_default = Building;
 
 // src/components/primitives/Icons/Check.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx89("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx89("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx93 } from "react/jsx-runtime";
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx93("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx93("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 Check.displayName = "Check";
 var Check_default = Check;
 
 // src/components/primitives/Icons/ChevronDown.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx90("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx90("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx94 } from "react/jsx-runtime";
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx94("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx94("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
-import { css as css23 } from "@emotion/css";
-import { useMemo as useMemo31 } from "react";
-var useStyles23 = (theme, colorScheme) => {
-  return useMemo31(() => {
-    const root = css23`
+import { css as css25 } from "@emotion/css";
+import { useMemo as useMemo34 } from "react";
+var useStyles25 = (theme, colorScheme) => {
+  return useMemo34(() => {
+    const root = css25`
       display: inline-block;
       position: relative;
     `;
-    const trigger = css23`
+    const trigger = css25`
       display: inline-flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
@@ -11813,7 +12701,7 @@ var useStyles23 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.background.surface};
       }
     `;
-    const triggerLabel = css23`
+    const triggerLabel = css25`
       color: ${theme.vars.colors.text.primary};
       font-weight: 500;
       overflow: hidden;
@@ -11821,7 +12709,7 @@ var useStyles23 = (theme, colorScheme) => {
       white-space: nowrap;
       flex: 1;
     `;
-    const content = css23`
+    const content = css25`
       min-width: 280px;
       max-width: 400px;
       background-color: ${theme.vars.colors.background.surface};
@@ -11831,13 +12719,13 @@ var useStyles23 = (theme, colorScheme) => {
       outline: none;
       z-index: 1000;
     `;
-    const header = css23`
+    const header = css25`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);
     `;
-    const headerInfo = css23`
+    const headerInfo = css25`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11845,7 +12733,7 @@ var useStyles23 = (theme, colorScheme) => {
       min-width: 0;
       overflow: hidden;
     `;
-    const headerName = css23`
+    const headerName = css25`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11854,7 +12742,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerMeta = css23`
+    const headerMeta = css25`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11862,7 +12750,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerRole = css23`
+    const headerRole = css25`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11871,16 +12759,16 @@ var useStyles23 = (theme, colorScheme) => {
       white-space: nowrap;
       text-transform: capitalize;
     `;
-    const manageButton = css23`
+    const manageButton = css25`
       min-width: auto;
       margin-inline-start: auto;
     `;
-    const menu = css23`
+    const menu = css25`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-    const menuItem = css23`
+    const menuItem = css25`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -11905,11 +12793,11 @@ var useStyles23 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
       }
     `;
-    const menuDivider = css23`
+    const menuDivider = css25`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const organizationInfo = css23`
+    const organizationInfo = css25`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11917,7 +12805,7 @@ var useStyles23 = (theme, colorScheme) => {
       min-width: 0;
       overflow: hidden;
     `;
-    const organizationName = css23`
+    const organizationName = css25`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11926,7 +12814,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const organizationMeta = css23`
+    const organizationMeta = css25`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11934,40 +12822,40 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const loadingContainer = css23`
+    const loadingContainer = css25`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `;
-    const loadingText = css23`
+    const loadingText = css25`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `;
-    const errorContainer = css23`
+    const errorContainer = css25`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorText = css23`
+    const errorText = css25`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       text-align: center;
     `;
-    const sectionHeader = css23`
+    const sectionHeader = css25`
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: ${theme.vars.colors.text.secondary};
     `;
-    const sectionHeaderContainer = css23`
+    const sectionHeaderContainer = css25`
       border-top: none;
       border-bottom: none;
       padding-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const roleCapitalized = css23`
+    const roleCapitalized = css25`
       text-transform: capitalize;
     `;
     return {
@@ -12007,10 +12895,10 @@ var useStyles23 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseOrganizationSwitcher_styles_default = useStyles23;
+var BaseOrganizationSwitcher_styles_default = useStyles25;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-import { Fragment as Fragment17, jsx as jsx91, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx95, jsxs as jsxs42 } from "react/jsx-runtime";
 var BaseOrganizationSwitcher = ({
   organizations,
   currentOrganization,
@@ -12033,8 +12921,8 @@ var BaseOrganizationSwitcher = ({
 }) => {
   const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = useState24(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = useState24(null);
+  const [isOpen, setIsOpen] = useState26(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState26(null);
   const { t } = useTranslation_default();
   const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = useFloating3({
@@ -12064,8 +12952,8 @@ var BaseOrganizationSwitcher = ({
   const switchableOrganizations = organizations.filter(
     (org) => org.id !== currentOrganization?.id
   );
-  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs40(Fragment17, { children: [
-    /* @__PURE__ */ jsx91(
+  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs42(Fragment17, { children: [
+    /* @__PURE__ */ jsx95(
       Avatar,
       {
         variant: "square",
@@ -12075,35 +12963,35 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ jsxs40("div", { className: cx28(styles.organizationInfo), children: [
-      /* @__PURE__ */ jsx91(Typography_default, { variant: "body2", fontWeight: "medium", className: cx28(styles.organizationName), children: organization.name }),
-      /* @__PURE__ */ jsxs40("div", { className: cx28(styles.organizationMeta), children: [
-        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs40("span", { children: [
+    /* @__PURE__ */ jsxs42("div", { className: cx30(styles.organizationInfo), children: [
+      /* @__PURE__ */ jsx95(Typography_default, { variant: "body2", fontWeight: "medium", className: cx30(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ jsxs42("div", { className: cx30(styles.organizationMeta), children: [
+        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs42("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx91("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ jsx91("span", { className: cx28(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx95("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ jsx95("span", { className: cx30(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ jsx91(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
+    isSelected && /* @__PURE__ */ jsx95(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx91("div", { className: cx28(styles.loadingContainer), children: /* @__PURE__ */ jsx91(Typography_default, { variant: "caption", className: cx28(styles.loadingText), children: t("organization.switcher.loading.placeholder.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx91("div", { className: cx28(styles.errorContainer), children: /* @__PURE__ */ jsx91(Typography_default, { variant: "caption", className: cx28(styles.errorText), children: errorMessage }) });
-  return /* @__PURE__ */ jsxs40("div", { className: cx28(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs40(
+  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx95("div", { className: cx30(styles.loadingContainer), children: /* @__PURE__ */ jsx95(Typography_default, { variant: "caption", className: cx30(styles.loadingText), children: t("organization.switcher.loading.placeholder.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx95("div", { className: cx30(styles.errorContainer), children: /* @__PURE__ */ jsx95(Typography_default, { variant: "caption", className: cx30(styles.errorText), children: errorMessage }) });
+  return /* @__PURE__ */ jsxs42("div", { className: cx30(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs42(
       Button_default,
       {
         ref: refs.setReference,
-        className: cx28(styles.trigger),
+        className: cx30(styles.trigger),
         color: "tertiary",
         variant: "outline",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          currentOrganization ? /* @__PURE__ */ jsxs40(Fragment17, { children: [
-            /* @__PURE__ */ jsx91(
+          currentOrganization ? /* @__PURE__ */ jsxs42(Fragment17, { children: [
+            /* @__PURE__ */ jsx95(
               Avatar,
               {
                 variant: "square",
@@ -12113,18 +13001,18 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ jsx91(Typography_default, { variant: "body2", className: cx28(styles.triggerLabel), children: currentOrganization.name })
-          ] }) : /* @__PURE__ */ jsxs40(Fragment17, { children: [
-            /* @__PURE__ */ jsx91(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ jsx91(Typography_default, { variant: "body2", className: cx28(styles.triggerLabel), children: t("elements.fields.organization.select.label") })
+            showTriggerLabel && /* @__PURE__ */ jsx95(Typography_default, { variant: "body2", className: cx30(styles.triggerLabel), children: currentOrganization.name })
+          ] }) : /* @__PURE__ */ jsxs42(Fragment17, { children: [
+            /* @__PURE__ */ jsx95(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ jsx95(Typography_default, { variant: "body2", className: cx30(styles.triggerLabel), children: t("elements.fields.organization.select.label") })
           ] }),
-          /* @__PURE__ */ jsx91("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ jsx91(ChevronDown_default, { width: "16", height: "16" }) })
+          /* @__PURE__ */ jsx95("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ jsx95(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx91(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx91(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs40("div", { ref: refs.setFloating, className: cx28(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
-      currentOrganization && /* @__PURE__ */ jsxs40("div", { className: cx28(styles.header), children: [
-        /* @__PURE__ */ jsx91(
+    isOpen && /* @__PURE__ */ jsx95(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx95(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs42("div", { ref: refs.setFloating, className: cx30(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+      currentOrganization && /* @__PURE__ */ jsxs42("div", { className: cx30(styles.header), children: [
+        /* @__PURE__ */ jsx95(
           Avatar,
           {
             variant: "square",
@@ -12134,10 +13022,10 @@ var BaseOrganizationSwitcher = ({
             alt: `${currentOrganization.name} avatar`
           }
         ),
-        /* @__PURE__ */ jsxs40("div", { className: cx28(styles.headerInfo), children: [
-          /* @__PURE__ */ jsx91(Typography_default, { noWrap: true, className: cx28(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
-          /* @__PURE__ */ jsxs40("div", { className: cx28(styles.headerMeta), children: [
-            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsxs42("div", { className: cx30(styles.headerInfo), children: [
+          /* @__PURE__ */ jsx95(Typography_default, { noWrap: true, className: cx30(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ jsxs42("div", { className: cx30(styles.headerMeta), children: [
+            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs42(
               Typography_default,
               {
                 noWrap: true,
@@ -12147,17 +13035,17 @@ var BaseOrganizationSwitcher = ({
                   currentOrganization.memberCount,
                   " ",
                   currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
-                  showRole && currentOrganization.role && /* @__PURE__ */ jsxs40("span", { children: [
+                  showRole && currentOrganization.role && /* @__PURE__ */ jsxs42("span", { children: [
                     " \u2022 ",
                     currentOrganization.role
                   ] })
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx91(Typography_default, { noWrap: true, className: cx28(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx95(Typography_default, { noWrap: true, className: cx30(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
-        onManageProfile && /* @__PURE__ */ jsx91(
+        onManageProfile && /* @__PURE__ */ jsx95(
           Button_default,
           {
             onClick: onManageProfile,
@@ -12165,8 +13053,8 @@ var BaseOrganizationSwitcher = ({
             variant: "outline",
             size: "small",
             "aria-label": "Manage Organization Profile",
-            className: cx28(styles.manageButton),
-            endIcon: /* @__PURE__ */ jsxs40(
+            className: cx30(styles.manageButton),
+            endIcon: /* @__PURE__ */ jsxs42(
               "svg",
               {
                 width: "16",
@@ -12178,8 +13066,8 @@ var BaseOrganizationSwitcher = ({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx91("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ jsx91("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+                  /* @__PURE__ */ jsx95("circle", { cx: "12", cy: "12", r: "3" }),
+                  /* @__PURE__ */ jsx95("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
                 ]
               }
             ),
@@ -12187,24 +13075,24 @@ var BaseOrganizationSwitcher = ({
           }
         )
       ] }),
-      organizations.length > 1 && /* @__PURE__ */ jsx91(
+      organizations.length > 1 && /* @__PURE__ */ jsx95(
         "div",
         {
-          className: cx28(styles.header, styles.sectionHeaderContainer),
+          className: cx30(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ jsx91(Typography_default, { variant: "caption", fontWeight: 600, className: cx28(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ jsx95(Typography_default, { variant: "caption", fontWeight: 600, className: cx30(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ jsx91("div", { className: cx28(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs40(Fragment17, { children: [
+      /* @__PURE__ */ jsx95("div", { className: cx30(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs42(Fragment17, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
-          return /* @__PURE__ */ jsx91(
+          return /* @__PURE__ */ jsx95(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
-              className: cx28(styles.menuItem),
+              className: cx30(styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -12218,34 +13106,34 @@ var BaseOrganizationSwitcher = ({
             organization.id
           );
         }),
-        menuItems.length > 0 && /* @__PURE__ */ jsxs40(Fragment17, { children: [
-          /* @__PURE__ */ jsx91("div", { className: cx28(styles.menuDivider) }),
+        menuItems.length > 0 && /* @__PURE__ */ jsxs42(Fragment17, { children: [
+          /* @__PURE__ */ jsx95("div", { className: cx30(styles.menuDivider) }),
           menuItems.map(
-            (item, index) => /* @__PURE__ */ jsx91("div", { children: item.href ? /* @__PURE__ */ jsxs40(
+            (item, index) => /* @__PURE__ */ jsx95("div", { children: item.href ? /* @__PURE__ */ jsxs42(
               "a",
               {
                 href: item.href,
                 style: {
                   backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: cx28(styles.menuItem),
+                className: cx30(styles.menuItem),
                 onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
                 onMouseLeave: () => setHoveredItemIndex(null),
                 onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
                 onBlur: () => setHoveredItemIndex(null),
                 children: [
                   item.icon,
-                  /* @__PURE__ */ jsx91("span", { children: item.label })
+                  /* @__PURE__ */ jsx95("span", { children: item.label })
                 ]
               }
-            ) : /* @__PURE__ */ jsx91(
+            ) : /* @__PURE__ */ jsx95(
               Button_default,
               {
                 onClick: () => handleMenuItemClick(item),
                 style: {
                   backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: cx28(styles.menuItem),
+                className: cx30(styles.menuItem),
                 color: "tertiary",
                 variant: "text",
                 size: "small",
@@ -12264,60 +13152,60 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { useState as useState31 } from "react";
+import { useState as useState33 } from "react";
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { useState as useState26 } from "react";
+import { useState as useState28 } from "react";
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { cx as cx29 } from "@emotion/css";
-import { useState as useState25 } from "react";
+import { cx as cx31 } from "@emotion/css";
+import { useState as useState27 } from "react";
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
-import { css as css24 } from "@emotion/css";
-import { useMemo as useMemo32 } from "react";
-var useStyles24 = (theme, colorScheme) => {
-  return useMemo32(() => {
-    const root = css24`
+import { css as css26 } from "@emotion/css";
+import { useMemo as useMemo35 } from "react";
+var useStyles26 = (theme, colorScheme) => {
+  return useMemo35(() => {
+    const root = css26`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
     `;
-    const card = css24`
+    const card = css26`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const content = css24`
+    const content = css26`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const form = css24`
+    const form = css26`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
       width: 100%;
     `;
-    const header = css24`
+    const header = css26`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
       margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const field = css24`
+    const field = css26`
       display: flex;
       align-items: center;
       padding: ${theme.vars.spacing.unit} 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
       min-height: 32px;
     `;
-    const fieldGroup = css24`
+    const fieldGroup = css26`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
     `;
-    const textarea = css24`
+    const textarea = css26`
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${theme.vars.colors.border};
@@ -12339,28 +13227,28 @@ var useStyles24 = (theme, colorScheme) => {
         cursor: not-allowed;
       }
     `;
-    const textareaError = css24`
+    const textareaError = css26`
       border-color: ${theme.vars.colors.error.main};
     `;
-    const input = css24``;
-    const avatarContainer = css24`
+    const input = css26``;
+    const avatarContainer = css26`
       align-items: flex-start;
       display: flex;
       gap: calc(${theme.vars.spacing.unit} * 2);
       margin-bottom: ${theme.vars.spacing.unit};
     `;
-    const actions = css24`
+    const actions = css26`
       display: flex;
       gap: ${theme.vars.spacing.unit};
       justify-content: flex-end;
       padding-top: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const infoContainer = css24`
+    const infoContainer = css26`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-    const value = css24`
+    const value = css26`
       color: ${theme.vars.colors.text.primary};
       flex: 1;
       display: flex;
@@ -12370,10 +13258,10 @@ var useStyles24 = (theme, colorScheme) => {
       min-height: 32px;
       line-height: 32px;
     `;
-    const popup = css24`
+    const popup = css26`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorAlert = css24`
+    const errorAlert = css26`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     return {
@@ -12409,10 +13297,10 @@ var useStyles24 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseCreateOrganization_styles_default = useStyles24;
+var BaseCreateOrganization_styles_default = useStyles26;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { jsx as jsx92, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs43 } from "react/jsx-runtime";
 var BaseCreateOrganization = ({
   cardLayout = true,
   className = "",
@@ -12433,13 +13321,13 @@ var BaseCreateOrganization = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const [formData, setFormData] = useState25({
+  const [formData, setFormData] = useState27({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = useState25({});
+  const [formErrors, setFormErrors] = useState27({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -12499,13 +13387,13 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ jsx92("div", { className: cx29(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs41("div", { className: cx29(styles.content), children: [
-    /* @__PURE__ */ jsxs41("form", { id: "create-organization-form", className: cx29(styles.form), onSubmit: handleSubmit, children: [
-      error && /* @__PURE__ */ jsxs41(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-        /* @__PURE__ */ jsx92(Alert_default.Title, { children: "Error" }),
-        /* @__PURE__ */ jsx92(Alert_default.Description, { children: error })
+  const createOrganizationContent = /* @__PURE__ */ jsx96("div", { className: cx31(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs43("div", { className: cx31(styles.content), children: [
+    /* @__PURE__ */ jsxs43("form", { id: "create-organization-form", className: cx31(styles.form), onSubmit: handleSubmit, children: [
+      error && /* @__PURE__ */ jsxs43(Alert_default, { variant: "error", className: styles.errorAlert, children: [
+        /* @__PURE__ */ jsx96(Alert_default.Title, { children: "Error" }),
+        /* @__PURE__ */ jsx96(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ jsx92("div", { className: cx29(styles.fieldGroup), children: /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx96("div", { className: cx31(styles.fieldGroup), children: /* @__PURE__ */ jsx96(
         TextField_default,
         {
           label: `${t("elements.fields.organization.name.label")}`,
@@ -12515,10 +13403,10 @@ var BaseCreateOrganization = ({
           disabled: loading,
           required: true,
           error: formErrors.name,
-          className: cx29(styles.input)
+          className: cx31(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx92("div", { className: cx29(styles.fieldGroup), children: /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx96("div", { className: cx31(styles.fieldGroup), children: /* @__PURE__ */ jsx96(
         TextField_default,
         {
           label: `${t("elements.fields.organization.handle.label") || "Organization Handle"}`,
@@ -12529,15 +13417,15 @@ var BaseCreateOrganization = ({
           required: true,
           error: formErrors.handle,
           helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
-          className: cx29(styles.input)
+          className: cx31(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx92("div", { className: cx29(styles.fieldGroup), children: /* @__PURE__ */ jsxs41(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ jsx92(InputLabel_default, { required: true, children: t("elements.fields.organization.description.label") }),
-        /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx96("div", { className: cx31(styles.fieldGroup), children: /* @__PURE__ */ jsxs43(FormControl_default, { error: formErrors.description, children: [
+        /* @__PURE__ */ jsx96(InputLabel_default, { required: true, children: t("elements.fields.organization.description.label") }),
+        /* @__PURE__ */ jsx96(
           "textarea",
           {
-            className: cx29(styles.textarea, formErrors.description && styles.textareaError),
+            className: cx31(styles.textarea, formErrors.description && styles.textareaError),
             placeholder: t("organization.create.description.placeholder"),
             value: formData.description,
             onChange: (e) => handleInputChange("description", e.target.value),
@@ -12548,15 +13436,15 @@ var BaseCreateOrganization = ({
       ] }) }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: cx29(styles.actions), children: [
-      onCancel && /* @__PURE__ */ jsx92(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.buttons.cancel.text") }),
-      /* @__PURE__ */ jsx92(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.buttons.create_organization.loading.text") : t("organization.create.buttons.create_organization.text") })
+    /* @__PURE__ */ jsxs43("div", { className: cx31(styles.actions), children: [
+      onCancel && /* @__PURE__ */ jsx96(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.buttons.cancel.text") }),
+      /* @__PURE__ */ jsx96(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.buttons.create_organization.loading.text") : t("organization.create.buttons.create_organization.text") })
     ] })
   ] }) });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx92(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs41(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx92(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx92("div", { className: styles.popup, children: createOrganizationContent })
+    return /* @__PURE__ */ jsx96(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx96(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx96("div", { className: styles.popup, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
@@ -12592,7 +13480,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { Fragment as Fragment18, jsx as jsx93 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx97 } from "react/jsx-runtime";
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -12602,13 +13490,13 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl } = useAsgardeo_default();
   const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
-  const [loading, setLoading] = useState26(false);
-  const [error, setError] = useState26(null);
+  const [loading, setLoading] = useState28(false);
+  const [error, setError] = useState28(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx93(Fragment18, {});
+    return /* @__PURE__ */ jsx97(Fragment18, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -12642,7 +13530,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx97(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -12656,43 +13544,43 @@ var CreateOrganization = ({
 };
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { useEffect as useEffect16, useState as useState29 } from "react";
+import { useEffect as useEffect18, useState as useState31 } from "react";
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 import { formatDate } from "@asgardeo/browser";
-import { cx as cx31 } from "@emotion/css";
-import { useState as useState28, useCallback as useCallback16 } from "react";
+import { cx as cx33 } from "@emotion/css";
+import { useState as useState30, useCallback as useCallback18 } from "react";
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix29, bem as bem20 } from "@asgardeo/browser";
-import { cx as cx30 } from "@emotion/css";
-import { useState as useState27, useCallback as useCallback15 } from "react";
+import { cx as cx32 } from "@emotion/css";
+import { useState as useState29, useCallback as useCallback17 } from "react";
 
 // src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
-import { css as css25 } from "@emotion/css";
-import { useMemo as useMemo33 } from "react";
-var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
-  return useMemo33(() => {
-    const container = css25`
+import { css as css27 } from "@emotion/css";
+import { useMemo as useMemo36 } from "react";
+var useStyles27 = (theme, colorScheme, disabled, readOnly, hasError) => {
+  return useMemo36(() => {
+    const container = css27`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const label = css25`
+    const label = css27`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.primary};
       margin-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const requiredIndicator = css25`
+    const requiredIndicator = css27`
       color: ${theme.vars.colors.error.main};
     `;
-    const pairsList = css25`
+    const pairsList = css27`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
     `;
-    const pairRow = css25`
+    const pairRow = css27`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -12705,11 +13593,11 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
         background-color: ${theme.vars.colors.action.hover};
       }
     `;
-    const pairInput = css25`
+    const pairInput = css27`
       flex: 1;
       min-width: 0;
     `;
-    const addRow = css25`
+    const addRow = css27`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -12719,7 +13607,7 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
       background-color: transparent;
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const removeButton = css25`
+    const removeButton = css27`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -12742,7 +13630,7 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
         opacity: 0.6;
       }
     `;
-    const addButton = css25`
+    const addButton = css27`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -12765,39 +13653,39 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
         opacity: 0.6;
       }
     `;
-    const helperText = css25`
+    const helperText = css27`
       font-size: 0.75rem;
       color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const emptyState = css25`
+    const emptyState = css27`
       padding: ${theme.vars.spacing.unit};
       text-align: center;
       color: ${theme.vars.colors.text.secondary};
       font-style: italic;
       font-size: 0.75rem;
     `;
-    const readOnlyPair = css25`
+    const readOnlyPair = css27`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
       padding: calc(${theme.vars.spacing.unit} / 4) 0;
       min-height: 20px;
     `;
-    const readOnlyKey = css25`
+    const readOnlyKey = css27`
       font-size: 0.75rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
       min-width: 80px;
       flex-shrink: 0;
     `;
-    const readOnlyValue = css25`
+    const readOnlyValue = css27`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.primary};
       word-break: break-word;
       flex: 1;
     `;
-    const counterText = css25`
+    const counterText = css27`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);
@@ -12821,10 +13709,10 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
     };
   }, [theme, colorScheme, disabled, readOnly, hasError]);
 };
-var KeyValueInput_styles_default = useStyles25;
+var KeyValueInput_styles_default = useStyles27;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-import { jsx as jsx94, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs44 } from "react/jsx-runtime";
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -12847,10 +13735,10 @@ var KeyValueInput = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = KeyValueInput_styles_default(theme, colorScheme, disabled, readOnly, !!error);
   const initialPairs = Array.isArray(value) ? value : Object.entries(value).map(([key, val]) => ({ key, value: String(val) }));
-  const [pairs, setPairs] = useState27(initialPairs);
-  const [newKey, setNewKey] = useState27("");
-  const [newValue, setNewValue] = useState27("");
-  const handleAddPair = useCallback15(() => {
+  const [pairs, setPairs] = useState29(initialPairs);
+  const [newKey, setNewKey] = useState29("");
+  const [newValue, setNewValue] = useState29("");
+  const handleAddPair = useCallback17(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -12868,7 +13756,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = useCallback15(
+  const handleRemovePair = useCallback17(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -12882,7 +13770,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = useCallback15(
+  const handleUpdatePair = useCallback17(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -12899,105 +13787,105 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ jsxs42("label", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ jsxs44("div", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ jsxs44("label", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "label")), styles.label), children: [
       label,
-      required && /* @__PURE__ */ jsx94(
+      required && /* @__PURE__ */ jsx98(
         "span",
         {
-          className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "required")), styles.requiredIndicator),
+          className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "required")), styles.requiredIndicator),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx94("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs42(
+    /* @__PURE__ */ jsxs44("div", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx98("div", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs44(
         "div",
         {
-          className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-pair")), styles.readOnlyPair),
+          className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
-            /* @__PURE__ */ jsxs42(
+            /* @__PURE__ */ jsxs44(
               "span",
               {
-                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-key")), styles.readOnlyKey),
+                className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-key")), styles.readOnlyKey),
                 children: [
                   pair.key,
                   ":"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx94(
+            /* @__PURE__ */ jsx98(
               "span",
               {
-                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-value")), styles.readOnlyValue),
+                className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-value")), styles.readOnlyValue),
                 children: pair.value
               }
             )
           ]
         },
         `${pair.key}-${index}`
-      )) : pairs.map((pair, index) => /* @__PURE__ */ jsxs42(
+      )) : pairs.map((pair, index) => /* @__PURE__ */ jsxs44(
         "div",
         {
-          className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-row")), styles.pairRow),
+          className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-row")), styles.pairRow),
           children: [
-            /* @__PURE__ */ jsx94(
+            /* @__PURE__ */ jsx98(
               TextField_default,
               {
                 placeholder: keyPlaceholder,
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
+                className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
-            /* @__PURE__ */ jsx94(
+            /* @__PURE__ */ jsx98(
               TextField_default,
               {
                 placeholder: valuePlaceholder,
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
+                className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
-            !readOnly && /* @__PURE__ */ jsx94(
+            !readOnly && /* @__PURE__ */ jsx98(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemovePair(index),
                 disabled,
-                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "remove-button")), styles.removeButton),
+                className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
-                children: /* @__PURE__ */ jsx94(X_default, { width: 16, height: 16 })
+                children: /* @__PURE__ */ jsx98(X_default, { width: 16, height: 16 })
               }
             )
           ]
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "add-row")), styles.addRow), children: [
-        /* @__PURE__ */ jsx94(
+      !readOnly && /* @__PURE__ */ jsxs44("div", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "add-row")), styles.addRow), children: [
+        /* @__PURE__ */ jsx98(
           TextField_default,
           {
             placeholder: keyPlaceholder,
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
+            className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx98(
           TextField_default,
           {
             placeholder: valuePlaceholder,
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
+            className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -13006,21 +13894,21 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx98(
           "button",
           {
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "add-button")), styles.addButton),
+            className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ jsx94(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ jsx98(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ jsx94("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ jsx98("div", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ jsxs44("div", { className: cx32(withVendorCSSClassPrefix29(bem20("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -13031,48 +13919,48 @@ var KeyValueInput = ({
 var KeyValueInput_default = KeyValueInput;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
-import { css as css26 } from "@emotion/css";
-import { useMemo as useMemo34 } from "react";
-var useStyles26 = (theme, colorScheme) => {
-  return useMemo34(() => {
+import { css as css28 } from "@emotion/css";
+import { useMemo as useMemo37 } from "react";
+var useStyles28 = (theme, colorScheme) => {
+  return useMemo37(() => {
     return {
-      root: css26`
+      root: css28`
         padding: calc(${theme.vars.spacing.unit} * 4);
         min-width: 600px;
         margin: 0 auto;
       `,
-      card: css26`
+      card: css28`
         background: ${theme.vars.colors.background.surface};
         border-radius: ${theme.vars.borderRadius.large};
       `,
-      header: css26`
+      header: css28`
         display: flex;
         align-items: center;
         gap: calc(${theme.vars.spacing.unit} * 2);
         margin-bottom: calc(${theme.vars.spacing.unit} * 3);
         padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       `,
-      orgInfo: css26`
+      orgInfo: css28`
         flex: 1;
       `,
-      name: css26`
+      name: css28`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
       `,
-      handle: css26`
+      handle: css28`
         font-size: 1rem;
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
       `,
-      infoContainer: css26`
+      infoContainer: css28`
         display: flex;
         flex-direction: column;
         gap: ${theme.vars.spacing.unit};
       `,
-      field: css26`
+      field: css28`
         display: flex;
         align-items: flex-start;
         padding: calc(${theme.vars.spacing.unit} / 2) 0;
@@ -13080,21 +13968,21 @@ var useStyles26 = (theme, colorScheme) => {
         min-height: 28px;
         gap: ${theme.vars.spacing.unit};
       `,
-      fieldLast: css26`
+      fieldLast: css28`
         border-bottom: none;
       `,
-      fieldContent: css26`
+      fieldContent: css28`
         flex: 1;
         display: flex;
         align-items: center;
         gap: ${theme.vars.spacing.unit};
       `,
-      fieldActions: css26`
+      fieldActions: css28`
         display: flex;
         align-items: center;
         gap: calc(${theme.vars.spacing.unit} / 2);
       `,
-      label: css26`
+      label: css28`
         font-size: 0.875rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
@@ -13102,7 +13990,7 @@ var useStyles26 = (theme, colorScheme) => {
         flex-shrink: 0;
         line-height: 28px;
       `,
-      value: css26`
+      value: css28`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
         display: flex;
@@ -13113,11 +14001,11 @@ var useStyles26 = (theme, colorScheme) => {
         line-height: 28px;
         word-break: break-word;
       `,
-      valueEmpty: css26`
+      valueEmpty: css28`
         font-style: italic;
         opacity: 0.7;
       `,
-      statusBadge: css26`
+      statusBadge: css28`
         padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
         border-radius: ${theme.vars.borderRadius.small};
         font-size: 0.75rem;
@@ -13126,12 +14014,12 @@ var useStyles26 = (theme, colorScheme) => {
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
-      permissionsList: css26`
+      permissionsList: css28`
         display: flex;
         flex-wrap: wrap;
         gap: calc(${theme.vars.spacing.unit} / 2);
       `,
-      permissionBadge: css26`
+      permissionBadge: css28`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
         border-radius: ${theme.vars.borderRadius.small};
         font-size: 0.75rem;
@@ -13139,55 +14027,55 @@ var useStyles26 = (theme, colorScheme) => {
         color: ${theme.vars.colors.primary.contrastText};
         border: 1px solid ${theme.vars.colors.border};
       `,
-      attributesList: css26`
+      attributesList: css28`
         display: flex;
         flex-direction: column;
         gap: calc(${theme.vars.spacing.unit} / 4);
       `,
-      attributeItem: css26`
+      attributeItem: css28`
         display: flex;
         gap: ${theme.vars.spacing.unit};
         padding: calc(${theme.vars.spacing.unit} / 4) 0;
         align-items: center;
       `,
-      attributeKey: css26`
+      attributeKey: css28`
         font-size: 0.75rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
         min-width: 80px;
         flex-shrink: 0;
       `,
-      attributeValue: css26`
+      attributeValue: css28`
         font-size: 0.75rem;
         color: ${theme.vars.colors.text.primary};
         word-break: break-word;
         flex: 1;
       `,
-      popup: css26`
+      popup: css28`
         padding: calc(${theme.vars.spacing.unit} * 2);
       `,
-      editButton: css26`
+      editButton: css28`
         min-width: auto;
         padding: calc(${theme.vars.spacing.unit} / 2);
         min-height: auto;
       `,
-      placeholderButton: css26`
+      placeholderButton: css28`
         font-style: italic;
         text-decoration: underline;
         opacity: 0.7;
         padding: 0;
         min-height: auto;
       `,
-      fieldInput: css26`
+      fieldInput: css28`
         margin-bottom: 0;
       `
     };
   }, [theme, colorScheme]);
 };
-var BaseOrganizationProfile_styles_default = useStyles26;
+var BaseOrganizationProfile_styles_default = useStyles28;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-import { Fragment as Fragment19, jsx as jsx95, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx99, jsxs as jsxs45 } from "react/jsx-runtime";
 var BaseOrganizationProfile = ({
   fallback = null,
   className = "",
@@ -13236,9 +14124,9 @@ var BaseOrganizationProfile = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
-  const [editedOrganization, setEditedOrganization] = useState28(organization);
-  const [editingFields, setEditingFields] = useState28({});
-  const PencilIcon = () => /* @__PURE__ */ jsx95(
+  const [editedOrganization, setEditedOrganization] = useState30(organization);
+  const [editingFields, setEditingFields] = useState30({});
+  const PencilIcon = () => /* @__PURE__ */ jsx99(
     "svg",
     {
       width: "16",
@@ -13249,16 +14137,16 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx95("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx99("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = useCallback16((fieldName) => {
+  const toggleFieldEdit = useCallback18((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = useCallback16((fieldKey) => {
+  const getFieldPlaceholder = useCallback18((fieldKey) => {
     const fieldLabels = {
       name: "organization name",
       description: "organization description",
@@ -13269,7 +14157,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = useCallback16(
+  const handleFieldSave = useCallback18(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       const fieldValue = editedOrganization && fieldKey && editedOrganization[fieldKey] !== void 0 ? editedOrganization[fieldKey] : organization && organization[fieldKey] !== void 0 ? organization[fieldKey] : "";
@@ -13281,7 +14169,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = useCallback16(
+  const handleFieldCancel = useCallback18(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -13307,12 +14195,12 @@ var BaseOrganizationProfile = ({
         value: typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue || ""),
         onChange: (e) => onEditValue(e.target ? e.target.value : e),
         placeholder: getFieldPlaceholder(key),
-        className: cx31(styles.fieldInput)
+        className: cx33(styles.fieldInput)
       };
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ jsx95(
+        fieldInput = /* @__PURE__ */ jsx99(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -13350,26 +14238,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ jsx95(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ jsx99(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs43(Fragment19, { children: [
-        /* @__PURE__ */ jsx95("span", { className: cx31(styles.label), children: label }),
-        /* @__PURE__ */ jsx95("div", { className: cx31(styles.value), children: fieldInput })
+      return /* @__PURE__ */ jsxs45(Fragment19, { children: [
+        /* @__PURE__ */ jsx99("span", { className: cx33(styles.label), children: label }),
+        /* @__PURE__ */ jsx99("div", { className: cx33(styles.value), children: fieldInput })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
     const isFieldEditable = editable && fieldEditable;
     let displayValue;
     if (hasValue) {
-      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx95(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx99(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs43(Fragment19, { children: [
-      /* @__PURE__ */ jsx95("span", { className: cx31(styles.label), children: label }),
-      /* @__PURE__ */ jsx95("div", { className: cx31(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsxs45(Fragment19, { children: [
+      /* @__PURE__ */ jsx99("span", { className: cx33(styles.label), children: label }),
+      /* @__PURE__ */ jsx99("div", { className: cx33(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx99(
         Button_default,
         {
           onClick: onStartEdit,
@@ -13377,7 +14265,7 @@ var BaseOrganizationProfile = ({
           color: "secondary",
           size: "small",
           title: "Click to edit",
-          className: cx31(styles.placeholderButton),
+          className: cx33(styles.placeholderButton),
           children: displayValue
         }
       ) : displayValue })
@@ -13392,8 +14280,8 @@ var BaseOrganizationProfile = ({
     if (!shouldShow) {
       return null;
     }
-    return /* @__PURE__ */ jsxs43("div", { className: cx31(styles.field), children: [
-      /* @__PURE__ */ jsx95("div", { className: cx31(styles.fieldContent), children: renderField(
+    return /* @__PURE__ */ jsxs45("div", { className: cx33(styles.field), children: [
+      /* @__PURE__ */ jsx99("div", { className: cx33(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -13403,8 +14291,8 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ jsx95("div", { className: cx31(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs43(Fragment19, { children: [
-        /* @__PURE__ */ jsx95(
+      isFieldEditable && /* @__PURE__ */ jsx99("div", { className: cx33(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs45(Fragment19, { children: [
+        /* @__PURE__ */ jsx99(
           Button_default,
           {
             onClick: () => handleFieldSave(field.key),
@@ -13415,7 +14303,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx99(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -13426,7 +14314,7 @@ var BaseOrganizationProfile = ({
             children: cancelButtonText
           }
         )
-      ] }) : hasValue && /* @__PURE__ */ jsx95(
+      ] }) : hasValue && /* @__PURE__ */ jsx99(
         Button_default,
         {
           onClick: () => toggleFieldEdit(field.key),
@@ -13434,8 +14322,8 @@ var BaseOrganizationProfile = ({
           color: "secondary",
           size: "small",
           title: "Edit field",
-          className: cx31(styles.editButton),
-          children: /* @__PURE__ */ jsx95(PencilIcon, {})
+          className: cx33(styles.editButton),
+          children: /* @__PURE__ */ jsx99(PencilIcon, {})
         }
       ) })
     ] }, field.key);
@@ -13443,23 +14331,23 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
-  const profileContent = /* @__PURE__ */ jsxs43(Card_default, { className: cx31(styles.root, cardLayout && styles.card, className), children: [
-    /* @__PURE__ */ jsxs43("div", { className: cx31(styles.header), children: [
-      /* @__PURE__ */ jsx95(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs43("div", { className: cx31(styles.orgInfo), children: [
-        /* @__PURE__ */ jsx95("h2", { className: cx31(styles.name), children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ jsxs43("p", { className: cx31(styles.handle), children: [
+  const profileContent = /* @__PURE__ */ jsxs45(Card_default, { className: cx33(styles.root, cardLayout && styles.card, className), children: [
+    /* @__PURE__ */ jsxs45("div", { className: cx33(styles.header), children: [
+      /* @__PURE__ */ jsx99(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs45("div", { className: cx33(styles.orgInfo), children: [
+        /* @__PURE__ */ jsx99("h2", { className: cx33(styles.name), children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ jsxs45("p", { className: cx33(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx95("div", { className: cx31(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ jsx99("div", { className: cx33(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx95(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx95(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx95("div", { className: cx31(styles.popup), children: profileContent })
+    return /* @__PURE__ */ jsx99(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs45(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx99(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx99("div", { className: cx33(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -13528,7 +14416,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -13536,15 +14424,15 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ jsx96("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ jsx96("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ jsx100("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ jsx100("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [organization, setOrganization] = useState29(null);
-  const [loading, setLoading] = useState29(true);
-  const [error, setError] = useState29(false);
+  const [organization, setOrganization] = useState31(null);
+  const [loading, setLoading] = useState31(true);
+  const [error, setError] = useState31(false);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       setLoading(false);
@@ -13567,7 +14455,7 @@ var OrganizationProfile = ({
       setLoading(false);
     }
   };
-  useEffect16(() => {
+  useEffect18(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
   const handleOrganizationUpdate = async (payload) => {
@@ -13588,7 +14476,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx100(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -13604,26 +14492,26 @@ var OrganizationProfile = ({
 var OrganizationProfile_default = OrganizationProfile;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { cx as cx33 } from "@emotion/css";
-import { useEffect as useEffect17, useState as useState30 } from "react";
+import { cx as cx35 } from "@emotion/css";
+import { useEffect as useEffect19, useState as useState32 } from "react";
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { cx as cx32 } from "@emotion/css";
-import { useMemo as useMemo36 } from "react";
+import { cx as cx34 } from "@emotion/css";
+import { useMemo as useMemo39 } from "react";
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
-import { css as css27 } from "@emotion/css";
-import { useMemo as useMemo35 } from "react";
-var useStyles27 = (theme, colorScheme) => {
-  return useMemo35(() => {
-    const root = css27`
+import { css as css29 } from "@emotion/css";
+import { useMemo as useMemo38 } from "react";
+var useStyles29 = (theme, colorScheme) => {
+  return useMemo38(() => {
+    const root = css29`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
     `;
-    const header = css27`
+    const header = css29`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -13631,21 +14519,21 @@ var useStyles27 = (theme, colorScheme) => {
       padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerInfo = css27`
+    const headerInfo = css29`
       flex: 1;
     `;
-    const title = css27`
+    const title = css29`
       font-size: 1.5rem;
       font-weight: 600;
       margin: 0 0 8px 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const subtitle = css27`
+    const subtitle = css29`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
     `;
-    const refreshButton = css27`
+    const refreshButton = css29`
       background-color: ${theme.vars.colors.background.surface};
       border: 1px solid ${theme.vars.colors.border};
       border-radius: ${theme.vars.borderRadius.small};
@@ -13659,12 +14547,12 @@ var useStyles27 = (theme, colorScheme) => {
         border-color: ${theme.vars.colors.primary.main};
       }
     `;
-    const listContainer = css27`
+    const listContainer = css29`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const organizationItem = css27`
+    const organizationItem = css29`
       border: 1px solid ${theme.vars.colors.border};
       border-radius: ${theme.vars.borderRadius.medium};
       display: flex;
@@ -13677,46 +14565,46 @@ var useStyles27 = (theme, colorScheme) => {
         box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;
       }
     `;
-    const organizationContent = css27`
+    const organizationContent = css29`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 2);
       flex: 1;
     `;
-    const organizationInfo = css27`
+    const organizationInfo = css29`
       flex: 1;
     `;
-    const organizationName = css27`
+    const organizationName = css29`
       font-size: 1.125rem;
       font-weight: 600;
       margin: 0 0 4px 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const organizationHandle = css27`
+    const organizationHandle = css29`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0 0 4px 0;
       font-family: monospace;
     `;
-    const organizationStatus = css27`
+    const organizationStatus = css29`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
     `;
-    const statusText = css27`
+    const statusText = css29`
       font-weight: 500;
     `;
-    const statusTextActive = css27`
+    const statusTextActive = css29`
       color: ${theme.vars.colors.success.main};
     `;
-    const statusTextInactive = css27`
+    const statusTextInactive = css29`
       color: ${theme.vars.colors.error.main};
     `;
-    const organizationActions = css27`
+    const organizationActions = css29`
       display: flex;
       align-items: center;
     `;
-    const badge = css27`
+    const badge = css29`
       border-radius: ${theme.vars.borderRadius.large};
       font-size: 0.75rem;
       font-weight: 500;
@@ -13724,15 +14612,15 @@ var useStyles27 = (theme, colorScheme) => {
       text-transform: uppercase;
       letter-spacing: 0.5px;
     `;
-    const badgeSuccess = css27`
+    const badgeSuccess = css29`
       background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);
       color: ${theme.vars.colors.success.main};
     `;
-    const badgeError = css27`
+    const badgeError = css29`
       background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
       color: ${theme.vars.colors.error.main};
     `;
-    const loadingContainer = css27`
+    const loadingContainer = css29`
       padding: calc(${theme.vars.spacing.unit} * 4);
       text-align: center;
       display: flex;
@@ -13740,25 +14628,25 @@ var useStyles27 = (theme, colorScheme) => {
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadingText = css27`
+    const loadingText = css29`
       margin-top: ${theme.vars.spacing.unit};
     `;
-    const errorContainer = css27`
+    const errorContainer = css29`
       background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
       border: 1px solid ${theme.vars.colors.error.main};
       border-radius: ${theme.vars.borderRadius.medium};
       color: ${theme.vars.colors.error.main};
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const emptyContainer = css27`
+    const emptyContainer = css29`
       padding: calc(${theme.vars.spacing.unit} * 4);
       text-align: center;
     `;
-    const emptyText = css27`
+    const emptyText = css29`
       color: ${theme.vars.colors.text.secondary};
       font-size: 1rem;
     `;
-    const loadMoreButton = css27`
+    const loadMoreButton = css29`
       background-color: ${theme.vars.colors.primary.main};
       border: none;
       border-radius: ${theme.vars.borderRadius.medium};
@@ -13779,13 +14667,13 @@ var useStyles27 = (theme, colorScheme) => {
         opacity: 0.6;
       }
     `;
-    const errorMargin = css27`
+    const errorMargin = css29`
       margin-top: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadMoreMargin = css27`
+    const loadMoreMargin = css29`
       margin-top: calc(${theme.vars.spacing.unit} * 3);
     `;
-    const popupContent = css27`
+    const popupContent = css29`
       padding: ${theme.vars.spacing.unit};
     `;
     return {
@@ -13835,27 +14723,27 @@ var useStyles27 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseOrganizationList_styles_default = useStyles27;
+var BaseOrganizationList_styles_default = useStyles29;
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { jsx as jsx97, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs46 } from "react/jsx-runtime";
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
-  return /* @__PURE__ */ jsxs44("div", { className: cx32(styles.organizationItem), children: [
-    /* @__PURE__ */ jsxs44("div", { className: cx32(styles.organizationContent), children: [
-      /* @__PURE__ */ jsx97(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs44("div", { className: cx32(styles.organizationInfo), children: [
-        /* @__PURE__ */ jsx97(Typography_default, { variant: "h6", className: cx32(styles.organizationName), children: organization.name }),
-        /* @__PURE__ */ jsxs44(Typography_default, { variant: "body2", color: "textSecondary", className: cx32(styles.organizationHandle), children: [
+  return /* @__PURE__ */ jsxs46("div", { className: cx34(styles.organizationItem), children: [
+    /* @__PURE__ */ jsxs46("div", { className: cx34(styles.organizationContent), children: [
+      /* @__PURE__ */ jsx101(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs46("div", { className: cx34(styles.organizationInfo), children: [
+        /* @__PURE__ */ jsx101(Typography_default, { variant: "h6", className: cx34(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ jsxs46(Typography_default, { variant: "body2", color: "textSecondary", className: cx34(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
         ] }),
-        showStatus && /* @__PURE__ */ jsxs44(Typography_default, { variant: "body2", color: "textSecondary", className: cx32(styles.organizationStatus), children: [
+        showStatus && /* @__PURE__ */ jsxs46(Typography_default, { variant: "body2", color: "textSecondary", className: cx34(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
-          /* @__PURE__ */ jsx97(
+          /* @__PURE__ */ jsx101(
             "span",
             {
-              className: cx32(
+              className: cx34(
                 styles.statusText,
                 organization.status === "ACTIVE" ? styles.statusTextActive : styles.statusTextInactive
               ),
@@ -13865,7 +14753,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ jsx97("div", { className: cx32(styles.organizationActions), children: /* @__PURE__ */ jsx97(
+    organization.canSwitch && /* @__PURE__ */ jsx101("div", { className: cx34(styles.organizationActions), children: /* @__PURE__ */ jsx101(
       Button_default,
       {
         onClick: (e) => {
@@ -13879,17 +14767,17 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
     ) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs44("div", { className: cx32(styles.loadingContainer), children: [
-  /* @__PURE__ */ jsx97(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ jsx97(Typography_default, { variant: "body1", color: "textSecondary", className: cx32(styles.loadingText), children: t("organization.switcher.loading.placeholder.organizations") })
+var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs46("div", { className: cx34(styles.loadingContainer), children: [
+  /* @__PURE__ */ jsx101(Spinner_default, { size: "medium" }),
+  /* @__PURE__ */ jsx101(Typography_default, { variant: "body1", color: "textSecondary", className: cx34(styles.loadingText), children: t("organization.switcher.loading.placeholder.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx97("div", { className: cx32(styles.errorContainer), children: /* @__PURE__ */ jsxs44(Typography_default, { variant: "body1", color: "error", children: [
-  /* @__PURE__ */ jsx97("strong", { children: t("organization.switcher.error.prefix") }),
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx101("div", { className: cx34(styles.errorContainer), children: /* @__PURE__ */ jsxs46(Typography_default, { variant: "body1", color: "error", children: [
+  /* @__PURE__ */ jsx101("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx97(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx32(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.buttons.load_more.text") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx97("div", { className: cx32(styles.emptyContainer), children: /* @__PURE__ */ jsx97(Typography_default, { variant: "body1", color: "textSecondary", className: cx32(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx101(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx34(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.buttons.load_more.text") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx101("div", { className: cx34(styles.emptyContainer), children: /* @__PURE__ */ jsx101(Typography_default, { variant: "body1", color: "textSecondary", className: cx34(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -13916,7 +14804,7 @@ var BaseOrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationList_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const organizationsWithSwitchAccess = useMemo36(() => {
+  const organizationsWithSwitchAccess = useMemo39(() => {
     if (!allOrganizations?.organizations) {
       return [];
     }
@@ -13932,53 +14820,53 @@ var BaseOrganizationList = ({
   const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, isLoading2) => defaultRenderLoadMore(onLoadMore, isLoading2, t, styles));
   const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));
   if (isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const loadingContent = /* @__PURE__ */ jsx97("div", { className: cx32(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ jsx101("div", { className: cx34(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: loadingContent })
+      return /* @__PURE__ */ jsx101(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs46(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx101(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx101("div", { className: cx34(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ jsx97("div", { className: cx32(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ jsx101("div", { className: cx34(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: errorContent })
+      return /* @__PURE__ */ jsx101(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs46(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx101(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx101("div", { className: cx34(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ jsx97("div", { className: cx32(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ jsx101("div", { className: cx34(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: emptyContent })
+      return /* @__PURE__ */ jsx101(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs46(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx101(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx101("div", { className: cx34(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ jsxs44("div", { className: cx32(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs44("div", { className: cx32(styles.header), children: [
-      /* @__PURE__ */ jsx97("div", { className: cx32(styles.headerInfo), children: /* @__PURE__ */ jsx97(Typography_default, { variant: "body2", color: "textSecondary", className: cx32(styles.subtitle), children: t("organization.switcher.showing.count", {
+  const organizationListContent = /* @__PURE__ */ jsxs46("div", { className: cx34(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs46("div", { className: cx34(styles.header), children: [
+      /* @__PURE__ */ jsx101("div", { className: cx34(styles.headerInfo), children: /* @__PURE__ */ jsx101(Typography_default, { variant: "body2", color: "textSecondary", className: cx34(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ jsx97(Button_default, { onClick: onRefresh, className: cx32(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.buttons.refresh.text") })
+      onRefresh && /* @__PURE__ */ jsx101(Button_default, { onClick: onRefresh, className: cx34(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.buttons.refresh.text") })
     ] }),
-    /* @__PURE__ */ jsx97("div", { className: cx32(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ jsx101("div", { className: cx34(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx97("div", { className: cx32(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ jsx97("div", { className: cx32(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx101("div", { className: cx34(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ jsx101("div", { className: cx34(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: organizationListContent })
+    return /* @__PURE__ */ jsx101(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs46(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx101(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx101("div", { className: cx34(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -13986,11 +14874,11 @@ var BaseOrganizationList = ({
 var BaseOrganizationList_default = BaseOrganizationList;
 
 // src/components/presentation/OrganizationList/OrganizationList.styles.ts
-import { css as css28 } from "@emotion/css";
-import { useMemo as useMemo37 } from "react";
-var useStyles28 = (theme, colorScheme) => {
-  return useMemo37(() => {
-    const cssOrganizationListWrapper = css28`
+import { css as css30 } from "@emotion/css";
+import { useMemo as useMemo40 } from "react";
+var useStyles30 = (theme, colorScheme) => {
+  return useMemo40(() => {
+    const cssOrganizationListWrapper = css30`
       /* Container wrapper styles for OrganizationList component */
       width: 100%;
 
@@ -14021,11 +14909,11 @@ var useStyles28 = (theme, colorScheme) => {
     `;
     return {
       root: cssOrganizationListWrapper,
-      container: css28`
+      container: css30`
         position: relative;
         width: 100%;
       `,
-      errorState: css28`
+      errorState: css30`
         padding: calc(${theme.vars.spacing.unit} * 2);
         background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);
         border: 1px solid ${theme.vars.colors.error.main};
@@ -14033,7 +14921,7 @@ var useStyles28 = (theme, colorScheme) => {
         color: ${theme.vars.colors.error.main};
         text-align: center;
       `,
-      loadingOverlay: css28`
+      loadingOverlay: css30`
         position: absolute;
         inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
@@ -14046,10 +14934,10 @@ var useStyles28 = (theme, colorScheme) => {
     };
   }, [theme, colorScheme]);
 };
-var OrganizationList_styles_default = useStyles28;
+var OrganizationList_styles_default = useStyles30;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -14063,15 +14951,15 @@ var OrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = OrganizationList_styles_default(theme, colorScheme);
   const { getAllOrganizations: getAllOrganizations2, error, isLoading, myOrganizations } = useOrganization_default();
-  const [allOrganizations, setAllOrganizations] = useState30({
+  const [allOrganizations, setAllOrganizations] = useState32({
     organizations: []
   });
-  useEffect17(() => {
+  useEffect19(() => {
     (async () => {
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ jsx98("div", { className: cx33(styles.root, className), style, children: /* @__PURE__ */ jsx98("div", { className: cx33(styles.container), children: /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx102("div", { className: cx35(styles.root, className), style, children: /* @__PURE__ */ jsx102("div", { className: cx35(styles.container), children: /* @__PURE__ */ jsx102(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -14086,8 +14974,8 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-import { jsx as jsx99, jsxs as jsxs45 } from "react/jsx-runtime";
-var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs45(
+import { jsx as jsx103, jsxs as jsxs47 } from "react/jsx-runtime";
+var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs47(
   "svg",
   {
     width,
@@ -14100,13 +14988,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx99("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ jsx99("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ jsx99("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ jsx99("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ jsx99("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ jsx99("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ jsx99("path", { d: "M10 18h4" })
+      /* @__PURE__ */ jsx103("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ jsx103("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ jsx103("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx103("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ jsx103("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ jsx103("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ jsx103("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -14114,7 +15002,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { Fragment as Fragment20, jsx as jsx100, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx104, jsxs as jsxs48 } from "react/jsx-runtime";
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -14130,15 +15018,15 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState31(false);
-  const [isProfileOpen, setIsProfileOpen] = useState31(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState31(false);
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState33(false);
+  const [isProfileOpen, setIsProfileOpen] = useState33(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState33(false);
   const { t } = useTranslation_default();
   if (!isSignedIn && fallback) {
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx100(Fragment20, {});
+    return /* @__PURE__ */ jsx104(Fragment20, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -14152,19 +15040,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ jsx100(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ jsx104(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ jsx100("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx100("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ jsx104("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx104("path", { d: "M12 5v14m-7-7h14" }) }),
     label: t("organization.switcher.create.organization"),
     onClick: () => setIsCreateOrgOpen(true)
   });
   const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
-  return /* @__PURE__ */ jsxs46(Fragment20, { children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs48(Fragment20, { children: [
+    /* @__PURE__ */ jsx104(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -14177,7 +15065,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx104(
       CreateOrganization,
       {
         mode: "popup",
@@ -14191,7 +15079,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ jsx100(
+    currentOrganization && /* @__PURE__ */ jsx104(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -14199,11 +15087,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ jsx100("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ jsx100("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ jsx104("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ jsx104("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx104(
       OrganizationList_default,
       {
         mode: "popup",
@@ -14236,13 +15124,16 @@ import {
   EmbeddedSignInFlowTypeV2 as EmbeddedSignInFlowTypeV22
 } from "@asgardeo/browser";
 export {
+  AcceptInvite_default as AcceptInvite,
   Alert_default as Alert,
   AlertDescription,
   AlertTitle,
   AsgardeoContext_default as AsgardeoContext,
   AsgardeoProvider_default as AsgardeoProvider,
   AsgardeoRuntimeError9 as AsgardeoRuntimeError,
+  BaseAcceptInvite_default as BaseAcceptInvite,
   BaseCreateOrganization,
+  BaseInviteUser_default as BaseInviteUser,
   BaseOrganization_default as BaseOrganization,
   BaseOrganizationList_default as BaseOrganizationList,
   BaseOrganizationProfile_default as BaseOrganizationProfile,
@@ -14293,6 +15184,7 @@ export {
   IdentifierFirst_default as IdentifierFirst,
   Info_default as Info,
   InputLabel_default as InputLabel,
+  InviteUser_default as InviteUser,
   KeyValueInput_default as KeyValueInput,
   LinkedInButton_default as LinkedInButton,
   Loading_default as Loading,