@asgardeo/react 0.2.3 → 0.3.0

package/dist/index.js

@@ -0,0 +1,1935 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/providers/AsgardeoProvider.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+
+// src/AsgardeoReactClient.ts
+import {
+  AsgardeoBrowserClient
+} from "@asgardeo/browser";
+
+// src/__temp__/api.ts
+import {
+  AsgardeoSPAClient,
+  Hooks
+} from "@asgardeo/browser";
+var _AuthAPI = class _AuthAPI {
+  constructor(spaClient) {
+    __publicField(this, "_authState", _AuthAPI.DEFAULT_STATE);
+    __publicField(this, "_client");
+    __publicField(this, "_isLoading");
+    this._client = spaClient ?? 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 === 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
+import { AsgardeoAPIError, AsgardeoSPAClient as AsgardeoSPAClient2 } from "@asgardeo/browser";
+var httpClient = AsgardeoSPAClient2.getInstance().httpRequest.bind(AsgardeoSPAClient2.getInstance());
+var getMeProfile = async ({ url, ...requestConfig }) => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new 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 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
+import { AsgardeoAPIError as AsgardeoAPIError3 } from "@asgardeo/browser";
+
+// src/api/scim2/getSchemas.ts
+import { AsgardeoAPIError as AsgardeoAPIError2, AsgardeoSPAClient as AsgardeoSPAClient3 } from "@asgardeo/browser";
+var httpClient2 = AsgardeoSPAClient3.getInstance().httpRequest.bind(AsgardeoSPAClient3.getInstance());
+var getSchemas = async ({ url }) => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new AsgardeoAPIError2(
+      "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 AsgardeoAPIError2(
+      `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 AsgardeoAPIError3(
+      "Failed to get user profile",
+      "getUserProfile-Error-001",
+      "javascript",
+      500,
+      "Internal Server Error"
+    );
+  }
+};
+var getUserProfile_default = getUserProfile;
+
+// src/AsgardeoReactClient.ts
+var AsgardeoReactClient = class extends 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
+import { createContext } from "react";
+var AsgardeoContext = 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
+import { hasAuthParamsInUrl } from "@asgardeo/browser";
+var useBrowserUrl = () => {
+  const hasAuthParams = (url, afterSignInUrl) => 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
+import { useEffect, useMemo, useState } from "react";
+import { createTheme } from "@asgardeo/browser";
+
+// src/theme/ThemeContext.ts
+import { createContext as createContext2 } from "react";
+var ThemeContext = createContext2(null);
+ThemeContext.displayName = "ThemeContext";
+var ThemeContext_default = ThemeContext;
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "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] = useState(defaultColorScheme);
+  const theme = useMemo(() => createTheme(themeConfig, colorScheme === "dark"), [themeConfig, colorScheme]);
+  const toggleTheme = () => {
+    setColorScheme((prev) => prev === "light" ? "dark" : "light");
+  };
+  useEffect(() => {
+    applyThemeToDOM(theme);
+  }, [theme]);
+  const value = {
+    theme,
+    colorScheme,
+    toggleTheme
+  };
+  return /* @__PURE__ */ jsx(ThemeContext_default.Provider, { value, children });
+};
+
+// src/providers/AsgardeoProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AsgardeoProvider = ({
+  afterSignInUrl = window.location.origin,
+  baseUrl,
+  clientId,
+  children,
+  scopes,
+  preferences
+}) => {
+  const reRenderCheckRef = useRef(false);
+  const asgardeo = useMemo2(() => new AsgardeoReactClient_default(), []);
+  const { hasAuthParams } = useBrowserUrl_default();
+  const [user, setUser] = useState2(null);
+  const [isSignedInSync, setIsSignedInSync] = useState2(false);
+  useEffect2(() => {
+    (async () => {
+      await asgardeo.initialize({
+        afterSignInUrl,
+        baseUrl,
+        clientId,
+        scopes
+      });
+    })();
+  }, []);
+  useEffect2(() => {
+    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")) {
+          }
+        }
+      }
+    })();
+  }, []);
+  useEffect2(() => {
+    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 = useMemo2(() => {
+    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__ */ jsx2(
+    AsgardeoContext_default.Provider,
+    {
+      value: {
+        isLoading: false,
+        isSignedIn: isSignedInSync,
+        signIn,
+        signOut,
+        signUp: () => {
+          throw new Error("Sign up functionality not implemented yet");
+        },
+        user,
+        baseUrl
+      },
+      children: /* @__PURE__ */ jsx2(ThemeProvider, { theme: preferences?.theme?.overrides, defaultColorScheme: isDarkMode ? "dark" : "light", children })
+    }
+  );
+};
+var AsgardeoProvider_default = AsgardeoProvider;
+
+// src/hooks/useAsgardeo.ts
+import { useContext } from "react";
+var useAsgardeo = () => {
+  const context = 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
+import {
+  forwardRef
+} from "react";
+import { withVendorCSSClassPrefix } from "@asgardeo/browser";
+import clsx from "clsx";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+var BaseSignInButton = forwardRef(
+  ({ children, className, style, signIn, isLoading, ...rest }, ref) => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsx3(Fragment, { children: children({ signIn, isLoading }) });
+    }
+    return /* @__PURE__ */ jsx3(
+      "button",
+      {
+        ref,
+        className: clsx(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
+import { forwardRef as forwardRef2, useState as useState3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SignInButton = forwardRef2(({ children = "Sign In", onClick, ...rest }, ref) => {
+  const { signIn } = useAsgardeo_default();
+  const [isLoading, setIsLoading] = useState3(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__ */ jsx4(BaseSignInButton_default, { ref, onClick: handleSignIn, isLoading, signIn: handleSignIn, ...rest, children });
+});
+SignInButton.displayName = "SignInButton";
+var SignInButton_default = SignInButton;
+
+// src/components/actions/SignOutButton/BaseSignOutButton.tsx
+import {
+  forwardRef as forwardRef3
+} from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix2 } from "@asgardeo/browser";
+import clsx2 from "clsx";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+var BaseSignOutButton = forwardRef3(
+  ({ children, className, style, signOut, isLoading, ...rest }, ref) => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsx5(Fragment2, { children: children({ signOut, isLoading }) });
+    }
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        ref,
+        className: clsx2(withVendorCSSClassPrefix2("sign-out-button"), className),
+        style,
+        disabled: isLoading,
+        type: "button",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BaseSignOutButton.displayName = "BaseSignOutButton";
+var BaseSignOutButton_default = BaseSignOutButton;
+
+// src/components/actions/SignOutButton/SignOutButton.tsx
+import { forwardRef as forwardRef4, useState as useState4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SignOutButton = forwardRef4(({ children = "Sign Out", onClick, ...rest }, ref) => {
+  const { signOut } = useAsgardeo_default();
+  const [isLoading, setIsLoading] = useState4(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__ */ jsx6(BaseSignOutButton_default, { ref, onClick: handleSignOut, isLoading, signOut: handleSignOut, ...rest, children });
+});
+SignOutButton.displayName = "SignOutButton";
+var SignOutButton_default = SignOutButton;
+
+// src/components/actions/SignUpButton/BaseSignUpButton.tsx
+import {
+  forwardRef as forwardRef5
+} from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix3 } from "@asgardeo/browser";
+import clsx3 from "clsx";
+import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
+var BaseSignUpButton = forwardRef5(
+  ({ children, className, style, signUp, isLoading, ...rest }, ref) => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsx7(Fragment3, { children: children({ signUp, isLoading }) });
+    }
+    return /* @__PURE__ */ jsx7(
+      "button",
+      {
+        ref,
+        className: clsx3(withVendorCSSClassPrefix3("sign-up-button"), className),
+        style,
+        disabled: isLoading,
+        type: "button",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BaseSignUpButton.displayName = "BaseSignUpButton";
+var BaseSignUpButton_default = BaseSignUpButton;
+
+// src/components/actions/SignUpButton/SignUpButton.tsx
+import { forwardRef as forwardRef6, useState as useState5 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SignUpButton = forwardRef6(({ children = "Sign Up", onClick, ...rest }, ref) => {
+  const { signUp } = useAsgardeo_default();
+  const [isLoading, setIsLoading] = useState5(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__ */ jsx8(BaseSignUpButton_default, { ref, onClick: handleSignUp, isLoading, signUp: handleSignUp, ...rest, children });
+});
+SignUpButton.displayName = "SignUpButton";
+var SignUpButton_default = SignUpButton;
+
+// src/components/control/SignedIn.tsx
+import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
+var SignedIn = ({
+  children,
+  fallback = null
+}) => {
+  const { isSignedIn } = useAsgardeo_default();
+  if (!isSignedIn) {
+    return /* @__PURE__ */ jsx9(Fragment4, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx9(Fragment4, { children });
+};
+SignedIn.displayName = "SignedIn";
+var SignedIn_default = SignedIn;
+
+// src/components/control/SignedOut.tsx
+import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
+var SignedOut = ({
+  children,
+  fallback = null
+}) => {
+  const { isSignedIn } = useAsgardeo_default();
+  if (!isSignedIn) {
+    return /* @__PURE__ */ jsx10(Fragment5, { children });
+  }
+  return /* @__PURE__ */ jsx10(Fragment5, { children: fallback });
+};
+SignedOut.displayName = "SignedOut";
+var SignedOut_default = SignedOut;
+
+// src/components/presentation/User.tsx
+import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
+var User4 = ({ children, fallback = null }) => {
+  const { user } = useAsgardeo_default();
+  if (!user) {
+    return /* @__PURE__ */ jsx11(Fragment6, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx11(Fragment6, { children: children(user) });
+};
+User4.displayName = "User";
+var User_default = User4;
+
+// src/components/presentation/UserProfile/BaseUserProfile.tsx
+import { useMemo as useMemo5, useState as useState7, useCallback } from "react";
+
+// src/components/primitives/Popover/Popover.tsx
+import React, { useEffect as useEffect3, useMemo as useMemo3, useState as useState6 } from "react";
+import { createPortal } from "react-dom";
+
+// src/theme/useTheme.ts
+import { useContext as useContext2 } from "react";
+var useTheme = () => {
+  const context = useContext2(ThemeContext_default);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+// src/components/primitives/Popover/Popover.tsx
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix4 } from "@asgardeo/browser";
+import clsx4 from "clsx";
+import { jsx as jsx12, jsxs } from "react/jsx-runtime";
+var useStyles = () => {
+  const { theme, colorScheme } = useTheme();
+  return useMemo3(
+    () => ({
+      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 = React.createContext({});
+var PopoverHeader = ({ children }) => {
+  const styles = useStyles();
+  const { onClose } = React.useContext(PopoverContext);
+  return /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+    children && /* @__PURE__ */ jsx12("h3", { style: styles.headerTitle, children }),
+    onClose && /* @__PURE__ */ jsx12("button", { style: styles.closeButton, onClick: onClose, "aria-label": "Close", children: "\xD7" })
+  ] });
+};
+var PopoverContent = ({ children }) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx12("div", { style: styles.contentBody, children });
+};
+var Popover = ({ isOpen, children, onClose, className = "", portalId = "wso2-popover-root", mode = "modal" }) => {
+  const [portalEl, setPortalEl] = useState6(null);
+  const styles = useStyles();
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    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 createPortal(
+    /* @__PURE__ */ jsx12(PopoverContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsxs("div", { className: clsx4(withVendorCSSClassPrefix4("popover"), className), children: [
+      mode === "modal" && /* @__PURE__ */ jsx12("div", { className: withVendorCSSClassPrefix4("popover-overlay"), style: styles["overlay"], onClick: onClose }),
+      /* @__PURE__ */ jsx12("div", { className: withVendorCSSClassPrefix4("popover-content"), style: styles["content"], children })
+    ] }) }),
+    portalEl
+  );
+};
+Popover.Header = PopoverHeader;
+Popover.Content = PopoverContent;
+
+// src/components/primitives/Avatar/Avatar.tsx
+import { useMemo as useMemo4 } from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix5 } from "@asgardeo/browser";
+import clsx5 from "clsx";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var useStyles2 = ({ size }) => {
+  const { theme, colorScheme } = useTheme();
+  return useMemo4(
+    () => ({
+      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__ */ jsx13("div", { style: styles.avatar, className: clsx5(withVendorCSSClassPrefix5("avatar"), className), children: imageUrl ? /* @__PURE__ */ jsx13("img", { src: imageUrl, alt, style: styles.image }) : name ? getInitials(name) : "?" });
+};
+
+// src/components/primitives/TextField/TextField.tsx
+import clsx6 from "clsx";
+import { jsx as jsx14, jsxs as jsxs2 } from "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__ */ jsxs2("div", { style: containerStyle, className: clsx6("asgardeo-text-field", className), children: [
+    label && /* @__PURE__ */ jsxs2("label", { style: labelStyle, children: [
+      label,
+      required && /* @__PURE__ */ jsx14("span", { style: { color: theme.colors.error.main }, children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx14("input", { style: inputStyle, disabled, "aria-invalid": !!error, "aria-required": required, ...rest }),
+    (error || helperText) && /* @__PURE__ */ jsx14("div", { style: helperTextStyle, children: error || helperText })
+  ] });
+};
+
+// src/components/primitives/DatePicker/DatePicker.tsx
+import clsx7 from "clsx";
+import { jsx as jsx15, jsxs as jsxs3 } from "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__ */ jsxs3("div", { style: containerStyle, className: clsx7("asgardeo-date-picker", className), children: [
+    label && /* @__PURE__ */ jsxs3("label", { style: labelStyle, children: [
+      label,
+      required && /* @__PURE__ */ jsx15("span", { style: { color: theme.colors.error.main }, children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx15(
+      "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__ */ jsx15("div", { style: helperTextStyle, children: error || helperText })
+  ] });
+};
+
+// src/components/primitives/Checkbox/Checkbox.tsx
+import clsx8 from "clsx";
+import { jsx as jsx16, jsxs as jsxs4 } from "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__ */ jsxs4("div", { className: clsx8("asgardeo-checkbox", className), children: [
+    /* @__PURE__ */ jsxs4("div", { style: containerStyle, children: [
+      /* @__PURE__ */ jsx16("input", { type: "checkbox", style: inputStyle, "aria-invalid": !!error, "aria-required": required, ...rest }),
+      label && /* @__PURE__ */ jsxs4("label", { style: labelStyle, children: [
+        label,
+        required && /* @__PURE__ */ jsx16("span", { style: { color: theme.colors.error.main }, children: " *" })
+      ] })
+    ] }),
+    (error || helperText) && /* @__PURE__ */ jsx16("div", { style: helperTextStyle, children: error || helperText })
+  ] });
+};
+
+// src/components/presentation/UserProfile/BaseUserProfile.tsx
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix6 } from "@asgardeo/browser";
+import clsx9 from "clsx";
+
+// 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
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+var BaseUserProfile = ({
+  fallback = /* @__PURE__ */ jsx17("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] = useState7(mode === "popup");
+  const [editedUser, setEditedUser] = useState7(user);
+  const [editingFields, setEditingFields] = useState7({});
+  const PencilIcon = () => /* @__PURE__ */ jsx17(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx17("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+    }
+  );
+  const toggleFieldEdit = 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 = 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 = useCallback(
+    (fieldName) => {
+      setEditedUser((prev) => ({
+        ...prev,
+        [fieldName]: user[fieldName]
+      }));
+      toggleFieldEdit(fieldName);
+    },
+    [user, toggleFieldEdit]
+  );
+  const formatLabel = useCallback((key) => {
+    return key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  }, []);
+  const styles = useStyles3();
+  const buttonStyle = useMemo5(
+    () => ({
+      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 = useMemo5(
+    () => ({
+      ...buttonStyle,
+      backgroundColor: theme.colors.primary.main,
+      color: theme.colors.primary.contrastText
+    }),
+    [theme, buttonStyle]
+  );
+  const cancelButtonStyle = useMemo5(
+    () => ({
+      ...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__ */ jsx17(Fragment7, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs5("div", { style: styles.field, children: [
+        /* @__PURE__ */ jsx17("span", { style: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ jsx17("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__ */ jsxs5(Fragment7, { children: [
+        /* @__PURE__ */ jsx17("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ jsx17("div", { style: styles.value, children: displayValue })
+      ] });
+    }
+    if (type === "COMPLEX" && typeof value === "object") {
+      return /* @__PURE__ */ jsx17(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__ */ jsx17(TextField, { ...commonProps });
+          break;
+        case "DATE_TIME":
+          field = /* @__PURE__ */ jsx17(DatePicker, { ...commonProps });
+          break;
+        case "BOOLEAN":
+          field = /* @__PURE__ */ jsx17(Checkbox, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          break;
+        case "COMPLEX":
+          field = /* @__PURE__ */ jsx17(TextField, { ...commonProps });
+          break;
+        default:
+          field = /* @__PURE__ */ jsx17(TextField, { ...commonProps });
+      }
+      return /* @__PURE__ */ jsxs5(Fragment7, { children: [
+        /* @__PURE__ */ jsx17("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ jsx17("div", { style: styles.value, children: field })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs5(Fragment7, { children: [
+      /* @__PURE__ */ jsx17("span", { style: styles.label, children: label }),
+      /* @__PURE__ */ jsx17("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__ */ jsxs5("div", { style: fieldStyle, children: [
+      /* @__PURE__ */ jsx17("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__ */ jsx17(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: theme.spacing.unit / 2 + "px",
+            alignItems: "center",
+            marginLeft: theme.spacing.unit + "px"
+          },
+          children: isFieldEditing ? /* @__PURE__ */ jsxs5(Fragment7, { children: [
+            /* @__PURE__ */ jsx17("button", { style: { ...actionButtonStyle, ...saveButtonStyle }, onClick: () => handleFieldSave(schema), children: "Save" }),
+            /* @__PURE__ */ jsx17(
+              "button",
+              {
+                style: { ...actionButtonStyle, ...cancelButtonStyle },
+                onClick: () => handleFieldCancel(schema.name),
+                children: "Cancel"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx17(
+            "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__ */ jsx17(PencilIcon, {})
+            }
+          )
+        }
+      )
+    ] });
+  };
+  const ObjectDisplay = ({ data }) => {
+    if (!data || typeof data !== "object") return null;
+    return /* @__PURE__ */ jsx17("table", { style: { width: "100%", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsx17("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs5("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
+      /* @__PURE__ */ jsx17("td", { style: { padding: theme.spacing.unit + "px", verticalAlign: "top" }, children: /* @__PURE__ */ jsxs5("strong", { children: [
+        formatLabel(key),
+        ":"
+      ] }) }),
+      /* @__PURE__ */ jsx17("td", { style: { padding: theme.spacing.unit + "px", verticalAlign: "top" }, children: typeof value === "object" ? /* @__PURE__ */ jsx17(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__ */ jsxs5("div", { style: containerStyle, className: clsx9(withVendorCSSClassPrefix6("user-profile"), className), children: [
+    /* @__PURE__ */ jsx17("div", { style: styles.header, children: /* @__PURE__ */ jsx17(
+      Avatar,
+      {
+        imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+        name: getDisplayName(),
+        size: 80,
+        alt: `${getDisplayName()}'s avatar`
+      }
+    ) }),
+    /* @__PURE__ */ jsx17("div", { style: styles.infoContainer, children: Array.isArray(user) ? user.filter((schema) => !excludedProps.includes(schema.name) && schema.value).map((schema, index) => /* @__PURE__ */ jsx17("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__ */ jsxs5(Popover, { isOpen, onClose: () => setIsOpen(false), portalId, children: [
+      /* @__PURE__ */ jsx17(Popover.Header, { children: title }),
+      /* @__PURE__ */ jsx17(Popover.Content, { children: profileContent })
+    ] });
+  }
+  return profileContent;
+};
+var useStyles3 = () => {
+  const { theme, colorScheme } = useTheme();
+  return useMemo5(
+    () => ({
+      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
+import { AsgardeoAPIError as AsgardeoAPIError4, AsgardeoSPAClient as AsgardeoSPAClient4 } from "@asgardeo/browser";
+var httpClient3 = AsgardeoSPAClient4.getInstance().httpRequest.bind(AsgardeoSPAClient4.getInstance());
+var updateMeProfile = async ({
+  url,
+  payload,
+  ...requestConfig
+}) => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new AsgardeoAPIError4(
+      "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 AsgardeoAPIError4(
+      `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
+import { jsx as jsx18 } from "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__ */ jsx18(BaseUserProfile_default, { user, onUpdate: handleProfileUpdate, ...rest });
+};
+var UserProfile_default = UserProfile;
+
+// src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+import { useMemo as useMemo6, useState as useState8 } from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix7 } from "@asgardeo/browser";
+import clsx10 from "clsx";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var useStyles4 = () => {
+  const { theme } = useTheme();
+  return useMemo6(
+    () => ({
+      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__ */ jsx19("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] = useState8(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__ */ jsxs6("div", { className: clsx10(withVendorCSSClassPrefix7("user-dropdown"), className), children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        className: withVendorCSSClassPrefix7("user-dropdown-trigger"),
+        style: styles.trigger,
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ jsx19(
+            Avatar,
+            {
+              imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+              name: getDisplayName(),
+              size: avatarSize,
+              alt: `${getDisplayName()}'s avatar`
+            }
+          ),
+          showTriggerLable && /* @__PURE__ */ jsx19("span", { style: styles.userName, children: getDisplayName() })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx19(Popover, { isOpen, onClose: () => setIsOpen(false), portalId, mode: "dropdown", children: /* @__PURE__ */ jsx19(Popover.Content, { children: /* @__PURE__ */ jsxs6("div", { style: styles.dropdownContent, children: [
+      showDropdownHeader && /* @__PURE__ */ jsxs6("div", { className: withVendorCSSClassPrefix7("user-dropdown-header"), style: styles.dropdownHeader, children: [
+        /* @__PURE__ */ jsx19(
+          Avatar,
+          {
+            imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+            name: getDisplayName(),
+            size: avatarSize * 1.25,
+            alt: `${getDisplayName()}'s avatar`
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: withVendorCSSClassPrefix7("user-dropdown-header-info"), style: styles.headerInfo, children: [
+          /* @__PURE__ */ jsx19("span", { className: withVendorCSSClassPrefix7("user-dropdown-header-name"), style: styles.headerName, children: getDisplayName() }),
+          getMappedUserProfileValue_default("email", mergedMappings, user) !== getDisplayName() && getMappedUserProfileValue_default("email", mergedMappings, user) && /* @__PURE__ */ jsx19(
+            "span",
+            {
+              className: withVendorCSSClassPrefix7("user-dropdown-header-email"),
+              style: styles.headerEmail,
+              children: getMappedUserProfileValue_default("email", mergedMappings, user)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx19("div", { className: withVendorCSSClassPrefix7("user-dropdown-menu"), style: styles.dropdownMenu, children: menuItems.map((item, index) => /* @__PURE__ */ jsxs6("div", { children: [
+        item.href ? /* @__PURE__ */ jsxs6(
+          "a",
+          {
+            href: item.href,
+            style: styles.menuItem,
+            className: withVendorCSSClassPrefix7("user-dropdown-menu-item"),
+            children: [
+              item.icon,
+              item.label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            onClick: () => handleMenuItemClick(item),
+            style: styles.menuItem,
+            className: withVendorCSSClassPrefix7("user-dropdown-menu-item"),
+            children: [
+              item.icon,
+              item.label
+            ]
+          }
+        ),
+        index < menuItems.length - 1 && /* @__PURE__ */ jsx19("div", { style: styles.divider })
+      ] }, index)) })
+    ] }) }) })
+  ] });
+};
+var BaseUserDropdown_default = BaseUserDropdown;
+
+// src/components/presentation/UserDropdown/UserDropdown.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var UserDropdown = ({ ...rest }) => {
+  const { user } = useAsgardeo_default();
+  return /* @__PURE__ */ jsx20(BaseUserDropdown_default, { user, ...rest });
+};
+var UserDropdown_default = UserDropdown;
+
+// src/index.ts
+export * from "@asgardeo/browser";
+export {
+  AsgardeoContext_default as AsgardeoContext,
+  AsgardeoProvider_default as AsgardeoProvider,
+  BaseSignInButton_default as BaseSignInButton,
+  BaseSignOutButton_default as BaseSignOutButton,
+  BaseSignUpButton_default as BaseSignUpButton,
+  BaseUserDropdown_default as BaseUserDropdown,
+  BaseUserProfile_default as BaseUserProfile,
+  SignInButton_default as SignInButton,
+  SignOutButton_default as SignOutButton,
+  SignUpButton_default as SignUpButton,
+  SignedIn_default as SignedIn,
+  SignedOut_default as SignedOut,
+  User_default as User,
+  UserDropdown_default as UserDropdown,
+  UserProfile_default as UserProfile,
+  useAsgardeo_default as useAsgardeo,
+  useBrowserUrl_default as useBrowserUrl
+};
+//# sourceMappingURL=index.js.map