@asgardeo/react 0.2.4 → 0.3.0

package/dist/cjs/index.js

@@ -0,0 +1,1955 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AsgardeoContext: () => AsgardeoContext_default,
+  AsgardeoProvider: () => AsgardeoProvider_default,
+  BaseSignInButton: () => BaseSignInButton_default,
+  BaseSignOutButton: () => BaseSignOutButton_default,
+  BaseSignUpButton: () => BaseSignUpButton_default,
+  BaseUserDropdown: () => BaseUserDropdown_default,
+  BaseUserProfile: () => BaseUserProfile_default,
+  SignInButton: () => SignInButton_default,
+  SignOutButton: () => SignOutButton_default,
+  SignUpButton: () => SignUpButton_default,
+  SignedIn: () => SignedIn_default,
+  SignedOut: () => SignedOut_default,
+  User: () => User_default,
+  UserDropdown: () => UserDropdown_default,
+  UserProfile: () => UserProfile_default,
+  useAsgardeo: () => useAsgardeo_default,
+  useBrowserUrl: () => useBrowserUrl_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/providers/AsgardeoProvider.tsx
+var import_react4 = require("react");
+
+// src/AsgardeoReactClient.ts
+var import_browser5 = require("@asgardeo/browser");
+
+// src/__temp__/api.ts
+var import_browser = require("@asgardeo/browser");
+var _AuthAPI = class _AuthAPI {
+  constructor(spaClient) {
+    __publicField(this, "_authState", _AuthAPI.DEFAULT_STATE);
+    __publicField(this, "_client");
+    __publicField(this, "_isLoading");
+    this._client = spaClient ?? import_browser.AsgardeoSPAClient.getInstance();
+    this.getState = this.getState.bind(this);
+    this.init = this.init.bind(this);
+    this.signIn = this.signIn.bind(this);
+    this.signOut = this.signOut.bind(this);
+    this.updateState = this.updateState.bind(this);
+  }
+  _setIsLoading(isLoading) {
+    this._isLoading = isLoading;
+  }
+  _getIsLoading() {
+    return this._isLoading;
+  }
+  isSignedIn() {
+    return this.isAuthenticated();
+  }
+  isLoading() {
+    return this._getIsLoading();
+  }
+  /**
+   * Method to return Auth Client instance authentication state.
+   *
+   * @return {AuthStateInterface} Authentication State.
+   */
+  getState() {
+    return this._authState;
+  }
+  /**
+   * Method to initialize the AuthClient instance.
+   *
+   * @param {Config} config - `dispatch` function from React Auth Context.
+   */
+  async init(config) {
+    return await this._client.initialize(config);
+  }
+  /**
+   * Method to get the configuration data.
+   *
+   * @returns {Promise<AuthClientConfig<Config>>} - A promise that resolves with the configuration data.
+   */
+  async getConfigData() {
+    return await this._client.getConfigData();
+  }
+  /**
+   * Method to handle user Sign In requests.
+   *
+   * @param {any} dispatch - `dispatch` function from React Auth Context.
+   * @param {AuthStateInterface} state - Current authentication state in React Auth Context.
+   * @param {any} callback - Action to trigger on successful sign in.
+   */
+  async signIn(config, authorizationCode, sessionState, authState, callback, tokenRequestConfig) {
+    return this._client.signIn(config, authorizationCode, sessionState, authState, tokenRequestConfig).then(async (response) => {
+      if (!response) {
+        return null;
+      }
+      if (await this._client.isAuthenticated()) {
+        const stateToUpdate = {
+          allowedScopes: response.allowedScopes,
+          displayName: response.displayName,
+          email: response.email,
+          isAuthenticated: true,
+          isLoading: false,
+          isSigningOut: false,
+          sub: response.sub,
+          username: response.username
+        };
+        this.updateState(stateToUpdate);
+        this._setIsLoading(false);
+        if (callback) {
+          callback(response);
+        }
+      }
+      return response;
+    }).catch((error) => {
+      return Promise.reject(error);
+    });
+  }
+  /**
+   * Method to handle user Sign Out requests.
+   *
+   * @param {any} dispatch - `dispatch` function from React Auth Context.
+   * @param {AuthStateInterface} state - Current authentication state in React Auth Context.
+   * @param {any} callback - Action to trigger on successful sign out.
+   */
+  signOut(callback) {
+    return this._client.signOut().then((response) => {
+      if (callback) {
+        callback(response);
+      }
+      return response;
+    }).catch((error) => {
+      return Promise.reject(error);
+    });
+  }
+  /**
+   * Method to update Auth Client instance authentication state.
+   *
+   * @param {AuthStateInterface} state - State values to update in authentication state.
+   */
+  updateState(state) {
+    this._authState = { ...this._authState, ...state };
+  }
+  /**
+   * This method returns a Promise that resolves with the basic user information obtained from the ID token.
+   *
+   * @return {Promise<BasicUserInfo>} - A promise that resolves with the user information.
+   */
+  async getBasicUserInfo() {
+    return this._client.getBasicUserInfo();
+  }
+  /**
+   * This method sends an API request to a protected endpoint.
+   * The access token is automatically attached to the header of the request.
+   * This is the only way by which protected endpoints can be accessed
+   * when the web worker is used to store session information.
+   *
+   * @param {HttpRequestConfig} config -  The config object containing attributes necessary to send a request.
+   *
+   * @return {Promise<FetchResponse>} - Returns a Promise that resolves with the response to the request.
+   */
+  async httpRequest(config) {
+    return this._client.httpRequest(config);
+  }
+  /**
+   * This method sends multiple API requests to a protected endpoint.
+   * The access token is automatically attached to the header of the request.
+   * This is the only way by which multiple requests can be sent to protected endpoints
+   * when the web worker is used to store session information.
+   *
+   * @param {HttpRequestConfig[]} config -  The config object containing attributes necessary to send a request.
+   *
+   * @return {Promise<FetchResponse[]>} - Returns a Promise that resolves with the responses to the requests.
+   */
+  async httpRequestAll(configs) {
+    return this._client.httpRequestAll(configs);
+  }
+  /**
+   * This method allows you to send a request with a custom grant.
+   *
+   * @param {CustomGrantRequestParams} config - The request parameters.
+   *
+   * @return {Promise<FetchResponse<any> | SignInResponse>} - A Promise that resolves with
+   * the value returned by the custom grant request.
+   */
+  requestCustomGrant(config, callback, dispatch) {
+    return this._client.requestCustomGrant(config).then((response) => {
+      if (!response) {
+        return null;
+      }
+      if (config.returnsSession) {
+        this.updateState({
+          ...this.getState(),
+          ...response,
+          isAuthenticated: true,
+          isLoading: false
+        });
+        dispatch({ ...response, isAuthenticated: true, isLoading: false });
+      }
+      callback && callback(response);
+      return response;
+    }).catch((error) => {
+      return Promise.reject(error);
+    });
+  }
+  /**
+   * This method ends a user session. The access token is revoked and the session information is destroyed.
+   *
+   * @return {Promise<boolean>} - A promise that resolves with `true` if the process is successful.
+   */
+  async revokeAccessToken(dispatch) {
+    return this._client.revokeAccessToken().then(() => {
+      this.updateState({ ..._AuthAPI.DEFAULT_STATE, isLoading: false });
+      dispatch(_AuthAPI.DEFAULT_STATE);
+      return true;
+    }).catch((error) => {
+      return Promise.reject(error);
+    });
+  }
+  /**
+   * This method returns a Promise that resolves with an object containing the service endpoints.
+   *
+   * @return {Promise<ServiceResourcesType} - A Promise that resolves with an object containing the service endpoints.
+   */
+  async getOIDCServiceEndpoints() {
+    return this._client.getOIDCServiceEndpoints();
+  }
+  /**
+   * This methods returns the Axios http client.
+   *
+   * @return {HttpClientInstance} - The Axios HTTP client.
+   */
+  async getHttpClient() {
+    return this._client.getHttpClient();
+  }
+  /**
+   * This method decodes the payload of the id token and returns it.
+   *
+   * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
+   * the decoded payload of the id token.
+   */
+  async getDecodedIDToken() {
+    return this._client.getDecodedIDToken();
+  }
+  /**
+   * This method decodes the payload of the idp id token and returns it.
+   *
+   * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
+   * the decoded payload of the idp id token.
+   */
+  async getDecodedIDPIDToken() {
+    return this._client.getDecodedIDToken();
+  }
+  /**
+   * This method returns the ID token.
+   *
+   * @return {Promise<string>} - A Promise that resolves with the id token.
+   */
+  async getIDToken() {
+    return this._client.getIDToken();
+  }
+  /**
+   * This method return a Promise that resolves with the access token.
+   *
+   * **This method will not return the access token if the storage type is set to `webWorker`.**
+   *
+   * @return {Promise<string>} - A Promise that resolves with the access token.
+   */
+  async getAccessToken() {
+    return this._client.getAccessToken();
+  }
+  /**
+   * This method return a Promise that resolves with the idp access token.
+   *
+   * **This method will not return the idp access token if the storage type is set to `webWorker`.**
+   * **This can be used to access the IDP access token when custom auth grant functionalities are used**
+   *
+   * @return {Promise<string>} - A Promise that resolves with the idp access token.
+   */
+  async getIDPAccessToken() {
+    return this._client.getIDPAccessToken();
+  }
+  /**
+   * This method refreshes the access token.
+   *
+   * @return {TokenResponseInterface} - A Promise that resolves with an object containing
+   * information about the refreshed access token.
+   */
+  async refreshAccessToken() {
+    return this._client.refreshAccessToken();
+  }
+  /**
+   * This method specifies if the user is authenticated or not.
+   *
+   * @return {Promise<boolean>} - A Promise that resolves with `true` if teh user is authenticated.
+   */
+  async isAuthenticated() {
+    return this._client.isAuthenticated();
+  }
+  /**
+   * This method specifies if the session is active or not.
+   *
+   * @return {Promise<boolean>} - A Promise that resolves with `true` if there is an active session.
+   */
+  async isSessionActive() {
+    return this._client.isSessionActive();
+  }
+  /**
+   * This method enables callback functions attached to the http client.
+   *
+   * @return {Promise<boolean>} - A promise that resolves with True.
+   *
+   */
+  async enableHttpHandler() {
+    return this._client.enableHttpHandler();
+  }
+  /**
+   * This method disables callback functions attached to the http client.
+   *
+   * @return {Promise<boolean>} - A promise that resolves with True.
+   */
+  async disableHttpHandler() {
+    return this._client.disableHttpHandler();
+  }
+  /**
+   * This method updates the configuration that was passed into the constructor when instantiating this class.
+   *
+   * @param {Partial<AuthClientConfig<T>>} config - A config object to update the SDK configurations with.
+   */
+  async updateConfig(config) {
+    return this._client.updateConfig(config);
+  }
+  on(hook, callback, id) {
+    if (hook === import_browser.Hooks.CustomGrant) {
+      return this._client.on(hook, callback, id);
+    }
+    return this._client.on(hook, callback);
+  }
+  /**
+   * This method allows you to sign in silently.
+   * First, this method sends a prompt none request to see if there is an active user session in the identity server.
+   * If there is one, then it requests the access token and stores it. Else, it returns false.
+   *
+   * @return {Promise<BasicUserInfo | boolean>} - A Promise that resolves with the user information after signing in
+   * or with `false` if the user is not signed in.
+   *
+   * @example
+   *```
+   * client.trySignInSilently()
+   *```
+   */
+  async trySignInSilently(state, dispatch, additionalParams, tokenRequestConfig) {
+    return this._client.trySignInSilently(additionalParams, tokenRequestConfig).then(async (response) => {
+      if (!response) {
+        this.updateState({ ...this.getState(), isLoading: false });
+        dispatch({ ...state, isLoading: false });
+        return false;
+      }
+      if (await this._client.isAuthenticated()) {
+        const basicUserInfo = response;
+        const stateToUpdate = {
+          allowedScopes: basicUserInfo.allowedScopes,
+          displayName: basicUserInfo.displayName,
+          email: basicUserInfo.email,
+          isAuthenticated: true,
+          isLoading: false,
+          isSigningOut: false,
+          sub: basicUserInfo.sub,
+          username: basicUserInfo.username
+        };
+        this.updateState(stateToUpdate);
+        dispatch({ ...state, ...stateToUpdate });
+      }
+      return response;
+    }).catch((error) => {
+      return Promise.reject(error);
+    });
+  }
+};
+__publicField(_AuthAPI, "DEFAULT_STATE");
+var AuthAPI = _AuthAPI;
+AuthAPI.DEFAULT_STATE = {
+  allowedScopes: "",
+  displayName: "",
+  email: "",
+  isAuthenticated: false,
+  isLoading: true,
+  sub: "",
+  username: ""
+};
+var api_default = AuthAPI;
+
+// src/api/scim2/getMeProfile.ts
+var import_browser2 = require("@asgardeo/browser");
+var httpClient = import_browser2.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser2.AsgardeoSPAClient.getInstance());
+var getMeProfile = async ({ url, ...requestConfig }) => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new import_browser2.AsgardeoAPIError(
+      "Invalid endpoint URL provided",
+      "getMeProfile-ValidationError-001",
+      "javascript",
+      400,
+      "Invalid Request"
+    );
+  }
+  const response = await httpClient({
+    url,
+    method: "GET",
+    headers: {
+      "Content-Type": "application/scim+json",
+      Accept: "application/json"
+    }
+  });
+  if (!response.data) {
+    const errorText = await response.text();
+    throw new import_browser2.AsgardeoAPIError(
+      `Failed to fetch user profile: ${errorText}`,
+      "getMeProfile-ResponseError-001",
+      "javascript",
+      response.status,
+      response.statusText
+    );
+  }
+  return response.data;
+};
+var getMeProfile_default = getMeProfile;
+
+// src/utils/getUserProfile.ts
+var import_browser4 = require("@asgardeo/browser");
+
+// src/api/scim2/getSchemas.ts
+var import_browser3 = require("@asgardeo/browser");
+var httpClient2 = import_browser3.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser3.AsgardeoSPAClient.getInstance());
+var getSchemas = async ({ url }) => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new import_browser3.AsgardeoAPIError(
+      "Invalid endpoint URL provided",
+      "getSchemas-ValidationError-001",
+      "javascript",
+      400,
+      "Invalid Request"
+    );
+  }
+  const response = await httpClient2({
+    url,
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  });
+  if (!response.data) {
+    throw new import_browser3.AsgardeoAPIError(
+      `Failed to fetch SCIM2 schemas`,
+      "getSchemas-ResponseError-001",
+      "javascript",
+      response.status,
+      response.statusText
+    );
+  }
+  return response.data;
+};
+var getSchemas_default = getSchemas;
+
+// src/utils/getUserProfile.ts
+var getUserProfile = async ({ baseUrl }) => {
+  try {
+    const profile = await getMeProfile_default({ url: `${baseUrl}/scim2/Me` });
+    const schemas = await getSchemas_default({ url: `${baseUrl}/scim2/Schemas` });
+    const result = [];
+    for (const schema of schemas) {
+      const schemaId = schema.id;
+      const source = schemaId.startsWith("urn:ietf:params:scim:schemas:core:2.0") ? profile : profile[schemaId] ?? {};
+      for (const attr of schema.attributes || []) {
+        const { name, type, subAttributes, multiValued, caseExact, returned } = attr;
+        if (type === "COMPLEX" && subAttributes?.length && typeof source[name] === "object") {
+          const complexValue = source[name];
+          for (const subAttr of subAttributes) {
+            if (complexValue[subAttr.name] !== void 0) {
+              const { subAttributes: subAttributes2, ...attrWithoutSubAttrs } = attr;
+              const basePath = schemaId === "urn:ietf:params:scim:schemas:core:2.0:User" ? `${name}.${subAttr.name}` : `${schemaId}.${name}.${subAttr.name}`;
+              result.push({
+                schemaId,
+                ...subAttr,
+                value: complexValue[subAttr.name],
+                parent: {
+                  ...attrWithoutSubAttrs
+                },
+                path: basePath
+              });
+            }
+          }
+        } else {
+          const value = source[name];
+          if (value !== void 0) {
+            const basePath = schemaId === "urn:ietf:params:scim:schemas:core:2.0:User" ? name : `${schemaId}.${name}`;
+            result.push({
+              schemaId,
+              ...attr,
+              value,
+              path: basePath
+            });
+          }
+        }
+      }
+    }
+    return result;
+  } catch (error) {
+    throw new import_browser4.AsgardeoAPIError(
+      "Failed to get user profile",
+      "getUserProfile-Error-001",
+      "javascript",
+      500,
+      "Internal Server Error"
+    );
+  }
+};
+var getUserProfile_default = getUserProfile;
+
+// src/AsgardeoReactClient.ts
+var AsgardeoReactClient = class extends import_browser5.AsgardeoBrowserClient {
+  constructor() {
+    super();
+    __publicField(this, "asgardeo");
+    this.asgardeo = new api_default();
+  }
+  initialize(config) {
+    const scopes = Array.isArray(config.scopes) ? config.scopes : config.scopes.split(" ");
+    return this.asgardeo.init({
+      baseUrl: config.baseUrl,
+      clientID: config.clientId,
+      signInRedirectURL: config.afterSignInUrl,
+      scope: [...scopes, "internal_login"]
+    });
+  }
+  async getUser() {
+    const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
+    const profile = await getUserProfile_default({ baseUrl });
+    return profile;
+  }
+  isLoading() {
+    return this.asgardeo.isLoading();
+  }
+  isSignedIn() {
+    return this.asgardeo.isSignedIn();
+  }
+  signIn(options) {
+    return this.asgardeo.signIn(options);
+  }
+  async signOut(...args) {
+    if (args[1] && typeof args[1] !== "function") {
+      throw new Error("The second argument must be a function.");
+    }
+    const response = await this.asgardeo.signOut(args[1]);
+    return Promise.resolve(String(response));
+  }
+};
+var AsgardeoReactClient_default = AsgardeoReactClient;
+
+// src/contexts/AsgardeoContext.ts
+var import_react = require("react");
+var AsgardeoContext = (0, import_react.createContext)({
+  isLoading: true,
+  isSignedIn: false,
+  signIn: null,
+  signOut: null,
+  signUp: null,
+  user: null,
+  baseUrl: ""
+});
+AsgardeoContext.displayName = "AsgardeoContext";
+var AsgardeoContext_default = AsgardeoContext;
+
+// src/hooks/useBrowserUrl.ts
+var import_browser6 = require("@asgardeo/browser");
+var useBrowserUrl = () => {
+  const hasAuthParams = (url, afterSignInUrl) => (0, import_browser6.hasAuthParamsInUrl)() && new URL(url.origin + url.pathname).toString() === new URL(afterSignInUrl).toString() || // authParams?.authorizationCode || // FIXME: These are sent externally. Need to see what we can do about this.
+  url.searchParams.get("error") !== null;
+  return { hasAuthParams };
+};
+var useBrowserUrl_default = useBrowserUrl;
+
+// src/theme/ThemeProvider.tsx
+var import_react3 = require("react");
+var import_browser7 = require("@asgardeo/browser");
+
+// src/theme/ThemeContext.ts
+var import_react2 = require("react");
+var ThemeContext = (0, import_react2.createContext)(null);
+ThemeContext.displayName = "ThemeContext";
+var ThemeContext_default = ThemeContext;
+
+// src/theme/ThemeProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var applyThemeToDOM = (theme) => {
+  Object.entries(theme.cssVariables).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(key, value);
+  });
+};
+var ThemeProvider = ({
+  children,
+  theme: themeConfig,
+  defaultColorScheme = "light"
+}) => {
+  const [colorScheme, setColorScheme] = (0, import_react3.useState)(defaultColorScheme);
+  const theme = (0, import_react3.useMemo)(() => (0, import_browser7.createTheme)(themeConfig, colorScheme === "dark"), [themeConfig, colorScheme]);
+  const toggleTheme = () => {
+    setColorScheme((prev) => prev === "light" ? "dark" : "light");
+  };
+  (0, import_react3.useEffect)(() => {
+    applyThemeToDOM(theme);
+  }, [theme]);
+  const value = {
+    theme,
+    colorScheme,
+    toggleTheme
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext_default.Provider, { value, children });
+};
+
+// src/providers/AsgardeoProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AsgardeoProvider = ({
+  afterSignInUrl = window.location.origin,
+  baseUrl,
+  clientId,
+  children,
+  scopes,
+  preferences
+}) => {
+  const reRenderCheckRef = (0, import_react4.useRef)(false);
+  const asgardeo = (0, import_react4.useMemo)(() => new AsgardeoReactClient_default(), []);
+  const { hasAuthParams } = useBrowserUrl_default();
+  const [user, setUser] = (0, import_react4.useState)(null);
+  const [isSignedInSync, setIsSignedInSync] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    (async () => {
+      await asgardeo.initialize({
+        afterSignInUrl,
+        baseUrl,
+        clientId,
+        scopes
+      });
+    })();
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (reRenderCheckRef.current) {
+      return;
+    }
+    reRenderCheckRef.current = true;
+    (async () => {
+      if (await asgardeo.isSignedIn()) {
+        setUser(await asgardeo.getUser());
+        return;
+      }
+      if (hasAuthParams(new URL(window.location.href), afterSignInUrl)) {
+        try {
+          await signIn(
+            { callOnlyOnRedirect: true }
+            // authParams?.authorizationCode,
+            // authParams?.sessionState,
+            // authParams?.state,
+          );
+        } catch (error) {
+          debugger;
+          if (error && Object.prototype.hasOwnProperty.call(error, "code")) {
+          }
+        }
+      }
+    })();
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    let interval;
+    (async () => {
+      try {
+        const status = await asgardeo.isSignedIn();
+        setIsSignedInSync(status);
+        if (!status) {
+          interval = setInterval(async () => {
+            const newStatus = await asgardeo.isSignedIn();
+            if (newStatus) {
+              setIsSignedInSync(true);
+              clearInterval(interval);
+            }
+          }, 1e3);
+        }
+      } catch (error) {
+        setIsSignedInSync(false);
+      }
+    })();
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [asgardeo]);
+  const signIn = async (options) => {
+    try {
+      const response = await asgardeo.signIn(options);
+      setUser(await asgardeo.getUser());
+      return response;
+    } catch (error) {
+      throw new Error(`Error while signing in: ${error}`);
+    }
+  };
+  const signUp = () => {
+    throw new Error("Not implemented");
+  };
+  const signOut = async (options, afterSignOut) => asgardeo.signOut(options, afterSignOut);
+  const isDarkMode = (0, import_react4.useMemo)(() => {
+    if (!preferences?.theme?.mode || preferences.theme.mode === "system") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return preferences.theme.mode === "dark";
+  }, [preferences?.theme?.mode]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    AsgardeoContext_default.Provider,
+    {
+      value: {
+        isLoading: false,
+        isSignedIn: isSignedInSync,
+        signIn,
+        signOut,
+        signUp: () => {
+          throw new Error("Sign up functionality not implemented yet");
+        },
+        user,
+        baseUrl
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeProvider, { theme: preferences?.theme?.overrides, defaultColorScheme: isDarkMode ? "dark" : "light", children })
+    }
+  );
+};
+var AsgardeoProvider_default = AsgardeoProvider;
+
+// src/hooks/useAsgardeo.ts
+var import_react5 = require("react");
+var useAsgardeo = () => {
+  const context = (0, import_react5.useContext)(AsgardeoContext_default);
+  if (!context) {
+    throw new Error("useAsgardeo must be used within an AsgardeoProvider");
+  }
+  return context;
+};
+var useAsgardeo_default = useAsgardeo;
+
+// src/components/actions/SignInButton/BaseSignInButton.tsx
+var import_react6 = require("react");
+var import_browser8 = require("@asgardeo/browser");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BaseSignInButton = (0, import_react6.forwardRef)(
+  ({ children, className, style, signIn, isLoading, ...rest }, ref) => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ signIn, isLoading }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        ref,
+        className: (0, import_clsx.default)((0, import_browser8.withVendorCSSClassPrefix)("sign-in-button"), className),
+        style,
+        disabled: isLoading,
+        type: "button",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BaseSignInButton.displayName = "BaseSignInButton";
+var BaseSignInButton_default = BaseSignInButton;
+
+// src/components/actions/SignInButton/SignInButton.tsx
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SignInButton = (0, import_react7.forwardRef)(({ children = "Sign In", onClick, ...rest }, ref) => {
+  const { signIn } = useAsgardeo_default();
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const handleSignIn = async (e) => {
+    try {
+      setIsLoading(true);
+      await signIn();
+      if (onClick) {
+        onClick(e);
+      }
+    } catch (error) {
+      throw new Error(`Sign in failed: ${error instanceof Error ? error.message : String(error)}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BaseSignInButton_default, { ref, onClick: handleSignIn, isLoading, signIn: handleSignIn, ...rest, children });
+});
+SignInButton.displayName = "SignInButton";
+var SignInButton_default = SignInButton;
+
+// src/components/actions/SignOutButton/BaseSignOutButton.tsx
+var import_react8 = require("react");
+var import_browser9 = require("@asgardeo/browser");
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var BaseSignOutButton = (0, import_react8.forwardRef)(
+  ({ children, className, style, signOut, isLoading, ...rest }, ref) => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ signOut, isLoading }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        ref,
+        className: (0, import_clsx2.default)((0, import_browser9.withVendorCSSClassPrefix)("sign-out-button"), className),
+        style,
+        disabled: isLoading,
+        type: "button",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BaseSignOutButton.displayName = "BaseSignOutButton";
+var BaseSignOutButton_default = BaseSignOutButton;
+
+// src/components/actions/SignOutButton/SignOutButton.tsx
+var import_react9 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SignOutButton = (0, import_react9.forwardRef)(({ children = "Sign Out", onClick, ...rest }, ref) => {
+  const { signOut } = useAsgardeo_default();
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const handleSignOut = async (e) => {
+    try {
+      setIsLoading(true);
+      await signOut();
+      if (onClick) {
+        onClick(e);
+      }
+    } catch (error) {
+      throw new Error(`Sign out failed: ${error instanceof Error ? error.message : String(error)}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BaseSignOutButton_default, { ref, onClick: handleSignOut, isLoading, signOut: handleSignOut, ...rest, children });
+});
+SignOutButton.displayName = "SignOutButton";
+var SignOutButton_default = SignOutButton;
+
+// src/components/actions/SignUpButton/BaseSignUpButton.tsx
+var import_react10 = require("react");
+var import_browser10 = require("@asgardeo/browser");
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BaseSignUpButton = (0, import_react10.forwardRef)(
+  ({ children, className, style, signUp, isLoading, ...rest }, ref) => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({ signUp, isLoading }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        ref,
+        className: (0, import_clsx3.default)((0, import_browser10.withVendorCSSClassPrefix)("sign-up-button"), className),
+        style,
+        disabled: isLoading,
+        type: "button",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BaseSignUpButton.displayName = "BaseSignUpButton";
+var BaseSignUpButton_default = BaseSignUpButton;
+
+// src/components/actions/SignUpButton/SignUpButton.tsx
+var import_react11 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SignUpButton = (0, import_react11.forwardRef)(({ children = "Sign Up", onClick, ...rest }, ref) => {
+  const { signUp } = useAsgardeo_default();
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(false);
+  const handleSignUp = async (e) => {
+    try {
+      setIsLoading(true);
+      await signUp();
+      if (onClick) {
+        onClick(e);
+      }
+    } catch (error) {
+      throw new Error(`Sign up failed: ${error instanceof Error ? error.message : String(error)}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BaseSignUpButton_default, { ref, onClick: handleSignUp, isLoading, signUp: handleSignUp, ...rest, children });
+});
+SignUpButton.displayName = "SignUpButton";
+var SignUpButton_default = SignUpButton;
+
+// src/components/control/SignedIn.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SignedIn = ({
+  children,
+  fallback = null
+}) => {
+  const { isSignedIn } = useAsgardeo_default();
+  if (!isSignedIn) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+};
+SignedIn.displayName = "SignedIn";
+var SignedIn_default = SignedIn;
+
+// src/components/control/SignedOut.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SignedOut = ({
+  children,
+  fallback = null
+}) => {
+  const { isSignedIn } = useAsgardeo_default();
+  if (!isSignedIn) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: fallback });
+};
+SignedOut.displayName = "SignedOut";
+var SignedOut_default = SignedOut;
+
+// src/components/presentation/User.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var User4 = ({ children, fallback = null }) => {
+  const { user } = useAsgardeo_default();
+  if (!user) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: children(user) });
+};
+User4.displayName = "User";
+var User_default = User4;
+
+// src/components/presentation/UserProfile/BaseUserProfile.tsx
+var import_react15 = require("react");
+
+// src/components/primitives/Popover/Popover.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// src/theme/useTheme.ts
+var import_react12 = require("react");
+var useTheme = () => {
+  const context = (0, import_react12.useContext)(ThemeContext_default);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+// src/components/primitives/Popover/Popover.tsx
+var import_browser11 = require("@asgardeo/browser");
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var useStyles = () => {
+  const { theme, colorScheme } = useTheme();
+  return (0, import_react13.useMemo)(
+    () => ({
+      overlay: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 999
+      },
+      content: {
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 1e3,
+        maxHeight: "90vh",
+        overflowY: "auto",
+        background: theme.colors.surface,
+        borderRadius: theme.borderRadius.large,
+        boxShadow: `0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"}`
+      },
+      contentBody: {},
+      header: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 4.5}px`,
+        borderBottom: `1px solid ${theme.colors.border}`
+      },
+      headerTitle: {
+        margin: 0,
+        fontSize: "1.2rem",
+        fontWeight: 600,
+        color: theme.colors.text.primary
+      },
+      closeButton: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: theme.spacing.unit / 2 + "px",
+        color: theme.colors.text.secondary,
+        fontSize: "1.2rem",
+        "&:hover": {
+          color: theme.colors.text.primary
+        }
+      }
+    }),
+    [theme, colorScheme]
+  );
+};
+var PopoverContext = import_react13.default.createContext({});
+var PopoverHeader = ({ children }) => {
+  const styles = useStyles();
+  const { onClose } = import_react13.default.useContext(PopoverContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.header, children: [
+    children && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: styles.headerTitle, children }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: styles.closeButton, onClick: onClose, "aria-label": "Close", children: "\xD7" })
+  ] });
+};
+var PopoverContent = ({ children }) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.contentBody, children });
+};
+var Popover = ({ isOpen, children, onClose, className = "", portalId = "wso2-popover-root", mode = "modal" }) => {
+  const [portalEl, setPortalEl] = (0, import_react13.useState)(null);
+  const styles = useStyles();
+  (0, import_react13.useEffect)(() => {
+    const existing = document.getElementById(portalId);
+    if (existing) {
+      setPortalEl(existing);
+      return void 0;
+    }
+    const el = document.createElement("div");
+    el.id = portalId;
+    document.body.appendChild(el);
+    setPortalEl(el);
+    return () => {
+      if (document.getElementById(portalId)) {
+        document.getElementById(portalId)?.remove();
+      }
+    };
+  }, [portalId]);
+  (0, import_react13.useEffect)(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  if (!isOpen || !portalEl) {
+    return null;
+  }
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PopoverContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_clsx4.default)((0, import_browser11.withVendorCSSClassPrefix)("popover"), className), children: [
+      mode === "modal" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_browser11.withVendorCSSClassPrefix)("popover-overlay"), style: styles["overlay"], onClick: onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_browser11.withVendorCSSClassPrefix)("popover-content"), style: styles["content"], children })
+    ] }) }),
+    portalEl
+  );
+};
+Popover.Header = PopoverHeader;
+Popover.Content = PopoverContent;
+
+// src/components/primitives/Avatar/Avatar.tsx
+var import_react14 = require("react");
+var import_browser12 = require("@asgardeo/browser");
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var useStyles2 = ({ size }) => {
+  const { theme, colorScheme } = useTheme();
+  return (0, import_react14.useMemo)(
+    () => ({
+      avatar: {
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: "50%",
+        overflow: "hidden",
+        backgroundColor: theme.colors.surface,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: `${size * 0.4}px`,
+        fontWeight: 500,
+        color: theme.colors.text.primary,
+        border: `1px solid ${theme.colors.border}`,
+        boxShadow: colorScheme === "dark" ? "none" : "0 2px 4px rgba(0, 0, 0, 0.1)"
+      },
+      image: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
+    }),
+    [size, theme, colorScheme]
+  );
+};
+var Avatar = ({ imageUrl, alt = "User avatar", size = 64, name, className = "" }) => {
+  const styles = useStyles2({ size });
+  const getInitials = (name2) => {
+    return name2.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.avatar, className: (0, import_clsx5.default)((0, import_browser12.withVendorCSSClassPrefix)("avatar"), className), children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: imageUrl, alt, style: styles.image }) : name ? getInitials(name) : "?" });
+};
+
+// src/components/primitives/TextField/TextField.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextField = ({ label, error, required, className, disabled, helperText, style = {}, ...rest }) => {
+  const { theme } = useTheme();
+  const containerStyle = {
+    marginBottom: theme.spacing.unit * 2 + "px",
+    ...style
+  };
+  const labelStyle = {
+    display: "block",
+    marginBottom: theme.spacing.unit + "px",
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    fontSize: "0.875rem",
+    fontWeight: 500
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+    border: `1px solid ${error ? theme.colors.error.main : theme.colors.border}`,
+    borderRadius: theme.borderRadius.small,
+    fontSize: "1rem",
+    color: theme.colors.text.primary,
+    backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,
+    outline: "none",
+    transition: "border-color 0.2s ease"
+  };
+  const helperTextStyle = {
+    fontSize: "0.75rem",
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    marginTop: theme.spacing.unit / 2 + "px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: containerStyle, className: (0, import_clsx6.default)("asgardeo-text-field", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { style: labelStyle, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: theme.colors.error.main }, children: " *" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { style: inputStyle, disabled, "aria-invalid": !!error, "aria-required": required, ...rest }),
+    (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: helperTextStyle, children: error || helperText })
+  ] });
+};
+
+// src/components/primitives/DatePicker/DatePicker.tsx
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DatePicker = ({
+  label,
+  error,
+  className,
+  required,
+  disabled,
+  helperText,
+  dateFormat = "yyyy-MM-dd",
+  style = {},
+  ...rest
+}) => {
+  const { theme } = useTheme();
+  const containerStyle = {
+    marginBottom: theme.spacing.unit * 2 + "px",
+    ...style
+  };
+  const labelStyle = {
+    display: "block",
+    marginBottom: theme.spacing.unit + "px",
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    fontSize: "0.875rem",
+    fontWeight: 500
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+    border: `1px solid ${error ? theme.colors.error.main : theme.colors.border}`,
+    borderRadius: theme.borderRadius.small,
+    fontSize: "1rem",
+    color: theme.colors.text.primary,
+    backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,
+    outline: "none",
+    transition: "border-color 0.2s ease"
+  };
+  const helperTextStyle = {
+    fontSize: "0.75rem",
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    marginTop: theme.spacing.unit / 2 + "px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: containerStyle, className: (0, import_clsx7.default)("asgardeo-date-picker", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: labelStyle, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { color: theme.colors.error.main }, children: " *" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "input",
+      {
+        type: "date",
+        pattern: "\\d{4}-\\d{2}-\\d{2}",
+        placeholder: dateFormat,
+        style: inputStyle,
+        disabled,
+        "aria-invalid": !!error,
+        "aria-required": required,
+        ...rest
+      }
+    ),
+    (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: helperTextStyle, children: error || helperText })
+  ] });
+};
+
+// src/components/primitives/Checkbox/Checkbox.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Checkbox = ({ label, error, className, required, helperText, style = {}, ...rest }) => {
+  const { theme } = useTheme();
+  const containerStyle = {
+    marginBottom: theme.spacing.unit * 2 + "px",
+    display: "flex",
+    alignItems: "center",
+    ...style
+  };
+  const inputStyle = {
+    width: theme.spacing.unit * 2.5 + "px",
+    height: theme.spacing.unit * 2.5 + "px",
+    marginRight: theme.spacing.unit + "px",
+    accentColor: theme.colors.primary.main
+  };
+  const labelStyle = {
+    color: error ? theme.colors.error.main : theme.colors.text.primary,
+    fontSize: "0.875rem"
+  };
+  const helperTextStyle = {
+    fontSize: "0.75rem",
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    marginTop: theme.spacing.unit / 2 + "px",
+    marginLeft: theme.spacing.unit * 3.5 + "px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_clsx8.default)("asgardeo-checkbox", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: containerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "checkbox", style: inputStyle, "aria-invalid": !!error, "aria-required": required, ...rest }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: labelStyle, children: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: theme.colors.error.main }, children: " *" })
+      ] })
+    ] }),
+    (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: helperTextStyle, children: error || helperText })
+  ] });
+};
+
+// src/components/presentation/UserProfile/BaseUserProfile.tsx
+var import_browser13 = require("@asgardeo/browser");
+var import_clsx9 = __toESM(require("clsx"), 1);
+
+// src/utils/getMappedUserProfileValue.ts
+var getMappedUserProfileValue = (key, mappings, user) => {
+  const mappedKey = mappings[key];
+  if (Array.isArray(user)) {
+    if (Array.isArray(mappedKey)) {
+      for (const field of mappedKey) {
+        const found2 = user.find((u) => u.name === field);
+        if (found2?.value !== void 0) {
+          return found2.value;
+        }
+      }
+    } else {
+      const found2 = user.find((u) => u.name === mappedKey);
+      if (found2?.value !== void 0) {
+        return found2.value;
+      }
+    }
+    const found = user.find((u) => u.name === key);
+    return found?.value;
+  }
+  return mappedKey ? user[mappedKey] : user[key];
+};
+var getMappedUserProfileValue_default = getMappedUserProfileValue;
+
+// src/components/presentation/UserProfile/BaseUserProfile.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BaseUserProfile = ({
+  fallback = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: "Please sign in to view your profile" }),
+  className = "",
+  cardLayout = true,
+  user,
+  mode = "inline",
+  portalId = "asgardeo-user-profile",
+  title = "User Profile",
+  attributeMapping = {},
+  editable = true,
+  onChange,
+  onSubmit,
+  onUpdate,
+  saveButtonText = "Save Changes",
+  cancelButtonText = "Cancel"
+}) => {
+  const { theme } = useTheme();
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(mode === "popup");
+  const [editedUser, setEditedUser] = (0, import_react15.useState)(user);
+  const [editingFields, setEditingFields] = (0, import_react15.useState)({});
+  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+    }
+  );
+  const toggleFieldEdit = (0, import_react15.useCallback)((fieldName) => {
+    setEditingFields((prev) => ({
+      ...prev,
+      [fieldName]: !prev[fieldName]
+    }));
+  }, []);
+  function set(obj, path, value) {
+    const keys = path.split(".");
+    let current = obj;
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (i === keys.length - 1) {
+        current[key] = value;
+      } else {
+        if (!current[key] || typeof current[key] !== "object") {
+          current[key] = {};
+        }
+        current = current[key];
+      }
+    }
+  }
+  const handleFieldSave = (0, import_react15.useCallback)(
+    (schema) => {
+      let payload = {};
+      const fieldName = schema.name;
+      const fieldValue = editedUser && fieldName && editedUser[fieldName] !== void 0 ? editedUser[fieldName] : schema.value;
+      set(payload, schema.path, fieldValue);
+      onUpdate(payload);
+      toggleFieldEdit(fieldName);
+    },
+    [editedUser, onUpdate, toggleFieldEdit]
+  );
+  const handleFieldCancel = (0, import_react15.useCallback)(
+    (fieldName) => {
+      setEditedUser((prev) => ({
+        ...prev,
+        [fieldName]: user[fieldName]
+      }));
+      toggleFieldEdit(fieldName);
+    },
+    [user, toggleFieldEdit]
+  );
+  const formatLabel = (0, import_react15.useCallback)((key) => {
+    return key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  }, []);
+  const styles = useStyles3();
+  const buttonStyle = (0, import_react15.useMemo)(
+    () => ({
+      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+      margin: `${theme.spacing.unit}px`,
+      borderRadius: theme.borderRadius.small,
+      border: "none",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      fontWeight: 500
+    }),
+    [theme]
+  );
+  const saveButtonStyle = (0, import_react15.useMemo)(
+    () => ({
+      ...buttonStyle,
+      backgroundColor: theme.colors.primary.main,
+      color: theme.colors.primary.contrastText
+    }),
+    [theme, buttonStyle]
+  );
+  const cancelButtonStyle = (0, import_react15.useMemo)(
+    () => ({
+      ...buttonStyle,
+      backgroundColor: theme.colors.secondary.main,
+      border: `1px solid ${theme.colors.border}`
+    }),
+    [theme, buttonStyle]
+  );
+  const defaultAttributeMappings = {
+    picture: ["profile", "profileUrl"],
+    firstName: "givenName",
+    lastName: "familyName"
+  };
+  const mergedMappings = { ...defaultAttributeMappings, ...attributeMapping };
+  const renderSchemaField = (schema, isEditing, onEditValue) => {
+    if (!schema) return null;
+    const { value, displayName, description, name, type, required, mutability, subAttributes } = schema;
+    const label = displayName || description || name || "";
+    if (subAttributes && Array.isArray(subAttributes)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.field, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: 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)) {
+      const displayValue = value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.value, children: displayValue })
+      ] });
+    }
+    if (type === "COMPLEX" && typeof value === "object") {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ObjectDisplay, { data: value });
+    }
+    if (isEditing && onEditValue && mutability !== "READ_ONLY") {
+      const fieldValue = editedUser && name && editedUser[name] !== void 0 ? editedUser[name] : value || "";
+      const commonProps = {
+        label: void 0,
+        // Don't show label in field, we render it outside
+        required,
+        value: fieldValue,
+        onChange: (e) => onEditValue(e.target ? e.target.value : e),
+        style: {
+          marginBottom: 0
+        }
+      };
+      let field;
+      switch (type) {
+        case "STRING":
+          field = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextField, { ...commonProps });
+          break;
+        case "DATE_TIME":
+          field = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DatePicker, { ...commonProps });
+          break;
+        case "BOOLEAN":
+          field = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Checkbox, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          break;
+        case "COMPLEX":
+          field = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextField, { ...commonProps });
+          break;
+        default:
+          field = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextField, { ...commonProps });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.value, children: field })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: styles.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.value, children: String(value) })
+    ] });
+  };
+  const renderUserInfo = (schema) => {
+    if (!schema || !schema.name) return null;
+    const isFieldEditing = editingFields[schema.name];
+    const fieldStyle = {
+      ...styles.field,
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing.unit + "px"
+    };
+    const actionButtonStyle = {
+      ...buttonStyle,
+      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
+      fontSize: "0.75rem",
+      marginLeft: "auto"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: fieldStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { flex: 1, display: "flex", alignItems: "center", gap: theme.spacing.unit + "px" }, children: renderSchemaField(schema, isFieldEditing, (value) => {
+        const tempEditedUser = { ...editedUser };
+        tempEditedUser[schema.name] = value;
+        setEditedUser(tempEditedUser);
+      }) }),
+      editable && schema.mutability !== "READ_ONLY" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: theme.spacing.unit / 2 + "px",
+            alignItems: "center",
+            marginLeft: theme.spacing.unit + "px"
+          },
+          children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { style: { ...actionButtonStyle, ...saveButtonStyle }, onClick: () => handleFieldSave(schema), children: "Save" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                style: { ...actionButtonStyle, ...cancelButtonStyle },
+                onClick: () => handleFieldCancel(schema.name),
+                children: "Cancel"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "button",
+            {
+              style: {
+                ...actionButtonStyle,
+                backgroundColor: "transparent",
+                border: "none",
+                margin: 0,
+                padding: theme.spacing.unit / 2 + "px",
+                color: theme.colors.text.secondary
+              },
+              onClick: () => toggleFieldEdit(schema.name),
+              title: "Edit",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PencilIcon, {})
+            }
+          )
+        }
+      )
+    ] });
+  };
+  const ObjectDisplay = ({ data }) => {
+    if (!data || typeof data !== "object") return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("table", { style: { width: "100%", borderCollapse: "collapse" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { style: { padding: theme.spacing.unit + "px", verticalAlign: "top" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("strong", { children: [
+        formatLabel(key),
+        ":"
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { style: { padding: theme.spacing.unit + "px", verticalAlign: "top" }, children: typeof value === "object" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ObjectDisplay, { data: value }) : String(value) })
+    ] }, key)) }) });
+  };
+  const getDisplayName = () => {
+    const firstName = getMappedUserProfileValue_default("firstName", mergedMappings, user);
+    const lastName = getMappedUserProfileValue_default("lastName", mergedMappings, user);
+    if (firstName && lastName) {
+      return `${firstName} ${lastName}`;
+    }
+    return getMappedUserProfileValue_default("username", mergedMappings, user) || "";
+  };
+  if (!user) {
+    return fallback;
+  }
+  const containerStyle = {
+    ...styles.root,
+    ...cardLayout ? styles.card : {}
+  };
+  const avatarAttributes = ["picture"];
+  const excludedProps = avatarAttributes.map((attr) => mergedMappings[attr] || attr);
+  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: containerStyle, className: (0, import_clsx9.default)((0, import_browser13.withVendorCSSClassPrefix)("user-profile"), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Avatar,
+      {
+        imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+        name: getDisplayName(),
+        size: 80,
+        alt: `${getDisplayName()}'s avatar`
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.infoContainer, children: Array.isArray(user) ? user.filter((schema) => !excludedProps.includes(schema.name) && schema.value).map((schema, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: renderUserInfo(schema) }, index)) : Object.entries(user).filter(([key]) => !excludedProps.includes(key) && user[key]).map(
+      ([key, value]) => renderUserInfo({
+        name: key,
+        value,
+        displayName: formatLabel(key)
+      })
+    ) })
+  ] });
+  if (mode === "popup") {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Popover, { isOpen, onClose: () => setIsOpen(false), portalId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Popover.Header, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Popover.Content, { children: profileContent })
+    ] });
+  }
+  return profileContent;
+};
+var useStyles3 = () => {
+  const { theme, colorScheme } = useTheme();
+  return (0, import_react15.useMemo)(
+    () => ({
+      root: {
+        padding: theme.spacing.unit * 4 + "px",
+        minWidth: "600px",
+        margin: "0 auto"
+      },
+      card: {
+        background: theme.colors.surface,
+        borderRadius: theme.borderRadius.large
+      },
+      header: {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.spacing.unit * 1.5 + "px",
+        marginBottom: theme.spacing.unit * 1.5 + "px"
+      },
+      profileInfo: {
+        flex: 1
+      },
+      name: {
+        fontSize: "1.5rem",
+        fontWeight: 600,
+        margin: "0",
+        color: theme.colors.text.primary
+      },
+      infoContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing.unit + "px"
+      },
+      field: {
+        display: "flex",
+        alignItems: "center",
+        padding: theme.spacing.unit + "px 0",
+        borderBottom: `1px solid ${theme.colors.border}`,
+        minHeight: "32px"
+      },
+      lastField: {
+        borderBottom: "none"
+      },
+      label: {
+        fontSize: "0.875rem",
+        fontWeight: 500,
+        color: theme.colors.text.secondary,
+        width: "120px",
+        flexShrink: 0,
+        lineHeight: "32px"
+      },
+      value: {
+        color: theme.colors.text.primary,
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: theme.spacing.unit + "px",
+        overflow: "hidden",
+        minHeight: "32px",
+        "& input, & .MuiInputBase-root": {
+          height: "32px",
+          margin: 0
+        },
+        lineHeight: "32px",
+        "& table": {
+          backgroundColor: theme.colors.background,
+          borderRadius: theme.borderRadius.small,
+          whiteSpace: "normal"
+        },
+        "& td": {
+          borderColor: theme.colors.border
+        }
+      },
+      popup: {
+        padding: theme.spacing.unit * 2 + "px"
+      }
+    }),
+    [theme, colorScheme]
+  );
+};
+var BaseUserProfile_default = BaseUserProfile;
+
+// src/api/scim2/updateMeProfile.ts
+var import_browser14 = require("@asgardeo/browser");
+var httpClient3 = import_browser14.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser14.AsgardeoSPAClient.getInstance());
+var updateMeProfile = async ({
+  url,
+  payload,
+  ...requestConfig
+}) => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new import_browser14.AsgardeoAPIError(
+      "Invalid endpoint URL provided",
+      "updateMeProfile-ValidationError-001",
+      "javascript",
+      400,
+      "Invalid Request"
+    );
+  }
+  const data = {
+    Operations: [
+      {
+        op: "replace",
+        value: payload
+      }
+    ],
+    schemas: ["urn:ietf:params:scim:api:messages:2.0:PatchOp"]
+  };
+  const response = await httpClient3({
+    url,
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/scim+json",
+      Accept: "application/json"
+    },
+    data,
+    ...requestConfig
+  });
+  if (!response.data) {
+    const errorText = await response.text();
+    throw new import_browser14.AsgardeoAPIError(
+      `Failed to update user profile: ${errorText}`,
+      "updateMeProfile-ResponseError-001",
+      "javascript",
+      response.status,
+      response.statusText
+    );
+  }
+  return response.data;
+};
+var updateMeProfile_default = updateMeProfile;
+
+// src/components/presentation/UserProfile/UserProfile.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var UserProfile = ({ ...rest }) => {
+  const { user, baseUrl } = useAsgardeo_default();
+  const handleProfileUpdate = async (payload) => {
+    await updateMeProfile_default({ url: `${baseUrl}/scim2/Me`, payload });
+    await getMeProfile_default({ url: `${baseUrl}/scim2/Me` });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BaseUserProfile_default, { user, onUpdate: handleProfileUpdate, ...rest });
+};
+var UserProfile_default = UserProfile;
+
+// src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+var import_react16 = require("react");
+var import_browser15 = require("@asgardeo/browser");
+var import_clsx10 = __toESM(require("clsx"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var useStyles4 = () => {
+  const { theme } = useTheme();
+  return (0, import_react16.useMemo)(
+    () => ({
+      trigger: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: theme.spacing.unit + "px",
+        padding: theme.spacing.unit * 0.5 + "px",
+        border: "none",
+        background: "none",
+        cursor: "pointer",
+        borderRadius: theme.borderRadius.small,
+        "&:hover": {
+          backgroundColor: theme.colors.background
+        }
+      },
+      userName: {
+        color: theme.colors.text.primary,
+        fontSize: "1rem",
+        fontWeight: 500
+      },
+      dropdownContent: {
+        minWidth: "200px",
+        maxWidth: "300px"
+      },
+      dropdownMenu: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%"
+      },
+      menuItem: {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.spacing.unit + "px",
+        padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
+        width: "100%",
+        color: theme.colors.text.primary,
+        textDecoration: "none",
+        border: "none",
+        background: "none",
+        cursor: "pointer",
+        fontSize: "0.875rem",
+        "&:hover": {
+          backgroundColor: theme.colors.background
+        }
+      },
+      divider: {
+        margin: `${theme.spacing.unit * 0.5}px 0`,
+        borderBottom: `1px solid ${theme.colors.border}`
+      },
+      dropdownHeader: {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.spacing.unit + "px",
+        padding: `${theme.spacing.unit * 1.5}px`,
+        borderBottom: `1px solid ${theme.colors.border}`
+      },
+      headerInfo: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing.unit / 2 + "px"
+      },
+      headerName: {
+        color: theme.colors.text.primary,
+        fontSize: "1rem",
+        fontWeight: 500,
+        margin: 0
+      },
+      headerEmail: {
+        color: theme.colors.text.secondary,
+        fontSize: "0.875rem",
+        margin: 0
+      }
+    }),
+    [theme]
+  );
+};
+var BaseUserDropdown = ({
+  fallback = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Please sign in" }),
+  className = "",
+  user,
+  portalId = "asgardeo-user-dropdown",
+  menuItems = [],
+  showTriggerLable = false,
+  showDropdownHeader = true,
+  avatarSize = 32,
+  attributeMapping = {}
+}) => {
+  const styles = useStyles4();
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const defaultAttributeMappings = {
+    picture: ["profile", "profileUrl"],
+    firstName: "givenName",
+    lastName: "familyName",
+    email: "emails"
+  };
+  const mergedMappings = { ...defaultAttributeMappings, ...attributeMapping };
+  const getDisplayName = () => {
+    const firstName = getMappedUserProfileValue_default("firstName", mergedMappings, user);
+    const lastName = getMappedUserProfileValue_default("lastName", mergedMappings, user);
+    if (firstName && lastName) {
+      return `${firstName} ${lastName}`;
+    }
+    return getMappedUserProfileValue_default("username", mergedMappings, user) || "";
+  };
+  if (!user) {
+    return fallback;
+  }
+  const handleMenuItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick();
+    }
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx10.default)((0, import_browser15.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-trigger"),
+        style: styles.trigger,
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            Avatar,
+            {
+              imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+              name: getDisplayName(),
+              size: avatarSize,
+              alt: `${getDisplayName()}'s avatar`
+            }
+          ),
+          showTriggerLable && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: styles.userName, children: getDisplayName() })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover, { isOpen, onClose: () => setIsOpen(false), portalId, mode: "dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: styles.dropdownContent, children: [
+      showDropdownHeader && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-header"), style: styles.dropdownHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Avatar,
+          {
+            imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+            name: getDisplayName(),
+            size: avatarSize * 1.25,
+            alt: `${getDisplayName()}'s avatar`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-header-info"), style: styles.headerInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-header-name"), style: styles.headerName, children: getDisplayName() }),
+          getMappedUserProfileValue_default("email", mergedMappings, user) !== getDisplayName() && getMappedUserProfileValue_default("email", mergedMappings, user) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "span",
+            {
+              className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-header-email"),
+              style: styles.headerEmail,
+              children: getMappedUserProfileValue_default("email", mergedMappings, user)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-menu"), style: styles.dropdownMenu, children: menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+        item.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "a",
+          {
+            href: item.href,
+            style: styles.menuItem,
+            className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-menu-item"),
+            children: [
+              item.icon,
+              item.label
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "button",
+          {
+            onClick: () => handleMenuItemClick(item),
+            style: styles.menuItem,
+            className: (0, import_browser15.withVendorCSSClassPrefix)("user-dropdown-menu-item"),
+            children: [
+              item.icon,
+              item.label
+            ]
+          }
+        ),
+        index < menuItems.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: styles.divider })
+      ] }, index)) })
+    ] }) }) })
+  ] });
+};
+var BaseUserDropdown_default = BaseUserDropdown;
+
+// src/components/presentation/UserDropdown/UserDropdown.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var UserDropdown = ({ ...rest }) => {
+  const { user } = useAsgardeo_default();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BaseUserDropdown_default, { user, ...rest });
+};
+var UserDropdown_default = UserDropdown;
+
+// src/index.ts
+__reExport(index_exports, require("@asgardeo/browser"), module.exports);
+//# sourceMappingURL=index.js.map