npm - @asgardeo/react - Versions diffs - 0.6.1 → 0.6.3 - Mend

@asgardeo/react 0.6.1 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/cjs/index.js CHANGED Viewed

@@ -3007,7 +3007,7 @@ Loading.displayName = "Loading";
 var Loading_default = Loading;
 // src/components/presentation/SignIn/BaseSignIn.tsx
-var import_browser48 = require("@asgardeo/browser");
+var import_browser49 = require("@asgardeo/browser");
 // src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
 var import_browser44 = require("@asgardeo/browser");
@@ -5622,7 +5622,8 @@ var useStyles13 = (theme, colorScheme, variant, clickable) => {
       }
     `;
     const headerStyles = import_css28.css`
-      padding: calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2) 0;
+      padding: 0 calc(${theme.vars.spacing.unit} * 2);
+      margin-top: calc(${theme.vars.spacing.unit} * 2);
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
@@ -5641,7 +5642,8 @@ var useStyles13 = (theme, colorScheme, variant, clickable) => {
       margin-top: ${theme.vars.spacing.unit};
     `;
     const contentStyles = import_css28.css`
-      padding: calc(${theme.vars.spacing.unit} * 2);
+      padding: 0 calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
       flex: 1;
     `;
     const footerStyles = import_css28.css`
@@ -6046,7 +6048,7 @@ var Logo = ({ className, src, alt, title, size = "medium" }) => {
 };
 var Logo_default = Logo;
-// src/components/presentation/SignIn/non-component-driven/BaseSignIn.styles.ts
+// src/components/presentation/SignIn/BaseSignIn.styles.ts
 var import_css34 = require("@emotion/css");
 var import_react55 = require("react");
 var useStyles16 = (theme, colorScheme) => {
@@ -6065,17 +6067,18 @@ var useStyles16 = (theme, colorScheme) => {
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const header = import_css34.css`
       gap: 0;
+      align-items: center;
     `;
     const title = import_css34.css`
       margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
       color: ${theme.vars.colors.text.primary};
     `;
     const subtitle = import_css34.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
     const messagesContainer = import_css34.css`
@@ -6144,7 +6147,7 @@ var useStyles16 = (theme, colorScheme) => {
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
     const flowMessagesContainer = import_css34.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const flowMessageItem = import_css34.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
@@ -6190,12 +6193,12 @@ var BaseSignIn_styles_default = useStyles16;
 // src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var isPasskeyAuthenticator = (authenticator) => authenticator.authenticatorId === import_browser44.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey && authenticator.metadata?.promptType === import_browser44.EmbeddedSignInFlowAuthenticatorPromptType.InternalPrompt && authenticator.metadata?.additionalData?.challengeData;
-var BaseSignIn = (props) => {
+var BaseSignIn = ({ showLogo = true, ...rest }) => {
   const { theme } = useTheme_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BaseSignInContent, { ...props }) })
+    showLogo && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BaseSignInContent, { showLogo, ...rest }) })
   ] });
 };
 var HIDDEN_AUTHENTICATORS = ["T3JnYW5pemF0aW9uQXV0aGVudGljYXRvcjpTU08"];
@@ -6213,7 +6216,9 @@ var BaseSignInContent = ({
   errorClassName = "",
   messageClassName = "",
   size = "medium",
-  variant = "outlined"
+  variant = "outlined",
+  showTitle = true,
+  showSubtitle = true
 }) => {
   const { theme } = useTheme_default();
   const { t } = useTranslation_default();
@@ -6754,9 +6759,11 @@ var BaseSignInContent = ({
     );
     const optionAuthenticators = availableAuthenticators.filter((auth) => !userPromptAuthenticators.includes(auth)).filter((authenticator) => !HIDDEN_AUTHENTICATORS.includes(authenticator.authenticatorId));
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Card_default, { className: (0, import_css35.cx)(containerClasses, styles.card), variant, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Card_default.Header, { className: styles.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-        flowSubtitle && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") }),
+      (showTitle || showSubtitle) && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Card_default.Header, { className: styles.header, children: [
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
+        showSubtitle && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Card_default.Content, { children: [
         flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: styles.flowMessagesContainer, children: flowMessages.map((flowMessage, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Alert_default,
           {
@@ -6769,9 +6776,7 @@ var BaseSignInContent = ({
         messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: styles.messagesContainer, children: messages.map((message, index) => {
           const variant2 = message.type.toLowerCase() === "error" ? "error" : message.type.toLowerCase() === "warning" ? "warning" : message.type.toLowerCase() === "success" ? "success" : "info";
           return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Alert_default, { variant: variant2, className: (0, import_css35.cx)(styles.messageItem, messageClasses), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Alert_default.Description, { children: message.message }) }, index);
-        }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Card_default.Content, { children: [
+        }) }),
         error && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Alert_default, { variant: "error", className: (0, import_css35.cx)(styles.errorContainer, errorClasses), children: [
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Alert_default.Title, { children: "Error" }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Alert_default.Description, { children: error })
@@ -6897,153 +6902,12 @@ var BaseSignInContent = ({
 var BaseSignIn_default = BaseSignIn;
 // src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
-var import_react59 = require("react");
-var import_css37 = require("@emotion/css");
-var import_browser47 = require("@asgardeo/browser");
-// src/components/presentation/SignIn/BaseSignIn.styles.ts
+var import_react58 = require("react");
 var import_css36 = require("@emotion/css");
-var import_react57 = require("react");
-var useStyles17 = (theme, colorScheme) => {
-  return (0, import_react57.useMemo)(() => {
-    const signIn = import_css36.css`
-      min-width: 420px;
-      margin: 0 auto;
-    `;
-    const card = import_css36.css`
-      background: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.large};
-      gap: calc(${theme.vars.spacing.unit} * 2);
-      min-width: 420px;
-    `;
-    const logoContainer = import_css36.css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
-    `;
-    const header = import_css36.css`
-      gap: 0;
-    `;
-    const title = import_css36.css`
-      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
-      color: ${theme.vars.colors.text.primary};
-    `;
-    const subtitle = import_css36.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-    const messagesContainer = import_css36.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const messageItem = import_css36.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    const errorContainer = import_css36.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const contentContainer = import_css36.css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const loadingContainer = import_css36.css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: calc(${theme.vars.spacing.unit} * 4);
-    `;
-    const loadingText = import_css36.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-    const divider = import_css36.css`
-      margin: calc(${theme.vars.spacing.unit} * 1) 0;
-    `;
-    const centeredContainer = import_css36.css`
-      text-align: center;
-      padding: calc(${theme.vars.spacing.unit} * 4);
-    `;
-    const passkeyContainer = import_css36.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const passkeyText = import_css36.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-    const form = import_css36.css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const formDivider = import_css36.css`
-      margin: calc(${theme.vars.spacing.unit} * 1) 0;
-    `;
-    const authenticatorSection = import_css36.css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    const authenticatorItem = import_css36.css`
-      width: 100%;
-    `;
-    const noAuthenticatorCard = import_css36.css`
-      background: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.large};
-      padding: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const errorAlert = import_css36.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const messagesAlert = import_css36.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    const flowMessagesContainer = import_css36.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const flowMessageItem = import_css36.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    return {
-      signIn,
-      card,
-      logoContainer,
-      header,
-      title,
-      subtitle,
-      messagesContainer,
-      messageItem,
-      errorContainer,
-      contentContainer,
-      loadingContainer,
-      loadingText,
-      divider,
-      centeredContainer,
-      passkeyContainer,
-      passkeyText,
-      form,
-      formDivider,
-      authenticatorSection,
-      authenticatorItem,
-      noAuthenticatorCard,
-      errorAlert,
-      messagesAlert,
-      flowMessagesContainer,
-      flowMessageItem
-    };
-  }, [
-    theme.vars.colors.background.surface,
-    theme.vars.colors.text.primary,
-    theme.vars.colors.text.secondary,
-    theme.vars.borderRadius.large,
-    theme.vars.spacing.unit,
-    colorScheme
-  ]);
-};
-var BaseSignIn_styles_default2 = useStyles17;
+var import_browser48 = require("@asgardeo/browser");
 // src/components/presentation/SignIn/component-driven/SignInOptionFactory.tsx
-var import_react58 = __toESM(require("react"), 1);
+var import_react57 = __toESM(require("react"), 1);
 var import_browser45 = require("@asgardeo/browser");
 var import_browser46 = require("@asgardeo/browser");
@@ -7118,7 +6982,7 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
         onBlur: () => options.onInputBlur?.(identifier),
         className: options.inputClassName
       });
-      return import_react58.default.cloneElement(field, { key });
+      return import_react57.default.cloneElement(field, { key });
     }
     case import_browser46.EmbeddedFlowComponentType.Button: {
       const handleClick = () => {
@@ -7212,14 +7076,155 @@ var renderSignInComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
+// src/components/presentation/SignUp/transformer.ts
+var import_browser47 = require("@asgardeo/browser");
+var generateId = (prefix) => {
+  const suffix = Math.random().toString(36).substring(2, 6);
+  return `${prefix}_${suffix}`;
+};
+var getInputVariant = (type, name) => {
+  switch (type.toLowerCase()) {
+    case "email":
+      return "EMAIL";
+    case "password":
+      return "PASSWORD";
+    default:
+      return "TEXT";
+  }
+};
+var getInputLabel = (name, type, t) => {
+  const i18nKey = `elements.fields.${name}`;
+  const label = t(i18nKey);
+  if (label === i18nKey || !label) {
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+  return label;
+};
+var getInputPlaceholder = (name, type, t) => {
+  const label = getInputLabel(name, type, t);
+  const placeholder = t("elements.fields.placeholder", { field: label });
+  if (!placeholder || placeholder === "elements.fields.placeholder") {
+    return `Enter your ${label}`;
+  }
+  return placeholder;
+};
+var convertSimpleInputToComponent = (input, t) => {
+  let fieldType = input.type;
+  if (input.name.toLowerCase().includes("password") && input.type.toLowerCase() === "string") {
+    fieldType = "password";
+  }
+  const variant = getInputVariant(input.type, input.name);
+  const label = getInputLabel(input.name, input.type, t);
+  const placeholder = getInputPlaceholder(input.name, input.type, t);
+  return {
+    id: generateId("input"),
+    type: import_browser47.EmbeddedFlowComponentType.Input,
+    variant,
+    config: {
+      type: input.type,
+      label,
+      placeholder,
+      required: input.required,
+      identifier: input.name,
+      hint: ""
+    },
+    components: []
+  };
+};
+var convertActionToComponent = (action, t) => {
+  const normalizedId = action.id.replace(/_auth$/, "");
+  const i18nKey = `elements.buttons.${normalizedId}`;
+  let text = t(i18nKey);
+  if (!text || text === i18nKey) {
+    text = action.id.replace(/_/g, " ");
+    text = text.charAt(0).toUpperCase() + text.slice(1);
+  }
+  return {
+    id: generateId("action"),
+    type: import_browser47.EmbeddedFlowComponentType.Button,
+    variant: "SECONDARY",
+    config: {
+      type: "button",
+      text,
+      actionId: action.id,
+      actionType: action.type
+    },
+    components: []
+  };
+};
+var transformSimpleToComponentDriven = (response, t) => {
+  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent(input, t)) || [];
+  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent(action, t)) || [];
+  const submitButton = inputComponents.length > 0 ? {
+    id: generateId("button"),
+    type: import_browser47.EmbeddedFlowComponentType.Button,
+    variant: "PRIMARY",
+    config: {
+      type: "submit",
+      text: t("elements.buttons.signUp")
+    },
+    components: []
+  } : null;
+  const formComponents = [];
+  if (inputComponents.length > 0) {
+    formComponents.push(...inputComponents);
+    if (submitButton) formComponents.push(submitButton);
+  }
+  const result = [];
+  if (formComponents.length > 0) {
+    result.push({
+      id: generateId("form"),
+      type: import_browser47.EmbeddedFlowComponentType.Form,
+      config: {},
+      components: formComponents
+    });
+  }
+  if (actionComponents.length > 0) {
+    result.push(...actionComponents);
+  }
+  return result;
+};
+var extractErrorMessage = (error, t) => {
+  let errorMessage = t("errors.sign.up.flow.failure");
+  if (error && typeof error === "object") {
+    if (error.flowStatus === "ERROR" && error.failureReason) {
+      errorMessage = error.failureReason;
+    } else if (error.code && (error.message || error.description)) {
+      errorMessage = error.description || error.message;
+    } else if (error instanceof Error && error.name === "AsgardeoAPIError") {
+      try {
+        const errorResponse = JSON.parse(
+          error.message
+        );
+        if (errorResponse.failureReason) {
+          errorMessage = errorResponse.failureReason;
+        } else if (errorResponse.description) {
+          errorMessage = errorResponse.description;
+        } else if (errorResponse.message) {
+          errorMessage = errorResponse.message;
+        } else {
+          errorMessage = error.message;
+        }
+      } catch {
+        errorMessage = error.message;
+      }
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+  } else if (typeof error === "string") {
+    errorMessage = error;
+  }
+  return errorMessage;
+};
 // src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var BaseSignIn2 = (props) => {
+var BaseSignIn2 = ({ showLogo = true, ...rest }) => {
   const { theme } = useTheme_default();
-  const styles = BaseSignIn_styles_default2(theme, theme.vars.colors.text.primary);
+  const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BaseSignInContent2, { ...props }) })
+    showLogo && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BaseSignInContent2, { showLogo, ...rest }) })
   ] });
 };
 var BaseSignInContent2 = ({
@@ -7234,16 +7239,29 @@ var BaseSignInContent2 = ({
   size = "medium",
   variant = "outlined",
   isLoading: externalIsLoading,
-  children
+  children,
+  showTitle = true,
+  showSubtitle = true,
+  showLogo = true
 }) => {
   const { theme } = useTheme_default();
   const { t } = useTranslation_default();
-  const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages } = useFlow_default();
-  const styles = BaseSignIn_styles_default2(theme, theme.vars.colors.text.primary);
-  const [isSubmitting, setIsSubmitting] = (0, import_react59.useState)(false);
-  const [error, setError] = (0, import_react59.useState)(null);
+  const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
+  const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
+  const [isSubmitting, setIsSubmitting] = (0, import_react58.useState)(false);
   const isLoading = externalIsLoading || isSubmitting;
-  const extractFormFields = (0, import_react59.useCallback)(
+  const handleError = (0, import_react58.useCallback)(
+    (error) => {
+      const errorMessage = extractErrorMessage(error, t);
+      clearMessages();
+      addMessage({
+        type: "error",
+        message: errorMessage
+      });
+    },
+    [t, addMessage, clearMessages]
+  );
+  const extractFormFields = (0, import_react58.useCallback)(
     (components2) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -7303,7 +7321,7 @@ var BaseSignInContent2 = ({
       return;
     }
     setIsSubmitting(true);
-    setError(null);
+    clearMessages();
     try {
       const filteredInputs = {};
       if (data) {
@@ -7327,40 +7345,39 @@ var BaseSignInContent2 = ({
       }
       await onSubmit?.(payload, component);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : t("errors.sign.in.flow.failure");
-      setError(errorMessage);
+      handleError(err);
       onError?.(err);
     } finally {
       setIsSubmitting(false);
     }
   };
-  const containerClasses = (0, import_css37.cx)(
+  const containerClasses = (0, import_css36.cx)(
     [
-      (0, import_browser47.withVendorCSSClassPrefix)("signin"),
-      (0, import_browser47.withVendorCSSClassPrefix)(`signin--${size}`),
-      (0, import_browser47.withVendorCSSClassPrefix)(`signin--${variant}`)
+      (0, import_browser48.withVendorCSSClassPrefix)("signin"),
+      (0, import_browser48.withVendorCSSClassPrefix)(`signin--${size}`),
+      (0, import_browser48.withVendorCSSClassPrefix)(`signin--${variant}`)
     ],
     className
   );
-  const inputClasses = (0, import_css37.cx)(
+  const inputClasses = (0, import_css36.cx)(
     [
-      (0, import_browser47.withVendorCSSClassPrefix)("signin__input"),
-      size === "small" && (0, import_browser47.withVendorCSSClassPrefix)("signin__input--small"),
-      size === "large" && (0, import_browser47.withVendorCSSClassPrefix)("signin__input--large")
+      (0, import_browser48.withVendorCSSClassPrefix)("signin__input"),
+      size === "small" && (0, import_browser48.withVendorCSSClassPrefix)("signin__input--small"),
+      size === "large" && (0, import_browser48.withVendorCSSClassPrefix)("signin__input--large")
     ],
     inputClassName
   );
-  const buttonClasses = (0, import_css37.cx)(
+  const buttonClasses = (0, import_css36.cx)(
     [
-      (0, import_browser47.withVendorCSSClassPrefix)("signin__button"),
-      size === "small" && (0, import_browser47.withVendorCSSClassPrefix)("signin__button--small"),
-      size === "large" && (0, import_browser47.withVendorCSSClassPrefix)("signin__button--large")
+      (0, import_browser48.withVendorCSSClassPrefix)("signin__button"),
+      size === "small" && (0, import_browser48.withVendorCSSClassPrefix)("signin__button--small"),
+      size === "large" && (0, import_browser48.withVendorCSSClassPrefix)("signin__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css37.cx)([(0, import_browser47.withVendorCSSClassPrefix)("signin__error")], errorClassName);
-  const messageClasses = (0, import_css37.cx)([(0, import_browser47.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
-  const renderComponents = (0, import_react59.useCallback)(
+  const errorClasses = (0, import_css36.cx)([(0, import_browser48.withVendorCSSClassPrefix)("signin__error")], errorClassName);
+  const messageClasses = (0, import_css36.cx)([(0, import_browser48.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
+  const renderComponents = (0, import_react58.useCallback)(
     (components2) => renderSignInComponents(
       components2,
       formValues,
@@ -7371,7 +7388,6 @@ var BaseSignInContent2 = ({
       handleInputChange,
       {
         buttonClassName: buttonClasses,
-        error,
         inputClassName: inputClasses,
         onInputBlur: handleInputBlur,
         onSubmit: handleSubmit,
@@ -7387,7 +7403,6 @@ var BaseSignInContent2 = ({
       isLoading,
       size,
       variant,
-      error,
       inputClasses,
       buttonClasses,
       handleInputBlur,
@@ -7401,7 +7416,6 @@ var BaseSignInContent2 = ({
       touched: touchedFields,
       isValid: isFormValid,
       isLoading,
-      error,
       components,
       handleInputChange,
       handleSubmit,
@@ -7413,30 +7427,26 @@ var BaseSignInContent2 = ({
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: containerClasses, children: children(renderProps) });
   }
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "2rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Spinner_default, {}) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default, { className: (0, import_css36.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "2rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Spinner_default, {}) }) }) });
   }
   if (!components || components.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography_default, { variant: "body1", children: t("errors.sign.in.components.not.available") }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default, { className: (0, import_css36.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography_default, { variant: "body1", children: t("errors.sign.in.components.not.available") }) }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Card_default.Header, { className: styles.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Card_default, { className: (0, import_css36.cx)(containerClasses, styles.card), variant, children: [
+    (showTitle || showSubtitle) && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Card_default.Header, { className: styles.header, children: [
+      showTitle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
+      showSubtitle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Card_default.Content, { children: [
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Alert_default,
         {
           variant: message.type === "error" ? "error" : "info",
-          className: (0, import_css37.cx)(styles.flowMessageItem, messageClasses),
+          className: (0, import_css36.cx)(styles.flowMessageItem, messageClasses),
           children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Alert_default.Description, { children: message.message })
         },
         index
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Card_default.Content, { children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Alert_default, { variant: "error", className: (0, import_css37.cx)(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Alert_default.Title, { children: t("errors.title") }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Alert_default.Description, { children: error })
-      ] }),
+      )) }),
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: styles.contentContainer, children: components && renderComponents(components) })
     ] })
   ] });
@@ -7447,7 +7457,7 @@ var BaseSignIn_default2 = BaseSignIn2;
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var BaseSignIn3 = (props) => {
   const { platform } = useAsgardeo_default();
-  if (platform === import_browser48.Platform.AsgardeoV2) {
+  if (platform === import_browser49.Platform.AsgardeoV2) {
     return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseSignIn_default2, { ...props });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseSignIn_default, { ...props });
@@ -7455,26 +7465,19 @@ var BaseSignIn3 = (props) => {
 var BaseSignIn_default3 = BaseSignIn3;
 // src/components/presentation/SignIn/SignIn.tsx
-var import_browser51 = require("@asgardeo/browser");
+var import_browser52 = require("@asgardeo/browser");
 // src/components/presentation/SignIn/component-driven/SignIn.tsx
-var import_react60 = require("react");
-var import_browser50 = require("@asgardeo/browser");
+var import_react59 = require("react");
+var import_browser51 = require("@asgardeo/browser");
 // src/components/presentation/SignIn/component-driven/transformer.ts
-var import_browser49 = require("@asgardeo/browser");
-var generateId = (prefix) => {
+var import_browser50 = require("@asgardeo/browser");
+var generateId2 = (prefix) => {
   const suffix = Math.random().toString(36).substring(2, 6);
   return `${prefix}_${suffix}`;
 };
-var getInputVariant = (type, name) => {
-  const lowerName = name.toLowerCase();
-  if (lowerName.includes("password")) {
-    return "PASSWORD";
-  }
-  if (lowerName.includes("email")) {
-    return "EMAIL";
-  }
+var getInputVariant2 = (type, name) => {
   switch (type.toLowerCase()) {
     case "email":
       return "EMAIL";
@@ -7484,7 +7487,7 @@ var getInputVariant = (type, name) => {
       return "TEXT";
   }
 };
-var getInputLabel = (name, type, t) => {
+var getInputLabel2 = (name, type, t) => {
   const i18nKey = `elements.fields.${name}`;
   const label = t(i18nKey);
   if (label === i18nKey || !label) {
@@ -7492,24 +7495,28 @@ var getInputLabel = (name, type, t) => {
   }
   return label;
 };
-var getInputPlaceholder = (name, type, t) => {
-  const label = getInputLabel(name, type, t);
+var getInputPlaceholder2 = (name, type, t) => {
+  const label = getInputLabel2(name, type, t);
   const placeholder = t("elements.fields.placeholder", { field: label });
   if (!placeholder || placeholder === "elements.fields.placeholder") {
     return `Enter your ${label}`;
   }
   return placeholder;
 };
-var convertSimpleInputToComponent = (input, t) => {
-  const variant = getInputVariant(input.type, input.name);
-  const label = getInputLabel(input.name, input.type, t);
-  const placeholder = getInputPlaceholder(input.name, input.type, t);
+var convertSimpleInputToComponent2 = (input, t) => {
+  let fieldType = input.type;
+  if (input.name.toLowerCase().includes("password") && input.type.toLowerCase() === "string") {
+    fieldType = "password";
+  }
+  const variant = getInputVariant2(fieldType, input.name);
+  const label = getInputLabel2(input.name, fieldType, t);
+  const placeholder = getInputPlaceholder2(input.name, fieldType, t);
   return {
-    id: generateId("input"),
-    type: import_browser49.EmbeddedFlowComponentType.Input,
+    id: generateId2("input"),
+    type: import_browser50.EmbeddedFlowComponentType.Input,
     variant,
     config: {
-      type: input.type,
+      type: fieldType,
       label,
       placeholder,
       required: input.required,
@@ -7519,16 +7526,17 @@ var convertSimpleInputToComponent = (input, t) => {
     components: []
   };
 };
-var convertActionToComponent = (action, t) => {
-  const i18nKey = `elements.buttons.${action.id}`;
+var convertActionToComponent2 = (action, t) => {
+  const normalizedId = action.id.replace(/_auth$/, "");
+  const i18nKey = `elements.buttons.${normalizedId}`;
   let text = t(i18nKey);
   if (!text || text === i18nKey) {
     text = action.id.replace(/_/g, " ");
     text = text.charAt(0).toUpperCase() + text.slice(1);
   }
   return {
-    id: generateId("action"),
-    type: import_browser49.EmbeddedFlowComponentType.Button,
+    id: generateId2("action"),
+    type: import_browser50.EmbeddedFlowComponentType.Button,
     variant: "SECONDARY",
     config: {
       type: "button",
@@ -7539,12 +7547,12 @@ var convertActionToComponent = (action, t) => {
     components: []
   };
 };
-var transformSimpleToComponentDriven = (response, t) => {
-  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent(input, t)) || [];
-  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent(action, t)) || [];
+var transformSimpleToComponentDriven2 = (response, t) => {
+  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent2(input, t)) || [];
+  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent2(action, t)) || [];
   const submitButton = inputComponents.length > 0 ? {
-    id: generateId("button"),
-    type: import_browser49.EmbeddedFlowComponentType.Button,
+    id: generateId2("button"),
+    type: import_browser50.EmbeddedFlowComponentType.Button,
     variant: "PRIMARY",
     config: {
       type: "submit",
@@ -7560,8 +7568,8 @@ var transformSimpleToComponentDriven = (response, t) => {
   const result = [];
   if (formComponents.length > 0) {
     result.push({
-      id: generateId("form"),
-      type: import_browser49.EmbeddedFlowComponentType.Form,
+      id: generateId2("form"),
+      type: import_browser50.EmbeddedFlowComponentType.Form,
       config: {},
       components: formComponents
     });
@@ -7574,7 +7582,7 @@ var transformSimpleToComponentDriven = (response, t) => {
 var normalizeFlowResponse = (response, t) => {
   return {
     flowId: response.flowId,
-    components: transformSimpleToComponentDriven(response, t)
+    components: transformSimpleToComponentDriven2(response, t)
   };
 };
@@ -7583,13 +7591,13 @@ var import_jsx_runtime58 = require("react/jsx-runtime");
 var SignIn = ({ className, size = "medium", onSuccess, onError, variant, children }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [components, setComponents] = (0, import_react60.useState)([]);
-  const [currentFlowId, setCurrentFlowId] = (0, import_react60.useState)(null);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react60.useState)(false);
-  const [flowError, setFlowError] = (0, import_react60.useState)(null);
-  const [isSubmitting, setIsSubmitting] = (0, import_react60.useState)(false);
-  const initializationAttemptedRef = (0, import_react60.useRef)(false);
-  (0, import_react60.useEffect)(() => {
+  const [components, setComponents] = (0, import_react59.useState)([]);
+  const [currentFlowId, setCurrentFlowId] = (0, import_react59.useState)(null);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react59.useState)(false);
+  const [flowError, setFlowError] = (0, import_react59.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react59.useState)(false);
+  const initializationAttemptedRef = (0, import_react59.useRef)(false);
+  (0, import_react59.useEffect)(() => {
     if (isInitialized && !isLoading && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       initializeFlow();
@@ -7601,7 +7609,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     const applicationIdFromUrl = urlParams.get("applicationId");
     const effectiveApplicationId = applicationId || applicationIdFromUrl;
     if (!flowIdFromUrl && !effectiveApplicationId) {
-      const error = new import_browser50.AsgardeoRuntimeError(
+      const error = new import_browser51.AsgardeoRuntimeError(
         "Either flowId or applicationId is required for authentication",
         "SignIn-initializeFlow-RuntimeError-001",
         "react",
@@ -7620,7 +7628,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       } else {
         response = await signIn({
           applicationId: effectiveApplicationId,
-          flowType: import_browser50.EmbeddedFlowType.Authentication
+          flowType: import_browser51.EmbeddedFlowType.Authentication
         });
       }
       const { flowId, components: components2 } = normalizeFlowResponse(response, t);
@@ -7633,7 +7641,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       const err = error;
       setFlowError(err);
       onError?.(err);
-      throw new import_browser50.AsgardeoRuntimeError(
+      throw new import_browser51.AsgardeoRuntimeError(
         `Failed to initialize authentication flow: ${error instanceof Error ? error.message : String(error)}`,
         "SignIn-initializeFlow-RuntimeError-002",
         "react",
@@ -7653,7 +7661,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
         ...payload
       });
       const { flowId, components: components2 } = normalizeFlowResponse(response, t);
-      if (response.flowStatus === import_browser50.EmbeddedSignInFlowStatusV2.Complete) {
+      if (response.flowStatus === import_browser51.EmbeddedSignInFlowStatusV2.Complete) {
         onSuccess && onSuccess({
           redirectUrl: response.redirectUrl || afterSignInUrl,
           ...response.data
@@ -7669,7 +7677,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       const err = error;
       setFlowError(err);
       onError?.(err);
-      throw new import_browser50.AsgardeoRuntimeError(
+      throw new import_browser51.AsgardeoRuntimeError(
         `Failed to submit authentication flow: ${error instanceof Error ? error.message : String(error)}`,
         "SignIn-handleSubmit-RuntimeError-001",
         "react",
@@ -7731,7 +7739,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       window.location.href = url.toString();
     }
   };
-  if (platform === import_browser51.Platform.AsgardeoV2) {
+  if (platform === import_browser52.Platform.AsgardeoV2) {
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       SignIn_default,
       {
@@ -7754,6 +7762,9 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       onSuccess: handleSuccess,
       className,
       size,
+      showLogo: true,
+      showSubtitle: true,
+      showTitle: true,
       ...rest
     }
   );
@@ -7762,14 +7773,14 @@ var SignIn_default2 = SignIn2;
 // src/components/presentation/SignUp/BaseSignUp.tsx
 var import_browser60 = require("@asgardeo/browser");
-var import_css39 = require("@emotion/css");
-var import_react62 = require("react");
+var import_css38 = require("@emotion/css");
+var import_react61 = require("react");
 // src/components/presentation/SignUp/SignUpOptionFactory.tsx
-var import_browser58 = require("@asgardeo/browser");
+var import_browser59 = require("@asgardeo/browser");
 // src/components/adapters/CheckboxInput.tsx
-var import_browser52 = require("@asgardeo/browser");
+var import_browser53 = require("@asgardeo/browser");
 var CheckboxInput = ({
   component,
   formValues,
@@ -7783,7 +7794,7 @@ var CheckboxInput = ({
   const value = formValues[fieldName] || false;
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser52.FieldType.Checkbox,
+    type: import_browser53.FieldType.Checkbox,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7797,7 +7808,7 @@ var CheckboxInput = ({
 var CheckboxInput_default = CheckboxInput;
 // src/components/adapters/DateInput.tsx
-var import_browser53 = require("@asgardeo/browser");
+var import_browser54 = require("@asgardeo/browser");
 var DateInput = ({
   component,
   formValues,
@@ -7811,7 +7822,7 @@ var DateInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser53.FieldType.Date,
+    type: import_browser54.FieldType.Date,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7844,7 +7855,7 @@ var DividerComponent = ({ component }) => {
 var DividerComponent_default = DividerComponent;
 // src/components/adapters/EmailInput.tsx
-var import_browser54 = require("@asgardeo/browser");
+var import_browser55 = require("@asgardeo/browser");
 var EmailInput = ({
   component,
   formValues,
@@ -7858,7 +7869,7 @@ var EmailInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser54.FieldType.Email,
+    type: import_browser55.FieldType.Email,
     name: fieldName,
     label: config["label"] || "Email",
     placeholder: config["placeholder"] || "Enter your email",
@@ -7929,7 +7940,7 @@ var ImageComponent = ({ component }) => {
 var ImageComponent_default = ImageComponent;
 // src/components/adapters/NumberInput.tsx
-var import_browser55 = require("@asgardeo/browser");
+var import_browser56 = require("@asgardeo/browser");
 var NumberInput = ({
   component,
   formValues,
@@ -7943,7 +7954,7 @@ var NumberInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser55.FieldType.Number,
+    type: import_browser56.FieldType.Number,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7957,7 +7968,7 @@ var NumberInput = ({
 var NumberInput_default = NumberInput;
 // src/components/adapters/PasswordInput.tsx
-var import_browser56 = require("@asgardeo/browser");
+var import_browser57 = require("@asgardeo/browser");
 var PasswordInput = ({
   component,
   formValues,
@@ -8003,7 +8014,7 @@ var PasswordInput = ({
   });
   const hint = validationHints.length > 0 ? validationHints.join(", ") : config["hint"] || "";
   return createField({
-    type: import_browser56.FieldType.Password,
+    type: import_browser57.FieldType.Password,
     name: fieldName,
     label: config["label"] || "Password",
     placeholder: config["placeholder"] || "Enter your password",
@@ -8102,7 +8113,7 @@ var TelephoneInput = ({
 var TelephoneInput_default = TelephoneInput;
 // src/components/adapters/TextInput.tsx
-var import_browser57 = require("@asgardeo/browser");
+var import_browser58 = require("@asgardeo/browser");
 var TextInput = ({
   component,
   formValues,
@@ -8116,7 +8127,7 @@ var TextInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser57.FieldType.Text,
+    type: import_browser58.FieldType.Text,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -8187,9 +8198,9 @@ var Typography_default2 = TypographyComponent;
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
-    case import_browser58.EmbeddedFlowComponentType.Typography:
+    case import_browser59.EmbeddedFlowComponentType.Typography:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography_default2, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Input:
+    case import_browser59.EmbeddedFlowComponentType.Input:
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
@@ -8211,7 +8222,7 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CheckboxInput_default, { component, onSubmit, ...rest });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TextInput_default, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Button: {
+    case import_browser59.EmbeddedFlowComponentType.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
       if (buttonVariant === "SOCIAL") {
@@ -8236,11 +8247,11 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
       }
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SubmitButton_default, { component, onSubmit, ...rest });
     }
-    case import_browser58.EmbeddedFlowComponentType.Form:
+    case import_browser59.EmbeddedFlowComponentType.Form:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormContainer_default, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Divider:
+    case import_browser59.EmbeddedFlowComponentType.Divider:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DividerComponent_default, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Image:
+    case import_browser59.EmbeddedFlowComponentType.Image:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ImageComponent_default, { component, onSubmit, ...rest });
     default:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", {});
@@ -8273,250 +8284,105 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
-// src/components/presentation/SignUp/transformer.ts
-var import_browser59 = require("@asgardeo/browser");
-var generateId2 = (prefix) => {
-  const suffix = Math.random().toString(36).substring(2, 6);
-  return `${prefix}_${suffix}`;
-};
-var getInputVariant2 = (type, name) => {
-  const lowerName = name.toLowerCase();
-  if (lowerName.includes("password")) {
-    return "PASSWORD";
-  }
-  if (lowerName.includes("email")) {
-    return "EMAIL";
-  }
-  switch (type.toLowerCase()) {
-    case "email":
-      return "EMAIL";
-    case "password":
-      return "PASSWORD";
-    default:
-      return "TEXT";
-  }
-};
-var getInputLabel2 = (name, type, t) => {
-  const i18nKey = `elements.fields.${name}`;
-  const label = t(i18nKey);
-  if (label === i18nKey || !label) {
-    return name.charAt(0).toUpperCase() + name.slice(1);
-  }
-  return label;
-};
-var getInputPlaceholder2 = (name, type, t) => {
-  const label = getInputLabel2(name, type, t);
-  const placeholder = t("elements.fields.placeholder", { field: label });
-  if (!placeholder || placeholder === "elements.fields.placeholder") {
-    return `Enter your ${label}`;
-  }
-  return placeholder;
-};
-var convertSimpleInputToComponent2 = (input, t) => {
-  const variant = getInputVariant2(input.type, input.name);
-  const label = getInputLabel2(input.name, input.type, t);
-  const placeholder = getInputPlaceholder2(input.name, input.type, t);
-  return {
-    id: generateId2("input"),
-    type: import_browser59.EmbeddedFlowComponentType.Input,
-    variant,
-    config: {
-      type: input.type,
-      label,
-      placeholder,
-      required: input.required,
-      identifier: input.name,
-      hint: ""
-    },
-    components: []
-  };
-};
-var convertActionToComponent2 = (action, t) => {
-  const i18nKey = `elements.buttons.${action.id}`;
-  let text = t(i18nKey);
-  if (!text || text === i18nKey) {
-    text = action.id.replace(/_/g, " ");
-    text = text.charAt(0).toUpperCase() + text.slice(1);
-  }
-  return {
-    id: generateId2("action"),
-    type: import_browser59.EmbeddedFlowComponentType.Button,
-    variant: "SECONDARY",
-    config: {
-      type: "button",
-      text,
-      actionId: action.id,
-      actionType: action.type
-    },
-    components: []
-  };
-};
-var transformSimpleToComponentDriven2 = (response, t) => {
-  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent2(input, t)) || [];
-  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent2(action, t)) || [];
-  const submitButton = inputComponents.length > 0 ? {
-    id: generateId2("button"),
-    type: import_browser59.EmbeddedFlowComponentType.Button,
-    variant: "PRIMARY",
-    config: {
-      type: "submit",
-      text: t("elements.buttons.signUp")
-    },
-    components: []
-  } : null;
-  const formComponents = [];
-  if (inputComponents.length > 0) {
-    formComponents.push(...inputComponents);
-    if (submitButton) formComponents.push(submitButton);
-  }
-  const result = [];
-  if (formComponents.length > 0) {
-    result.push({
-      id: generateId2("form"),
-      type: import_browser59.EmbeddedFlowComponentType.Form,
-      config: {},
-      components: formComponents
-    });
-  }
-  if (actionComponents.length > 0) {
-    result.push(...actionComponents);
-  }
-  return result;
-};
-var extractErrorMessage = (error, t) => {
-  let errorMessage = t("errors.sign.up.flow.failure");
-  if (error && typeof error === "object") {
-    if (error.flowStatus === "ERROR" && error.failureReason) {
-      errorMessage = error.failureReason;
-    } else if (error.code && (error.message || error.description)) {
-      errorMessage = error.description || error.message;
-    } else if (error instanceof Error && error.name === "AsgardeoAPIError") {
-      try {
-        const errorResponse = JSON.parse(
-          error.message
-        );
-        if (errorResponse.failureReason) {
-          errorMessage = errorResponse.failureReason;
-        } else if (errorResponse.description) {
-          errorMessage = errorResponse.description;
-        } else if (errorResponse.message) {
-          errorMessage = errorResponse.message;
-        } else {
-          errorMessage = error.message;
-        }
-      } catch {
-        errorMessage = error.message;
-      }
-    } else if (error.message) {
-      errorMessage = error.message;
-    }
-  } else if (typeof error === "string") {
-    errorMessage = error;
-  }
-  return errorMessage;
-};
 // src/components/presentation/SignUp/BaseSignUp.styles.ts
-var import_css38 = require("@emotion/css");
-var import_react61 = require("react");
-var useStyles18 = (theme, colorScheme) => {
-  return (0, import_react61.useMemo)(() => {
-    const signUp = import_css38.css`
+var import_css37 = require("@emotion/css");
+var import_react60 = require("react");
+var useStyles17 = (theme, colorScheme) => {
+  return (0, import_react60.useMemo)(() => {
+    const signUp = import_css37.css`
       min-width: 420px;
       margin: 0 auto;
     `;
-    const card = import_css38.css`
+    const card = import_css37.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       gap: calc(${theme.vars.spacing.unit} * 2);
       min-width: 420px;
     `;
-    const logoContainer = import_css38.css`
+    const logoContainer = import_css37.css`
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const header = import_css38.css`
+    const header = import_css37.css`
       gap: 0;
+      align-items: center;
     `;
-    const title = import_css38.css`
+    const title = import_css37.css`
       margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const subtitle = import_css38.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
+    const subtitle = import_css37.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
-    const messagesContainer = import_css38.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const messageItem = import_css38.css`
+    const messageItem = import_css37.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
-    const errorContainer = import_css38.css`
+    const errorContainer = import_css37.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const contentContainer = import_css38.css`
+    const contentContainer = import_css37.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadingContainer = import_css38.css`
+    const loadingContainer = import_css37.css`
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const loadingText = import_css38.css`
+    const loadingText = import_css37.css`
       margin-top: calc(${theme.vars.spacing.unit} * 2);
       color: ${theme.vars.colors.text.secondary};
     `;
-    const divider = import_css38.css`
+    const divider = import_css37.css`
       margin: calc(${theme.vars.spacing.unit} * 1) 0;
     `;
-    const centeredContainer = import_css38.css`
+    const centeredContainer = import_css37.css`
       text-align: center;
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const passkeyContainer = import_css38.css`
+    const passkeyContainer = import_css37.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const passkeyText = import_css38.css`
+    const passkeyText = import_css37.css`
       margin-top: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
-    const form = import_css38.css`
+    const form = import_css37.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const formDivider = import_css38.css`
+    const formDivider = import_css37.css`
       margin: calc(${theme.vars.spacing.unit} * 1) 0;
     `;
-    const authenticatorSection = import_css38.css`
+    const authenticatorSection = import_css37.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 1);
     `;
-    const authenticatorItem = import_css38.css`
+    const authenticatorItem = import_css37.css`
       width: 100%;
     `;
-    const noAuthenticatorCard = import_css38.css`
+    const noAuthenticatorCard = import_css37.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorAlert = import_css38.css`
+    const errorAlert = import_css37.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const messagesAlert = import_css38.css`
+    const messagesAlert = import_css37.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
-    const flowMessagesContainer = import_css38.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
+    const flowMessagesContainer = import_css37.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const flowMessageItem = import_css38.css`
+    const flowMessageItem = import_css37.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
     return {
@@ -8526,7 +8392,6 @@ var useStyles18 = (theme, colorScheme) => {
       header,
       title,
       subtitle,
-      messagesContainer,
       messageItem,
       errorContainer,
       contentContainer,
@@ -8555,16 +8420,16 @@ var useStyles18 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseSignUp_styles_default = useStyles18;
+var BaseSignUp_styles_default = useStyles17;
 // src/components/presentation/SignUp/BaseSignUp.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var BaseSignUp = (props) => {
+var BaseSignUp = ({ showLogo = true, ...rest }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseSignUpContent, { ...props }) })
+    showLogo && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseSignUpContent, { showLogo, ...rest }) })
   ] });
 };
 var BaseSignUpContent = ({
@@ -8582,13 +8447,15 @@ var BaseSignUpContent = ({
   size = "medium",
   variant = "outlined",
   isInitialized,
-  children
+  children,
+  showTitle = true,
+  showSubtitle = true
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const handleError = (0, import_react62.useCallback)(
+  const handleError = (0, import_react61.useCallback)(
     (error) => {
       const errorMessage = extractErrorMessage(error, t);
       clearMessages();
@@ -8599,18 +8466,18 @@ var BaseSignUpContent = ({
     },
     [t, addMessage, clearMessages]
   );
-  const [isLoading, setIsLoading] = (0, import_react62.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react62.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react62.useState)(null);
-  const [formData, setFormData] = (0, import_react62.useState)({});
-  const initializationAttemptedRef = (0, import_react62.useRef)(false);
-  const normalizeFlowResponse2 = (0, import_react62.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react61.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react61.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react61.useState)(null);
+  const [formData, setFormData] = (0, import_react61.useState)({});
+  const initializationAttemptedRef = (0, import_react61.useRef)(false);
+  const normalizeFlowResponse2 = (0, import_react61.useCallback)(
     (response) => {
       if (response?.data?.components && Array.isArray(response.data.components)) {
         return response;
       }
       if (response?.data && (response.data.inputs || response.data.actions)) {
-        const transformedComponents = transformSimpleToComponentDriven2(response, t);
+        const transformedComponents = transformSimpleToComponentDriven(response, t);
         return {
           ...response,
           data: {
@@ -8623,7 +8490,7 @@ var BaseSignUpContent = ({
     },
     [t]
   );
-  const extractFormFields = (0, import_react62.useCallback)(
+  const extractFormFields = (0, import_react61.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -8679,7 +8546,7 @@ var BaseSignUpContent = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react62.useCallback)(
+  const setupFormFields = (0, import_react61.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -8853,7 +8720,7 @@ var BaseSignUpContent = ({
     }
     return false;
   };
-  const containerClasses = (0, import_css39.cx)(
+  const containerClasses = (0, import_css38.cx)(
     [
       (0, import_browser60.withVendorCSSClassPrefix)("signup"),
       (0, import_browser60.withVendorCSSClassPrefix)(`signup--${size}`),
@@ -8861,7 +8728,7 @@ var BaseSignUpContent = ({
     ],
     className
   );
-  const inputClasses = (0, import_css39.cx)(
+  const inputClasses = (0, import_css38.cx)(
     [
       (0, import_browser60.withVendorCSSClassPrefix)("signup__input"),
       size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--small"),
@@ -8869,7 +8736,7 @@ var BaseSignUpContent = ({
     ],
     inputClassName
   );
-  const buttonClasses = (0, import_css39.cx)(
+  const buttonClasses = (0, import_css38.cx)(
     [
       (0, import_browser60.withVendorCSSClassPrefix)("signup__button"),
       size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--small"),
@@ -8877,9 +8744,9 @@ var BaseSignUpContent = ({
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css39.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__error")], errorClassName);
-  const messageClasses = (0, import_css39.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react62.useCallback)(
+  const errorClasses = (0, import_css38.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+  const messageClasses = (0, import_css38.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+  const renderComponents = (0, import_react61.useCallback)(
     (components) => renderSignUpComponents(
       components,
       formValues,
@@ -8909,7 +8776,7 @@ var BaseSignUpContent = ({
       handleSubmit
     ]
   );
-  (0, import_react62.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -8966,29 +8833,31 @@ var BaseSignUpContent = ({
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: containerClasses, children: children(renderProps) });
   }
   if (!isFlowInitialized && isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Spinner_default, { size: "medium" }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default, { className: (0, import_css38.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Spinner_default, { size: "medium" }) }) }) });
   }
   if (!currentFlow) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Alert_default, { variant: "error", className: errorClasses, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default, { className: (0, import_css38.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Alert_default, { variant: "error", className: errorClasses, children: [
       /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default.Title, { children: t("errors.title") }),
       /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default.Description, { children: t("errors.sign.up.flow.initialization.failure") })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default.Header, { className: styles.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default, { className: (0, import_css38.cx)(containerClasses, styles.card), variant, children: [
+    (showTitle || showSubtitle) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default.Header, { className: styles.header, children: [
+      showTitle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
+      showSubtitle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default.Content, { children: [
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Alert_default,
         {
           variant: message.type?.toLowerCase() === "error" ? "error" : "info",
-          className: (0, import_css39.cx)(styles.flowMessageItem, messageClasses),
+          className: (0, import_css38.cx)(styles.flowMessageItem, messageClasses),
           children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default.Description, { children: message.message })
         },
         message.id || index
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) }) })
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) })
+    ] })
   ] });
 };
 var BaseSignUp_default = BaseSignUp;
@@ -9008,9 +8877,12 @@ var SignUp = ({
 }) => {
   const { signUp, isInitialized, applicationId, platform } = useAsgardeo_default();
   const handleInitialize = async (payload) => {
+    const urlParams = new URL(window.location.href).searchParams;
+    const applicationIdFromUrl = urlParams.get("applicationId");
+    const effectiveApplicationId = applicationId || applicationIdFromUrl;
     const initialPayload = payload || {
       flowType: import_browser61.EmbeddedFlowType.Registration,
-      ...platform === import_browser61.Platform.AsgardeoV2 && applicationId && { applicationId }
+      ...platform === import_browser61.Platform.AsgardeoV2 && effectiveApplicationId && { applicationId: effectiveApplicationId }
     };
     return await signUp(initialPayload);
   };
@@ -9037,6 +8909,9 @@ var SignUp = ({
       size,
       isInitialized,
       children,
+      showLogo: true,
+      showTitle: platform === import_browser61.Platform.AsgardeoV2,
+      showSubtitle: platform === import_browser61.Platform.AsgardeoV2,
       ...rest
     }
   );
@@ -9085,8 +8960,8 @@ var Organization_default = Organization5;
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
 var import_browser67 = require("@asgardeo/browser");
-var import_css47 = require("@emotion/css");
-var import_react71 = require("react");
+var import_css46 = require("@emotion/css");
+var import_react70 = require("react");
 // src/utils/getMappedUserProfileValue.ts
 var import_browser62 = require("@asgardeo/browser");
@@ -9113,15 +8988,15 @@ var getMappedUserProfileValue_default = getMappedUserProfileValue;
 // src/components/primitives/Avatar/Avatar.tsx
 var import_browser63 = require("@asgardeo/browser");
-var import_css41 = require("@emotion/css");
-var import_react64 = require("react");
-// src/components/primitives/Avatar/Avatar.styles.ts
 var import_css40 = require("@emotion/css");
 var import_react63 = require("react");
-var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
-  return (0, import_react63.useMemo)(() => {
-    const baseAvatar = import_css40.css`
+// src/components/primitives/Avatar/Avatar.styles.ts
+var import_css39 = require("@emotion/css");
+var import_react62 = require("react");
+var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
+  return (0, import_react62.useMemo)(() => {
+    const baseAvatar = import_css39.css`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
       border: ${backgroundColor ? "none" : `1px solid ${theme.vars.colors.border}`};
@@ -9137,19 +9012,19 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
       width: ${size}px;
     `;
     const variantStyles = {
-      circular: import_css40.css`
+      circular: import_css39.css`
         border-radius: 50%;
       `,
-      square: import_css40.css`
+      square: import_css39.css`
         border-radius: 8px;
       `
     };
-    const imageStyles = import_css40.css`
+    const imageStyles = import_css39.css`
       height: 100%;
       object-fit: cover;
       width: 100%;
     `;
-    const skeletonStyles = import_css40.css`
+    const skeletonStyles = import_css39.css`
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
@@ -9166,7 +9041,7 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
         }
       }
     `;
-    const iconStyles = import_css40.css`
+    const iconStyles = import_css39.css`
       width: 60%;
       height: 60%;
       fill: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.secondary};
@@ -9181,7 +9056,7 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
     };
   }, [theme, colorScheme, size, variant, backgroundColor]);
 };
-var Avatar_styles_default = useStyles19;
+var Avatar_styles_default = useStyles18;
 // src/components/primitives/Avatar/Avatar.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
@@ -9214,7 +9089,7 @@ var Avatar = ({
     const colors = generateColor(seed);
     return `linear-gradient(${angle}deg, ${colors})`;
   };
-  const backgroundColor = (0, import_react64.useMemo)(() => {
+  const backgroundColor = (0, import_react63.useMemo)(() => {
     if (!name || imageUrl) {
       return void 0;
     }
@@ -9231,20 +9106,20 @@ var Avatar = ({
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { src: imageUrl, alt, className: (0, import_css41.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { src: imageUrl, alt, className: (0, import_css40.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: (0, import_css41.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "skeleton")), styles.skeleton) });
+      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: (0, import_css40.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "skeleton")), styles.skeleton) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
-        className: (0, import_css41.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "icon")), styles.icon),
+        className: (0, import_css40.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "icon")), styles.icon),
         children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
       }
     );
@@ -9252,7 +9127,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
-      className: (0, import_css41.cx)(
+      className: (0, import_css40.cx)(
         (0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar")),
         styles.avatar,
         styles.variant,
@@ -9268,9 +9143,9 @@ var Avatar_default = Avatar;
 // src/components/primitives/Dialog/Dialog.tsx
 var import_browser64 = require("@asgardeo/browser");
-var import_react66 = require("@floating-ui/react");
-var import_css43 = require("@emotion/css");
-var import_react67 = __toESM(require("react"), 1);
+var import_react65 = require("@floating-ui/react");
+var import_css42 = require("@emotion/css");
+var import_react66 = __toESM(require("react"), 1);
 // src/components/primitives/Icons/LogOut.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
@@ -9366,18 +9241,18 @@ var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
 var X_default = X;
 // src/components/primitives/Dialog/Dialog.styles.ts
-var import_css42 = require("@emotion/css");
-var import_react65 = require("react");
-var useStyles20 = (theme, colorScheme) => {
-  return (0, import_react65.useMemo)(() => {
-    const overlay = import_css42.css`
+var import_css41 = require("@emotion/css");
+var import_react64 = require("react");
+var useStyles19 = (theme, colorScheme) => {
+  return (0, import_react64.useMemo)(() => {
+    const overlay = import_css41.css`
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
     `;
-    const content = import_css42.css`
+    const content = import_css41.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
@@ -9385,7 +9260,7 @@ var useStyles20 = (theme, colorScheme) => {
       overflow-y: auto;
       z-index: 10000;
     `;
-    const dropdownContent = import_css42.css`
+    const dropdownContent = import_css41.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
@@ -9395,23 +9270,23 @@ var useStyles20 = (theme, colorScheme) => {
       overflow-y: auto;
       z-index: 10000;
     `;
-    const header = import_css42.css`
+    const header = import_css41.css`
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} * 3) calc(${theme.vars.spacing.unit} * 4.5);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerTitle = import_css42.css`
+    const headerTitle = import_css41.css`
       margin: 0;
       font-size: 1.2rem;
       font-weight: 600;
       color: ${theme.vars.colors.text.primary};
     `;
-    const contentBody = import_css42.css`
+    const contentBody = import_css41.css`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const description = import_css42.css`
+    const description = import_css41.css`
       margin: 0;
       color: ${theme.vars.colors.text.secondary};
       font-size: ${theme.vars.typography.fontSizes.sm};
@@ -9428,7 +9303,7 @@ var useStyles20 = (theme, colorScheme) => {
     };
   }, [theme, colorScheme]);
 };
-var Dialog_styles_default = useStyles20;
+var Dialog_styles_default = useStyles19;
 // src/components/primitives/Dialog/Dialog.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
@@ -9437,23 +9312,23 @@ function useDialog({
   open: controlledOpen,
   onOpenChange: setControlledOpen
 } = {}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = import_react67.default.useState(initialOpen);
-  const [labelId, setLabelId] = import_react67.default.useState();
-  const [descriptionId, setDescriptionId] = import_react67.default.useState();
+  const [uncontrolledOpen, setUncontrolledOpen] = import_react66.default.useState(initialOpen);
+  const [labelId, setLabelId] = import_react66.default.useState();
+  const [descriptionId, setDescriptionId] = import_react66.default.useState();
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = (0, import_react66.useFloating)({
+  const data = (0, import_react65.useFloating)({
     open,
     onOpenChange: setOpen
   });
   const { context } = data;
-  const click = (0, import_react66.useClick)(context, {
+  const click = (0, import_react65.useClick)(context, {
     enabled: controlledOpen == null
   });
-  const dismiss = (0, import_react66.useDismiss)(context, { outsidePressEvent: "mousedown" });
-  const role = (0, import_react66.useRole)(context);
-  const interactions = (0, import_react66.useInteractions)([click, dismiss, role]);
-  return import_react67.default.useMemo(
+  const dismiss = (0, import_react65.useDismiss)(context, { outsidePressEvent: "mousedown" });
+  const role = (0, import_react65.useRole)(context);
+  const interactions = (0, import_react65.useInteractions)([click, dismiss, role]);
+  return import_react66.default.useMemo(
     () => ({
       open,
       setOpen,
@@ -9467,9 +9342,9 @@ function useDialog({
     [open, setOpen, interactions, data, labelId, descriptionId]
   );
 }
-var DialogContext = import_react67.default.createContext(null);
+var DialogContext = import_react66.default.createContext(null);
 var useDialogContext = () => {
-  const context = import_react67.default.useContext(DialogContext);
+  const context = import_react66.default.useContext(DialogContext);
   if (context == null) {
     throw new Error("Dialog components must be wrapped in <Dialog />");
   }
@@ -9479,13 +9354,13 @@ function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DialogContext.Provider, { value: dialog, children });
 }
-var DialogTrigger = import_react67.default.forwardRef(
+var DialogTrigger = import_react66.default.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children.ref;
-    const ref = (0, import_react66.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
-    if (asChild && import_react67.default.isValidElement(children)) {
-      return import_react67.default.cloneElement(
+    const ref = (0, import_react65.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && import_react66.default.isValidElement(children)) {
+      return import_react66.default.cloneElement(
         children,
         context.getReferenceProps({
           ref,
@@ -9498,17 +9373,17 @@ var DialogTrigger = import_react67.default.forwardRef(
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
-var DialogContent = import_react67.default.forwardRef((props, propRef) => {
+var DialogContent = import_react66.default.forwardRef((props, propRef) => {
   const { context: floatingContext, ...context } = useDialogContext();
   const { theme, colorScheme } = useTheme_default();
   const styles = Dialog_styles_default(theme, colorScheme);
-  const ref = (0, import_react66.useMergeRefs)([context.refs.setFloating, propRef]);
+  const ref = (0, import_react65.useMergeRefs)([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react66.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react66.FloatingOverlay, { className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react66.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react65.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react65.FloatingOverlay, { className: (0, import_css42.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react65.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "div",
     {
       ref,
-      className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "content")), styles.content, props.className),
+      className: (0, import_css42.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "content")), styles.content, props.className),
       "aria-labelledby": context.labelId,
       "aria-describedby": context.descriptionId,
       ...context.getFloatingProps(props),
@@ -9516,24 +9391,24 @@ var DialogContent = import_react67.default.forwardRef((props, propRef) => {
     }
   ) }) }) });
 });
-var DialogHeading = import_react67.default.forwardRef(
+var DialogHeading = import_react66.default.forwardRef(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react66.useId)();
-    import_react67.default.useLayoutEffect(() => {
+    const id = (0, import_react65.useId)();
+    import_react66.default.useLayoutEffect(() => {
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "header")), styles.header), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css42.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "header")), styles.header), children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "title")), styles.headerTitle),
+          className: (0, import_css42.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "title")), styles.headerTitle),
           children
         }
       ),
@@ -9552,13 +9427,13 @@ var DialogHeading = import_react67.default.forwardRef(
     ] });
   }
 );
-var DialogDescription = import_react67.default.forwardRef(
+var DialogDescription = import_react66.default.forwardRef(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react66.useId)();
-    import_react67.default.useLayoutEffect(() => {
+    const id = (0, import_react65.useId)();
+    import_react66.default.useLayoutEffect(() => {
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
@@ -9568,24 +9443,24 @@ var DialogDescription = import_react67.default.forwardRef(
         ...props,
         ref,
         id,
-        className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "description")), styles.description, props.className),
+        className: (0, import_css42.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "description")), styles.description, props.className),
         children
       }
     );
   }
 );
-var DialogClose = import_react67.default.forwardRef(({ children, asChild = false, ...props }, propRef) => {
+var DialogClose = import_react66.default.forwardRef(({ children, asChild = false, ...props }, propRef) => {
   const context = useDialogContext();
   const { theme, colorScheme } = useTheme_default();
   const styles = Dialog_styles_default(theme, colorScheme);
   const childrenRef = children?.ref;
-  const ref = (0, import_react66.useMergeRefs)([propRef, childrenRef]);
+  const ref = (0, import_react65.useMergeRefs)([propRef, childrenRef]);
   const handleClick = (event) => {
     context.setOpen(false);
     props.onClick?.(event);
   };
-  if (asChild && import_react67.default.isValidElement(children)) {
-    return import_react67.default.cloneElement(children, {
+  if (asChild && import_react66.default.isValidElement(children)) {
+    return import_react66.default.cloneElement(children, {
       ref,
       ...props,
       ...children.props,
@@ -9598,7 +9473,7 @@ var DialogClose = import_react67.default.forwardRef(({ children, asChild = false
       ...props,
       ref,
       onClick: handleClick,
-      className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "close")), props.className),
+      className: (0, import_css42.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "close")), props.className),
       variant: "text",
       children
     }
@@ -9617,41 +9492,41 @@ Dialog.Close = DialogClose;
 var Dialog_default = Dialog;
 // src/components/primitives/MultiInput/MultiInput.tsx
-var import_react69 = require("react");
-var import_css45 = require("@emotion/css");
+var import_react68 = require("react");
+var import_css44 = require("@emotion/css");
 var import_browser65 = require("@asgardeo/browser");
 // src/components/primitives/MultiInput/MultiInput.styles.ts
-var import_css44 = require("@emotion/css");
-var import_react68 = require("react");
-var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => {
-  return (0, import_react68.useMemo)(() => {
-    const container = import_css44.css`
+var import_css43 = require("@emotion/css");
+var import_react67 = require("react");
+var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => {
+  return (0, import_react67.useMemo)(() => {
+    const container = import_css43.css`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-    const inputRow = import_css44.css`
+    const inputRow = import_css43.css`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       position: relative;
     `;
-    const inputWrapper = import_css44.css`
+    const inputWrapper = import_css43.css`
       flex: 1;
     `;
-    const plusIcon = import_css44.css`
+    const plusIcon = import_css43.css`
       background: ${theme.vars.colors.secondary.main};
       border-radius: 50%;
       outline: 4px ${theme.vars.colors.secondary.main} auto;
       color: ${theme.vars.colors.secondary.contrastText};
     `;
-    const listContainer = import_css44.css`
+    const listContainer = import_css43.css`
       display: flex;
       flex-direction: column;
       gap: 0;
     `;
-    const listItem = import_css44.css`
+    const listItem = import_css43.css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -9666,11 +9541,11 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         margin-bottom: 0;
       }
     `;
-    const listItemText = import_css44.css`
+    const listItemText = import_css43.css`
       flex: 1;
       word-break: break-word;
     `;
-    const removeButton = import_css44.css`
+    const removeButton = import_css43.css`
       padding: calc(${theme.vars.spacing.unit} / 2);
       min-width: auto;
       color: ${theme.vars.colors.error.main};
@@ -9690,7 +9565,7 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         opacity: 0.6;
       }
     `;
-    const icon = import_css44.css`
+    const icon = import_css43.css`
       width: 16px;
       height: 16px;
       stroke: currentColor;
@@ -9712,7 +9587,7 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
     };
   }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);
 };
-var MultiInput_styles_default = useStyles21;
+var MultiInput_styles_default = useStyles20;
 // src/components/primitives/MultiInput/MultiInput.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
@@ -9738,9 +9613,9 @@ var MultiInput = ({
   const canAddMore = !maxFields || values.length < maxFields;
   const canRemove = values.length > minFields;
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
-  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css45.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css45.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
-  const handleAddValue = (0, import_react69.useCallback)(
+  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css44.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css44.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
+  const handleAddValue = (0, import_react68.useCallback)(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
         onChange([...values, newValue.trim()]);
@@ -9748,7 +9623,7 @@ var MultiInput = ({
     },
     [values, onChange, maxFields]
   );
-  const handleRemoveValue = (0, import_react69.useCallback)(
+  const handleRemoveValue = (0, import_react68.useCallback)(
     (index) => {
       if (values.length > minFields) {
         const updatedValues = values.filter((_, i) => i !== index);
@@ -9757,7 +9632,7 @@ var MultiInput = ({
     },
     [values, onChange, minFields]
   );
-  const renderInputField = (0, import_react69.useCallback)(
+  const renderInputField = (0, import_react68.useCallback)(
     (value, onValueChange, attachedEndIcon, onEndIconClick) => {
       const handleInputChange = (e) => {
         const newValue = e.target ? e.target.value : e;
@@ -9799,8 +9674,8 @@ var MultiInput = ({
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
   );
-  const [currentInputValue, setCurrentInputValue] = (0, import_react69.useState)("");
-  const handleInputSubmit = (0, import_react69.useCallback)(() => {
+  const [currentInputValue, setCurrentInputValue] = (0, import_react68.useState)("");
+  const handleInputSubmit = (0, import_react68.useCallback)(() => {
     if (currentInputValue.trim() !== "") {
       handleAddValue(currentInputValue);
       setCurrentInputValue("");
@@ -9811,26 +9686,26 @@ var MultiInput = ({
     {
       error,
       helperText,
-      className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input")), className),
+      className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input")), className),
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
             canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
             "div",
             {
-              className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-item")), styles.listItem),
+              className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-item")), styles.listItem),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "span",
                   {
-                    className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-item-text")), styles.listItemText),
+                    className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
@@ -9840,7 +9715,7 @@ var MultiInput = ({
                     type: "button",
                     onClick: () => handleRemoveValue(index),
                     disabled,
-                    className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "remove-button")), styles.removeButton),
+                    className: (0, import_css44.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
                     children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(BinIcon, { className: styles.icon })
                   }
@@ -9857,15 +9732,15 @@ var MultiInput = ({
 var MultiInput_default = MultiInput;
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
-var import_css46 = require("@emotion/css");
-var import_react70 = require("react");
+var import_css45 = require("@emotion/css");
+var import_react69 = require("react");
 var import_browser66 = require("@asgardeo/browser");
-var useStyles22 = (theme, colorScheme) => {
-  const valuePlaceholder = import_css46.css`
+var useStyles21 = (theme, colorScheme) => {
+  const valuePlaceholder = import_css45.css`
     font-style: italic;
     opacity: 0.7;
   `;
-  const editButton = import_css46.css`
+  const editButton = import_css45.css`
     font-style: italic;
     text-decoration: underline;
     opacity: 0.7;
@@ -9876,19 +9751,19 @@ var useStyles22 = (theme, colorScheme) => {
       background-color: transparent;
     }
   `;
-  const fieldInner = import_css46.css`
+  const fieldInner = import_css45.css`
     flex: 1;
     display: flex;
     align-items: center;
     gap: ${theme.vars.spacing.unit};
   `;
-  const fieldActions = import_css46.css`
+  const fieldActions = import_css45.css`
     display: flex;
     gap: calc(${theme.vars.spacing.unit} / 2);
     align-items: center;
     margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
   `;
-  const complexTextarea = import_css46.css`
+  const complexTextarea = import_css45.css`
     min-height: 60px;
     width: 100%;
     padding: 8px;
@@ -9896,57 +9771,57 @@ var useStyles22 = (theme, colorScheme) => {
     border-radius: ${theme.vars.borderRadius.small};
     resize: vertical;
   `;
-  const objectKey = import_css46.css`
+  const objectKey = import_css45.css`
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  const objectValue = import_css46.css`
+  const objectValue = import_css45.css`
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  return (0, import_react70.useMemo)(() => {
-    const root = import_css46.css`
+  return (0, import_react69.useMemo)(() => {
+    const root = import_css45.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
     `;
-    const card = import_css46.css`
+    const card = import_css45.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
     `;
-    const header = import_css46.css`
+    const header = import_css45.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
       margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const profileInfo = import_css46.css`
+    const profileInfo = import_css45.css`
       flex: 1;
     `;
-    const name = import_css46.css`
+    const name = import_css45.css`
       font-size: 1.5rem;
       font-weight: 600;
       margin: 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const infoContainer = import_css46.css`
+    const infoContainer = import_css45.css`
       display: flex;
       flex-direction: column;
     `;
-    const info = import_css46.css`
+    const info = import_css45.css`
       padding: calc(${theme.vars.spacing.unit} * 1.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const field = import_css46.css`
+    const field = import_css45.css`
       display: flex;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} / 2) 0;
       min-height: 28px;
     `;
-    const lastField = import_css46.css`
+    const lastField = import_css45.css`
       border-bottom: none;
     `;
-    const label = import_css46.css`
+    const label = import_css45.css`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
@@ -9955,7 +9830,7 @@ var useStyles22 = (theme, colorScheme) => {
       line-height: 28px;
       text-align: start;
     `;
-    const value = import_css46.css`
+    const value = import_css45.css`
       color: ${theme.vars.colors.text.primary};
       flex: 1;
       display: inline-block;
@@ -9988,10 +9863,10 @@ var useStyles22 = (theme, colorScheme) => {
         border-color: ${theme.vars.colors.border};
       }
     `;
-    const popup = import_css46.css`
+    const popup = import_css45.css`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const alert = import_css46.css`
+    const alert = import_css45.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 3);
     `;
     return {
@@ -10027,7 +9902,7 @@ var useStyles22 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseUserProfile_styles_default = useStyles22;
+var BaseUserProfile_styles_default = useStyles21;
 // src/utils/getDisplayName.ts
 var getDisplayName = (mergedMappings, user) => {
@@ -10083,10 +9958,10 @@ var BaseUserProfile = ({
   hideFields = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [editedUser, setEditedUser] = (0, import_react71.useState)(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = (0, import_react71.useState)({});
+  const [editedUser, setEditedUser] = (0, import_react70.useState)(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = (0, import_react70.useState)({});
   const { t } = useTranslation_default();
-  const shouldShowField = (0, import_react71.useCallback)(
+  const shouldShowField = (0, import_react70.useCallback)(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
         return false;
@@ -10115,13 +9990,13 @@ var BaseUserProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime80.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_react71.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react70.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react71.useCallback)((schema) => {
+  const getFieldPlaceholder = (0, import_react70.useCallback)((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -10160,7 +10035,7 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = (0, import_react71.useCallback)(
+  const handleFieldSave = (0, import_react70.useCallback)(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
@@ -10183,7 +10058,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react71.useCallback)(
+  const handleFieldCancel = (0, import_react70.useCallback)(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -10194,7 +10069,7 @@ var BaseUserProfile = ({
     },
     [flattenedProfile, profile, toggleFieldEdit]
   );
-  const formatLabel = (0, import_react71.useCallback)(
+  const formatLabel = (0, import_react70.useCallback)(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
@@ -10268,7 +10143,7 @@ var BaseUserProfile = ({
       }
       return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_css47.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_css46.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           Button_default,
           {
             onClick: onStartEdit,
@@ -10338,7 +10213,7 @@ var BaseUserProfile = ({
     }
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_css47.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_css46.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         Button_default,
         {
           onClick: onStartEdit,
@@ -10400,7 +10275,7 @@ var BaseUserProfile = ({
   if (!profile && !flattenedProfile) {
     return fallback;
   }
-  const containerClasses = (0, import_css47.cx)(
+  const containerClasses = (0, import_css46.cx)(
     styles.root,
     cardLayout ? styles.card : "",
     (0, import_browser67.withVendorCSSClassPrefix)("user-profile"),
@@ -10421,7 +10296,7 @@ var BaseUserProfile = ({
     ] }, key)) });
   };
   const profileContent = /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Card_default, { className: containerClasses, children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Alert_default, { variant: "error", className: (0, import_css47.cx)((0, import_browser67.withVendorCSSClassPrefix)((0, import_browser67.bem)("user-profile", "alert")), styles.alert), children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Alert_default, { variant: "error", className: (0, import_css46.cx)((0, import_browser67.withVendorCSSClassPrefix)((0, import_browser67.bem)("user-profile", "alert")), styles.alert), children: [
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Alert_default.Description, { children: error })
     ] }),
@@ -10466,7 +10341,7 @@ var BaseUserProfile = ({
 var BaseUserProfile_default = BaseUserProfile;
 // src/components/presentation/UserProfile/UserProfile.tsx
-var import_react72 = require("react");
+var import_react71 = require("react");
 // src/api/updateMeProfile.ts
 var import_browser68 = require("@asgardeo/browser");
@@ -10501,7 +10376,7 @@ var UserProfile3 = ({ ...rest }) => {
   const { baseUrl, isLoading } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const { t } = useTranslation_default();
-  const [error, setError] = (0, import_react72.useState)(null);
+  const [error, setError] = (0, import_react71.useState)(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
     try {
@@ -10531,16 +10406,16 @@ var UserProfile_default = UserProfile3;
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
 var import_browser70 = require("@asgardeo/browser");
-var import_react74 = require("@floating-ui/react");
-var import_css49 = require("@emotion/css");
-var import_react75 = require("react");
+var import_react73 = require("@floating-ui/react");
+var import_css48 = require("@emotion/css");
+var import_react74 = require("react");
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
-var import_css48 = require("@emotion/css");
-var import_react73 = require("react");
-var useStyles23 = (theme, colorScheme) => {
-  return (0, import_react73.useMemo)(() => {
-    const trigger = import_css48.css`
+var import_css47 = require("@emotion/css");
+var import_react72 = require("react");
+var useStyles22 = (theme, colorScheme) => {
+  return (0, import_react72.useMemo)(() => {
+    const trigger = import_css47.css`
       display: inline-flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 0.75);
@@ -10567,7 +10442,7 @@ var useStyles23 = (theme, colorScheme) => {
         box-shadow: none;
       }
     `;
-    const userName = import_css48.css`
+    const userName = import_css47.css`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -10576,7 +10451,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const dropdownContent = import_css48.css`
+    const dropdownContent = import_css47.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -10586,12 +10461,12 @@ var useStyles23 = (theme, colorScheme) => {
       z-index: 1000;
       overflow: hidden;
     `;
-    const dropdownMenu = import_css48.css`
+    const dropdownMenu = import_css47.css`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-    const menuItem = import_css48.css`
+    const menuItem = import_css47.css`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -10619,7 +10494,7 @@ var useStyles23 = (theme, colorScheme) => {
         box-shadow: none;
       }
     `;
-    const menuItemAnchor = import_css48.css`
+    const menuItemAnchor = import_css47.css`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -10640,18 +10515,18 @@ var useStyles23 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
       }
     `;
-    const divider = import_css48.css`
+    const divider = import_css47.css`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const dropdownHeader = import_css48.css`
+    const dropdownHeader = import_css47.css`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       padding: calc(${theme.vars.spacing.unit} * 1.5);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerInfo = import_css48.css`
+    const headerInfo = import_css47.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -10661,7 +10536,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerName = import_css48.css`
+    const headerName = import_css47.css`
       color: ${theme.vars.colors.text.primary};
       font-size: 1rem;
       font-weight: 500;
@@ -10670,7 +10545,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerEmail = import_css48.css`
+    const headerEmail = import_css47.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
@@ -10678,14 +10553,14 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const loadingContainer = import_css48.css`
+    const loadingContainer = import_css47.css`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `;
-    const loadingText = import_css48.css`
+    const loadingText = import_css47.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `;
@@ -10717,7 +10592,7 @@ var useStyles23 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseUserDropdown_styles_default = useStyles23;
+var BaseUserDropdown_styles_default = useStyles22;
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
@@ -10736,19 +10611,19 @@ var BaseUserDropdown = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseUserDropdown_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react75.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react75.useState)(null);
-  const { refs, floatingStyles, context } = (0, import_react74.useFloating)({
+  const [isOpen, setIsOpen] = (0, import_react74.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react74.useState)(null);
+  const { refs, floatingStyles, context } = (0, import_react73.useFloating)({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement: "bottom-end",
-    middleware: [(0, import_react74.offset)(5), (0, import_react74.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react74.shift)({ padding: 5 })],
-    whileElementsMounted: import_react74.autoUpdate
+    middleware: [(0, import_react73.offset)(5), (0, import_react73.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react73.shift)({ padding: 5 })],
+    whileElementsMounted: import_react73.autoUpdate
   });
-  const click = (0, import_react74.useClick)(context);
-  const dismiss = (0, import_react74.useDismiss)(context);
-  const role = (0, import_react74.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react74.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react73.useClick)(context);
+  const dismiss = (0, import_react73.useDismiss)(context);
+  const role = (0, import_react73.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react73.useInteractions)([click, dismiss, role]);
   const defaultAttributeMappings = {
     picture: ["profile", "profileUrl", "picture", "URL"],
     firstName: ["name.givenName", "given_name"],
@@ -10791,12 +10666,12 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
-        className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
+        className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
         color: "tertiary",
         variant: "text",
         size: "medium",
@@ -10815,18 +10690,18 @@ var BaseUserDropdown = ({
             Typography_default,
             {
               variant: "body2",
-              className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
+              className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
               children: getDisplayName_default(mergedMappings, user)
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react74.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react74.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react73.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react73.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       "div",
       {
         ref: refs.setFloating,
-        className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
+        className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
         style: {
           ...floatingStyles,
           // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.
@@ -10835,7 +10710,7 @@ var BaseUserDropdown = ({
         },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
             /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               Avatar,
               {
@@ -10845,7 +10720,7 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
               /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 Typography_default,
                 {
@@ -10868,14 +10743,14 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
             "a",
             {
               href: item.href,
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
+              className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
@@ -10892,7 +10767,7 @@ var BaseUserDropdown = ({
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
+              className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -10910,7 +10785,7 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-var import_react76 = require("react");
+var import_react75 = require("react");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var UserDropdown = ({
   children,
@@ -10920,7 +10795,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react76.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react75.useState)(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -10977,9 +10852,9 @@ var UserDropdown = ({
 var UserDropdown_default = UserDropdown;
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-var import_react78 = require("@floating-ui/react");
-var import_css51 = require("@emotion/css");
-var import_react79 = require("react");
+var import_react77 = require("@floating-ui/react");
+var import_css50 = require("@emotion/css");
+var import_react78 = require("react");
 // src/components/primitives/Icons/Building.tsx
 var import_jsx_runtime84 = require("react/jsx-runtime");
@@ -11017,15 +10892,15 @@ ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
-var import_css50 = require("@emotion/css");
-var import_react77 = require("react");
-var useStyles24 = (theme, colorScheme) => {
-  return (0, import_react77.useMemo)(() => {
-    const root = import_css50.css`
+var import_css49 = require("@emotion/css");
+var import_react76 = require("react");
+var useStyles23 = (theme, colorScheme) => {
+  return (0, import_react76.useMemo)(() => {
+    const root = import_css49.css`
       display: inline-block;
       position: relative;
     `;
-    const trigger = import_css50.css`
+    const trigger = import_css49.css`
       display: inline-flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
@@ -11045,7 +10920,7 @@ var useStyles24 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.background.surface};
       }
     `;
-    const triggerLabel = import_css50.css`
+    const triggerLabel = import_css49.css`
       color: ${theme.vars.colors.text.primary};
       font-weight: 500;
       overflow: hidden;
@@ -11053,7 +10928,7 @@ var useStyles24 = (theme, colorScheme) => {
       white-space: nowrap;
       flex: 1;
     `;
-    const content = import_css50.css`
+    const content = import_css49.css`
       min-width: 280px;
       max-width: 400px;
       background-color: ${theme.vars.colors.background.surface};
@@ -11063,13 +10938,13 @@ var useStyles24 = (theme, colorScheme) => {
       outline: none;
       z-index: 1000;
     `;
-    const header = import_css50.css`
+    const header = import_css49.css`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);
     `;
-    const headerInfo = import_css50.css`
+    const headerInfo = import_css49.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11077,7 +10952,7 @@ var useStyles24 = (theme, colorScheme) => {
       min-width: 0;
       overflow: hidden;
     `;
-    const headerName = import_css50.css`
+    const headerName = import_css49.css`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11086,7 +10961,7 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerMeta = import_css50.css`
+    const headerMeta = import_css49.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11094,7 +10969,7 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerRole = import_css50.css`
+    const headerRole = import_css49.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11103,16 +10978,16 @@ var useStyles24 = (theme, colorScheme) => {
       white-space: nowrap;
       text-transform: capitalize;
     `;
-    const manageButton = import_css50.css`
+    const manageButton = import_css49.css`
       min-width: auto;
       margin-inline-start: auto;
     `;
-    const menu = import_css50.css`
+    const menu = import_css49.css`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-    const menuItem = import_css50.css`
+    const menuItem = import_css49.css`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -11137,11 +11012,11 @@ var useStyles24 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
       }
     `;
-    const menuDivider = import_css50.css`
+    const menuDivider = import_css49.css`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const organizationInfo = import_css50.css`
+    const organizationInfo = import_css49.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11149,7 +11024,7 @@ var useStyles24 = (theme, colorScheme) => {
       min-width: 0;
       overflow: hidden;
     `;
-    const organizationName = import_css50.css`
+    const organizationName = import_css49.css`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11158,7 +11033,7 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const organizationMeta = import_css50.css`
+    const organizationMeta = import_css49.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11166,40 +11041,40 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const loadingContainer = import_css50.css`
+    const loadingContainer = import_css49.css`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `;
-    const loadingText = import_css50.css`
+    const loadingText = import_css49.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `;
-    const errorContainer = import_css50.css`
+    const errorContainer = import_css49.css`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorText = import_css50.css`
+    const errorText = import_css49.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       text-align: center;
     `;
-    const sectionHeader = import_css50.css`
+    const sectionHeader = import_css49.css`
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: ${theme.vars.colors.text.secondary};
     `;
-    const sectionHeaderContainer = import_css50.css`
+    const sectionHeaderContainer = import_css49.css`
       border-top: none;
       border-bottom: none;
       padding-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const roleCapitalized = import_css50.css`
+    const roleCapitalized = import_css49.css`
       text-transform: capitalize;
     `;
     return {
@@ -11239,7 +11114,7 @@ var useStyles24 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseOrganizationSwitcher_styles_default = useStyles24;
+var BaseOrganizationSwitcher_styles_default = useStyles23;
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -11265,21 +11140,21 @@ var BaseOrganizationSwitcher = ({
 }) => {
   const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react79.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react78.useState)(null);
   const { t } = useTranslation_default();
   const isRTL = direction === "rtl";
-  const { refs, floatingStyles, context } = (0, import_react78.useFloating)({
+  const { refs, floatingStyles, context } = (0, import_react77.useFloating)({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement: "bottom-end",
-    middleware: [(0, import_react78.offset)(5), (0, import_react78.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react78.shift)({ padding: 5 })],
-    whileElementsMounted: import_react78.autoUpdate
+    middleware: [(0, import_react77.offset)(5), (0, import_react77.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react77.shift)({ padding: 5 })],
+    whileElementsMounted: import_react77.autoUpdate
   });
-  const click = (0, import_react78.useClick)(context);
-  const dismiss = (0, import_react78.useDismiss)(context);
-  const role = (0, import_react78.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react78.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react77.useClick)(context);
+  const dismiss = (0, import_react77.useDismiss)(context);
+  const role = (0, import_react77.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react77.useInteractions)([click, dismiss, role]);
   if (fallback && !currentOrganization && !loading && organizations.length === 0) {
     return fallback;
   }
@@ -11307,28 +11182,28 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.organizationInfo), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", fontWeight: "medium", className: (0, import_css51.cx)(styles.organizationName), children: organization.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.organizationMeta), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)(styles.organizationInfo), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", fontWeight: "medium", className: (0, import_css50.cx)(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)(styles.organizationMeta), children: [
         showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
         showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: (0, import_css51.cx)(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: (0, import_css50.cx)(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
     isSelected && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.loadingContainer), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", className: (0, import_css51.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", className: (0, import_css51.cx)(styles.errorText), children: errorMessage }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.root, className), style, children: [
+  const defaultRenderLoading2 = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)(styles.loadingContainer), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", className: (0, import_css50.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", className: (0, import_css50.cx)(styles.errorText), children: errorMessage }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)(styles.root, className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
-        className: (0, import_css51.cx)(styles.trigger),
+        className: (0, import_css50.cx)(styles.trigger),
         color: "tertiary",
         variant: "outline",
         size: "medium",
@@ -11345,17 +11220,17 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: currentOrganization.name })
+            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", className: (0, import_css50.cx)(styles.triggerLabel), children: currentOrganization.name })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
+            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", className: (0, import_css50.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react78.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react78.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ref: refs.setFloating, className: (0, import_css51.cx)(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
-      currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.header), children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react77.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react77.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ref: refs.setFloating, className: (0, import_css50.cx)(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+      currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)(styles.header), children: [
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           Avatar,
           {
@@ -11366,9 +11241,9 @@ var BaseOrganizationSwitcher = ({
             alt: `${currentOrganization.name} avatar`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.headerInfo), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { noWrap: true, className: (0, import_css51.cx)(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.headerMeta), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)(styles.headerInfo), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { noWrap: true, className: (0, import_css50.cx)(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)(styles.headerMeta), children: [
             showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               Typography_default,
               {
@@ -11386,7 +11261,7 @@ var BaseOrganizationSwitcher = ({
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { noWrap: true, className: (0, import_css51.cx)(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { noWrap: true, className: (0, import_css50.cx)(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
         onManageProfile && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
@@ -11397,7 +11272,7 @@ var BaseOrganizationSwitcher = ({
             variant: "outline",
             size: "small",
             "aria-label": "Manage Organization Profile",
-            className: (0, import_css51.cx)(styles.manageButton),
+            className: (0, import_css50.cx)(styles.manageButton),
             endIcon: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               "svg",
               {
@@ -11422,21 +11297,21 @@ var BaseOrganizationSwitcher = ({
       organizations.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         "div",
         {
-          className: (0, import_css51.cx)(styles.header, styles.sectionHeaderContainer),
+          className: (0, import_css50.cx)(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", fontWeight: 600, className: (0, import_css51.cx)(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", fontWeight: 600, className: (0, import_css50.cx)(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
           return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
-              className: (0, import_css51.cx)(styles.menuItem),
+              className: (0, import_css50.cx)(styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -11451,7 +11326,7 @@ var BaseOrganizationSwitcher = ({
           );
         }),
         menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.menuDivider) }),
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)(styles.menuDivider) }),
           menuItems.map(
             (item, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               "a",
@@ -11460,7 +11335,7 @@ var BaseOrganizationSwitcher = ({
                 style: {
                   backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: (0, import_css51.cx)(styles.menuItem),
+                className: (0, import_css50.cx)(styles.menuItem),
                 onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
                 onMouseLeave: () => setHoveredItemIndex(null),
                 onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
@@ -11477,7 +11352,7 @@ var BaseOrganizationSwitcher = ({
                 style: {
                   backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: (0, import_css51.cx)(styles.menuItem),
+                className: (0, import_css50.cx)(styles.menuItem),
                 color: "tertiary",
                 variant: "text",
                 size: "small",
@@ -11496,60 +11371,60 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-var import_react92 = require("react");
+var import_react91 = require("react");
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-var import_react82 = require("react");
-// src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-var import_css53 = require("@emotion/css");
 var import_react81 = require("react");
-// src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
+// src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 var import_css52 = require("@emotion/css");
 var import_react80 = require("react");
-var useStyles25 = (theme, colorScheme) => {
-  return (0, import_react80.useMemo)(() => {
-    const root = import_css52.css`
+// src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
+var import_css51 = require("@emotion/css");
+var import_react79 = require("react");
+var useStyles24 = (theme, colorScheme) => {
+  return (0, import_react79.useMemo)(() => {
+    const root = import_css51.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
     `;
-    const card = import_css52.css`
+    const card = import_css51.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const content = import_css52.css`
+    const content = import_css51.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const form = import_css52.css`
+    const form = import_css51.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
       width: 100%;
     `;
-    const header = import_css52.css`
+    const header = import_css51.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
       margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const field = import_css52.css`
+    const field = import_css51.css`
       display: flex;
       align-items: center;
       padding: ${theme.vars.spacing.unit} 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
       min-height: 32px;
     `;
-    const fieldGroup = import_css52.css`
+    const fieldGroup = import_css51.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
     `;
-    const textarea = import_css52.css`
+    const textarea = import_css51.css`
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${theme.vars.colors.border};
@@ -11571,28 +11446,28 @@ var useStyles25 = (theme, colorScheme) => {
         cursor: not-allowed;
       }
     `;
-    const textareaError = import_css52.css`
+    const textareaError = import_css51.css`
       border-color: ${theme.vars.colors.error.main};
     `;
-    const input = import_css52.css``;
-    const avatarContainer = import_css52.css`
+    const input = import_css51.css``;
+    const avatarContainer = import_css51.css`
       align-items: flex-start;
       display: flex;
       gap: calc(${theme.vars.spacing.unit} * 2);
       margin-bottom: ${theme.vars.spacing.unit};
     `;
-    const actions = import_css52.css`
+    const actions = import_css51.css`
       display: flex;
       gap: ${theme.vars.spacing.unit};
       justify-content: flex-end;
       padding-top: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const infoContainer = import_css52.css`
+    const infoContainer = import_css51.css`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-    const value = import_css52.css`
+    const value = import_css51.css`
       color: ${theme.vars.colors.text.primary};
       flex: 1;
       display: flex;
@@ -11602,10 +11477,10 @@ var useStyles25 = (theme, colorScheme) => {
       min-height: 32px;
       line-height: 32px;
     `;
-    const popup = import_css52.css`
+    const popup = import_css51.css`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorAlert = import_css52.css`
+    const errorAlert = import_css51.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     return {
@@ -11641,7 +11516,7 @@ var useStyles25 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseCreateOrganization_styles_default = useStyles25;
+var BaseCreateOrganization_styles_default = useStyles24;
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
@@ -11665,13 +11540,13 @@ var BaseCreateOrganization = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const [formData, setFormData] = (0, import_react81.useState)({
+  const [formData, setFormData] = (0, import_react80.useState)({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = (0, import_react81.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react80.useState)({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -11731,13 +11606,13 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css53.cx)(styles.content), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("form", { id: "create-organization-form", className: (0, import_css53.cx)(styles.form), onSubmit: handleSubmit, children: [
+  const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css52.cx)(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css52.cx)(styles.content), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("form", { id: "create-organization-form", className: (0, import_css52.cx)(styles.form), onSubmit: handleSubmit, children: [
       error && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Alert_default, { variant: "error", className: styles.errorAlert, children: [
         /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Title, { children: "Error" }),
         /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css52.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         TextField_default,
         {
           label: `${t("organization.create.name.label")}`,
@@ -11747,10 +11622,10 @@ var BaseCreateOrganization = ({
           disabled: loading,
           required: true,
           error: formErrors.name,
-          className: (0, import_css53.cx)(styles.input)
+          className: (0, import_css52.cx)(styles.input)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css52.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         TextField_default,
         {
           label: `${t("organization.create.handle.label") || "Organization Handle"}`,
@@ -11761,15 +11636,15 @@ var BaseCreateOrganization = ({
           required: true,
           error: formErrors.handle,
           helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
-          className: (0, import_css53.cx)(styles.input)
+          className: (0, import_css52.cx)(styles.input)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(FormControl_default, { error: formErrors.description, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css52.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(FormControl_default, { error: formErrors.description, children: [
         /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
         /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           "textarea",
           {
-            className: (0, import_css53.cx)(styles.textarea, formErrors.description && styles.textareaError),
+            className: (0, import_css52.cx)(styles.textarea, formErrors.description && styles.textareaError),
             placeholder: t("organization.create.description.placeholder"),
             value: formData.description,
             onChange: (e) => handleInputChange("description", e.target.value),
@@ -11780,7 +11655,7 @@ var BaseCreateOrganization = ({
       ] }) }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css53.cx)(styles.actions), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css52.cx)(styles.actions), children: [
       onCancel && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
       /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
     ] })
@@ -11831,8 +11706,8 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl } = useAsgardeo_default();
   const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
-  const [loading, setLoading] = (0, import_react82.useState)(false);
-  const [error, setError] = (0, import_react82.useState)(null);
+  const [loading, setLoading] = (0, import_react81.useState)(false);
+  const [error, setError] = (0, import_react81.useState)(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -11885,43 +11760,43 @@ var CreateOrganization = ({
 };
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-var import_react87 = require("react");
+var import_react86 = require("react");
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 var import_browser73 = require("@asgardeo/browser");
-var import_css57 = require("@emotion/css");
-var import_react86 = require("react");
+var import_css56 = require("@emotion/css");
+var import_react85 = require("react");
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
 var import_browser72 = require("@asgardeo/browser");
-var import_css55 = require("@emotion/css");
-var import_react84 = require("react");
-// src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
 var import_css54 = require("@emotion/css");
 var import_react83 = require("react");
-var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
-  return (0, import_react83.useMemo)(() => {
-    const container = import_css54.css`
+// src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
+var import_css53 = require("@emotion/css");
+var import_react82 = require("react");
+var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
+  return (0, import_react82.useMemo)(() => {
+    const container = import_css53.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const label = import_css54.css`
+    const label = import_css53.css`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.primary};
       margin-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const requiredIndicator = import_css54.css`
+    const requiredIndicator = import_css53.css`
       color: ${theme.vars.colors.error.main};
     `;
-    const pairsList = import_css54.css`
+    const pairsList = import_css53.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
     `;
-    const pairRow = import_css54.css`
+    const pairRow = import_css53.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -11934,11 +11809,11 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
         background-color: ${theme.vars.colors.action.hover};
       }
     `;
-    const pairInput = import_css54.css`
+    const pairInput = import_css53.css`
       flex: 1;
       min-width: 0;
     `;
-    const addRow = import_css54.css`
+    const addRow = import_css53.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -11948,7 +11823,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
       background-color: transparent;
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const removeButton = import_css54.css`
+    const removeButton = import_css53.css`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -11971,7 +11846,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
         opacity: 0.6;
       }
     `;
-    const addButton = import_css54.css`
+    const addButton = import_css53.css`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -11994,39 +11869,39 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
         opacity: 0.6;
       }
     `;
-    const helperText = import_css54.css`
+    const helperText = import_css53.css`
       font-size: 0.75rem;
       color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const emptyState = import_css54.css`
+    const emptyState = import_css53.css`
       padding: ${theme.vars.spacing.unit};
       text-align: center;
       color: ${theme.vars.colors.text.secondary};
       font-style: italic;
       font-size: 0.75rem;
     `;
-    const readOnlyPair = import_css54.css`
+    const readOnlyPair = import_css53.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
       padding: calc(${theme.vars.spacing.unit} / 4) 0;
       min-height: 20px;
     `;
-    const readOnlyKey = import_css54.css`
+    const readOnlyKey = import_css53.css`
       font-size: 0.75rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
       min-width: 80px;
       flex-shrink: 0;
     `;
-    const readOnlyValue = import_css54.css`
+    const readOnlyValue = import_css53.css`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.primary};
       word-break: break-word;
       flex: 1;
     `;
-    const counterText = import_css54.css`
+    const counterText = import_css53.css`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);
@@ -12050,7 +11925,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
     };
   }, [theme, colorScheme, disabled, readOnly, hasError]);
 };
-var KeyValueInput_styles_default = useStyles26;
+var KeyValueInput_styles_default = useStyles25;
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
@@ -12076,10 +11951,10 @@ var KeyValueInput = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = KeyValueInput_styles_default(theme, colorScheme, disabled, readOnly, !!error);
   const initialPairs = Array.isArray(value) ? value : Object.entries(value).map(([key, val]) => ({ key, value: String(val) }));
-  const [pairs, setPairs] = (0, import_react84.useState)(initialPairs);
-  const [newKey, setNewKey] = (0, import_react84.useState)("");
-  const [newValue, setNewValue] = (0, import_react84.useState)("");
-  const handleAddPair = (0, import_react84.useCallback)(() => {
+  const [pairs, setPairs] = (0, import_react83.useState)(initialPairs);
+  const [newKey, setNewKey] = (0, import_react83.useState)("");
+  const [newValue, setNewValue] = (0, import_react83.useState)("");
+  const handleAddPair = (0, import_react83.useCallback)(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -12097,7 +11972,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = (0, import_react84.useCallback)(
+  const handleRemovePair = (0, import_react83.useCallback)(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -12111,7 +11986,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = (0, import_react84.useCallback)(
+  const handleUpdatePair = (0, import_react83.useCallback)(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -12128,27 +12003,27 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("label", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("label", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "label")), styles.label), children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "span",
         {
-          className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "required")), styles.requiredIndicator),
+          className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "required")), styles.requiredIndicator),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "div",
         {
-          className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
+          className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
               "span",
               {
-                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
+                className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
                 children: [
                   pair.key,
                   ":"
@@ -12158,7 +12033,7 @@ var KeyValueInput = ({
             /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "span",
               {
-                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
+                className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
                 children: pair.value
               }
             )
@@ -12168,7 +12043,7 @@ var KeyValueInput = ({
       )) : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "div",
         {
-          className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-row")), styles.pairRow),
+          className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-row")), styles.pairRow),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               TextField_default,
@@ -12177,7 +12052,7 @@ var KeyValueInput = ({
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
@@ -12188,7 +12063,7 @@ var KeyValueInput = ({
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
@@ -12198,7 +12073,7 @@ var KeyValueInput = ({
                 type: "button",
                 onClick: () => handleRemovePair(index),
                 disabled,
-                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "remove-button")), styles.removeButton),
+                className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
                 children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(X_default, { width: 16, height: 16 })
               }
@@ -12207,7 +12082,7 @@ var KeyValueInput = ({
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "add-row")), styles.addRow), children: [
+      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "add-row")), styles.addRow), children: [
         /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           TextField_default,
           {
@@ -12215,7 +12090,7 @@ var KeyValueInput = ({
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New key"
           }
         ),
@@ -12226,7 +12101,7 @@ var KeyValueInput = ({
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -12241,15 +12116,15 @@ var KeyValueInput = ({
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "add-button")), styles.addButton),
+            className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
             children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css54.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -12260,48 +12135,48 @@ var KeyValueInput = ({
 var KeyValueInput_default = KeyValueInput;
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
-var import_css56 = require("@emotion/css");
-var import_react85 = require("react");
-var useStyles27 = (theme, colorScheme) => {
-  return (0, import_react85.useMemo)(() => {
+var import_css55 = require("@emotion/css");
+var import_react84 = require("react");
+var useStyles26 = (theme, colorScheme) => {
+  return (0, import_react84.useMemo)(() => {
     return {
-      root: import_css56.css`
+      root: import_css55.css`
         padding: calc(${theme.vars.spacing.unit} * 4);
         min-width: 600px;
         margin: 0 auto;
       `,
-      card: import_css56.css`
+      card: import_css55.css`
         background: ${theme.vars.colors.background.surface};
         border-radius: ${theme.vars.borderRadius.large};
       `,
-      header: import_css56.css`
+      header: import_css55.css`
         display: flex;
         align-items: center;
         gap: calc(${theme.vars.spacing.unit} * 2);
         margin-bottom: calc(${theme.vars.spacing.unit} * 3);
         padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       `,
-      orgInfo: import_css56.css`
+      orgInfo: import_css55.css`
         flex: 1;
       `,
-      name: import_css56.css`
+      name: import_css55.css`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
       `,
-      handle: import_css56.css`
+      handle: import_css55.css`
         font-size: 1rem;
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
       `,
-      infoContainer: import_css56.css`
+      infoContainer: import_css55.css`
         display: flex;
         flex-direction: column;
         gap: ${theme.vars.spacing.unit};
       `,
-      field: import_css56.css`
+      field: import_css55.css`
         display: flex;
         align-items: flex-start;
         padding: calc(${theme.vars.spacing.unit} / 2) 0;
@@ -12309,21 +12184,21 @@ var useStyles27 = (theme, colorScheme) => {
         min-height: 28px;
         gap: ${theme.vars.spacing.unit};
       `,
-      fieldLast: import_css56.css`
+      fieldLast: import_css55.css`
         border-bottom: none;
       `,
-      fieldContent: import_css56.css`
+      fieldContent: import_css55.css`
         flex: 1;
         display: flex;
         align-items: center;
         gap: ${theme.vars.spacing.unit};
       `,
-      fieldActions: import_css56.css`
+      fieldActions: import_css55.css`
         display: flex;
         align-items: center;
         gap: calc(${theme.vars.spacing.unit} / 2);
       `,
-      label: import_css56.css`
+      label: import_css55.css`
         font-size: 0.875rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
@@ -12331,7 +12206,7 @@ var useStyles27 = (theme, colorScheme) => {
         flex-shrink: 0;
         line-height: 28px;
       `,
-      value: import_css56.css`
+      value: import_css55.css`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
         display: flex;
@@ -12342,11 +12217,11 @@ var useStyles27 = (theme, colorScheme) => {
         line-height: 28px;
         word-break: break-word;
       `,
-      valueEmpty: import_css56.css`
+      valueEmpty: import_css55.css`
         font-style: italic;
         opacity: 0.7;
       `,
-      statusBadge: import_css56.css`
+      statusBadge: import_css55.css`
         padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
         border-radius: ${theme.vars.borderRadius.small};
         font-size: 0.75rem;
@@ -12355,12 +12230,12 @@ var useStyles27 = (theme, colorScheme) => {
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
-      permissionsList: import_css56.css`
+      permissionsList: import_css55.css`
         display: flex;
         flex-wrap: wrap;
         gap: calc(${theme.vars.spacing.unit} / 2);
       `,
-      permissionBadge: import_css56.css`
+      permissionBadge: import_css55.css`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
         border-radius: ${theme.vars.borderRadius.small};
         font-size: 0.75rem;
@@ -12368,52 +12243,52 @@ var useStyles27 = (theme, colorScheme) => {
         color: ${theme.vars.colors.primary.contrastText};
         border: 1px solid ${theme.vars.colors.border};
       `,
-      attributesList: import_css56.css`
+      attributesList: import_css55.css`
         display: flex;
         flex-direction: column;
         gap: calc(${theme.vars.spacing.unit} / 4);
       `,
-      attributeItem: import_css56.css`
+      attributeItem: import_css55.css`
         display: flex;
         gap: ${theme.vars.spacing.unit};
         padding: calc(${theme.vars.spacing.unit} / 4) 0;
         align-items: center;
       `,
-      attributeKey: import_css56.css`
+      attributeKey: import_css55.css`
         font-size: 0.75rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
         min-width: 80px;
         flex-shrink: 0;
       `,
-      attributeValue: import_css56.css`
+      attributeValue: import_css55.css`
         font-size: 0.75rem;
         color: ${theme.vars.colors.text.primary};
         word-break: break-word;
         flex: 1;
       `,
-      popup: import_css56.css`
+      popup: import_css55.css`
         padding: calc(${theme.vars.spacing.unit} * 2);
       `,
-      editButton: import_css56.css`
+      editButton: import_css55.css`
         min-width: auto;
         padding: calc(${theme.vars.spacing.unit} / 2);
         min-height: auto;
       `,
-      placeholderButton: import_css56.css`
+      placeholderButton: import_css55.css`
         font-style: italic;
         text-decoration: underline;
         opacity: 0.7;
         padding: 0;
         min-height: auto;
       `,
-      fieldInput: import_css56.css`
+      fieldInput: import_css55.css`
         margin-bottom: 0;
       `
     };
   }, [theme, colorScheme]);
 };
-var BaseOrganizationProfile_styles_default = useStyles27;
+var BaseOrganizationProfile_styles_default = useStyles26;
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 var import_jsx_runtime91 = require("react/jsx-runtime");
@@ -12465,8 +12340,8 @@ var BaseOrganizationProfile = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
-  const [editedOrganization, setEditedOrganization] = (0, import_react86.useState)(organization);
-  const [editingFields, setEditingFields] = (0, import_react86.useState)({});
+  const [editedOrganization, setEditedOrganization] = (0, import_react85.useState)(organization);
+  const [editingFields, setEditingFields] = (0, import_react85.useState)({});
   const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "svg",
     {
@@ -12481,13 +12356,13 @@ var BaseOrganizationProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime91.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_react86.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react85.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react86.useCallback)((fieldKey) => {
+  const getFieldPlaceholder = (0, import_react85.useCallback)((fieldKey) => {
     const fieldLabels = {
       name: "organization name",
       description: "organization description",
@@ -12498,7 +12373,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = (0, import_react86.useCallback)(
+  const handleFieldSave = (0, import_react85.useCallback)(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       const fieldValue = editedOrganization && fieldKey && editedOrganization[fieldKey] !== void 0 ? editedOrganization[fieldKey] : organization && organization[fieldKey] !== void 0 ? organization[fieldKey] : "";
@@ -12510,7 +12385,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react86.useCallback)(
+  const handleFieldCancel = (0, import_react85.useCallback)(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -12536,7 +12411,7 @@ var BaseOrganizationProfile = ({
         value: typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue || ""),
         onChange: (e) => onEditValue(e.target ? e.target.value : e),
         placeholder: getFieldPlaceholder(key),
-        className: (0, import_css57.cx)(styles.fieldInput)
+        className: (0, import_css56.cx)(styles.fieldInput)
       };
       let fieldInput;
       if (key === "attributes") {
@@ -12582,8 +12457,8 @@ var BaseOrganizationProfile = ({
         fieldInput = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TextField_default, { ...commonProps });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: (0, import_css57.cx)(styles.label), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.value), children: fieldInput })
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: (0, import_css56.cx)(styles.label), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css56.cx)(styles.value), children: fieldInput })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -12597,8 +12472,8 @@ var BaseOrganizationProfile = ({
       displayValue = "-";
     }
     return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: (0, import_css57.cx)(styles.label), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: (0, import_css56.cx)(styles.label), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css56.cx)(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Button_default,
         {
           onClick: onStartEdit,
@@ -12606,7 +12481,7 @@ var BaseOrganizationProfile = ({
           color: "secondary",
           size: "small",
           title: "Click to edit",
-          className: (0, import_css57.cx)(styles.placeholderButton),
+          className: (0, import_css56.cx)(styles.placeholderButton),
           children: displayValue
         }
       ) : displayValue })
@@ -12621,8 +12496,8 @@ var BaseOrganizationProfile = ({
     if (!shouldShow) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css57.cx)(styles.field), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.fieldContent), children: renderField(
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css56.cx)(styles.field), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css56.cx)(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -12632,7 +12507,7 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+      isFieldEditable && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css56.cx)(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           Button_default,
           {
@@ -12663,7 +12538,7 @@ var BaseOrganizationProfile = ({
           color: "secondary",
           size: "small",
           title: "Edit field",
-          className: (0, import_css57.cx)(styles.editButton),
+          className: (0, import_css56.cx)(styles.editButton),
           children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PencilIcon, {})
         }
       ) })
@@ -12672,23 +12547,23 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
-  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Card_default, { className: (0, import_css57.cx)(styles.root, cardLayout && styles.card, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css57.cx)(styles.header), children: [
+  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Card_default, { className: (0, import_css56.cx)(styles.root, cardLayout && styles.card, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css56.cx)(styles.header), children: [
       /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css57.cx)(styles.orgInfo), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("h2", { className: (0, import_css57.cx)(styles.name), children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("p", { className: (0, import_css57.cx)(styles.handle), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css56.cx)(styles.orgInfo), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("h2", { className: (0, import_css56.cx)(styles.name), children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("p", { className: (0, import_css56.cx)(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css56.cx)(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
     return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Dialog_default.Content, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.popup), children: profileContent })
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css56.cx)(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -12764,9 +12639,9 @@ var OrganizationProfile = ({
 }) => {
   const { baseUrl } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [organization, setOrganization] = (0, import_react87.useState)(null);
-  const [loading, setLoading] = (0, import_react87.useState)(true);
-  const [error, setError] = (0, import_react87.useState)(false);
+  const [organization, setOrganization] = (0, import_react86.useState)(null);
+  const [loading, setLoading] = (0, import_react86.useState)(true);
+  const [error, setError] = (0, import_react86.useState)(false);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       setLoading(false);
@@ -12789,7 +12664,7 @@ var OrganizationProfile = ({
       setLoading(false);
     }
   };
-  (0, import_react87.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
   const handleOrganizationUpdate = async (payload) => {
@@ -12826,26 +12701,26 @@ var OrganizationProfile = ({
 var OrganizationProfile_default = OrganizationProfile;
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-var import_css61 = require("@emotion/css");
-var import_react91 = require("react");
+var import_css60 = require("@emotion/css");
+var import_react90 = require("react");
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-var import_css59 = require("@emotion/css");
-var import_react89 = require("react");
-// src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
 var import_css58 = require("@emotion/css");
 var import_react88 = require("react");
-var useStyles28 = (theme, colorScheme) => {
-  return (0, import_react88.useMemo)(() => {
-    const root = import_css58.css`
+// src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
+var import_css57 = require("@emotion/css");
+var import_react87 = require("react");
+var useStyles27 = (theme, colorScheme) => {
+  return (0, import_react87.useMemo)(() => {
+    const root = import_css57.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
     `;
-    const header = import_css58.css`
+    const header = import_css57.css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12853,21 +12728,21 @@ var useStyles28 = (theme, colorScheme) => {
       padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerInfo = import_css58.css`
+    const headerInfo = import_css57.css`
       flex: 1;
     `;
-    const title = import_css58.css`
+    const title = import_css57.css`
       font-size: 1.5rem;
       font-weight: 600;
       margin: 0 0 8px 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const subtitle = import_css58.css`
+    const subtitle = import_css57.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
     `;
-    const refreshButton = import_css58.css`
+    const refreshButton = import_css57.css`
       background-color: ${theme.vars.colors.background.surface};
       border: 1px solid ${theme.vars.colors.border};
       border-radius: ${theme.vars.borderRadius.small};
@@ -12881,12 +12756,12 @@ var useStyles28 = (theme, colorScheme) => {
         border-color: ${theme.vars.colors.primary.main};
       }
     `;
-    const listContainer = import_css58.css`
+    const listContainer = import_css57.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const organizationItem = import_css58.css`
+    const organizationItem = import_css57.css`
       border: 1px solid ${theme.vars.colors.border};
       border-radius: ${theme.vars.borderRadius.medium};
       display: flex;
@@ -12899,46 +12774,46 @@ var useStyles28 = (theme, colorScheme) => {
         box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;
       }
     `;
-    const organizationContent = import_css58.css`
+    const organizationContent = import_css57.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 2);
       flex: 1;
     `;
-    const organizationInfo = import_css58.css`
+    const organizationInfo = import_css57.css`
       flex: 1;
     `;
-    const organizationName = import_css58.css`
+    const organizationName = import_css57.css`
       font-size: 1.125rem;
       font-weight: 600;
       margin: 0 0 4px 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const organizationHandle = import_css58.css`
+    const organizationHandle = import_css57.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0 0 4px 0;
       font-family: monospace;
     `;
-    const organizationStatus = import_css58.css`
+    const organizationStatus = import_css57.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
     `;
-    const statusText = import_css58.css`
+    const statusText = import_css57.css`
       font-weight: 500;
     `;
-    const statusTextActive = import_css58.css`
+    const statusTextActive = import_css57.css`
       color: ${theme.vars.colors.success.main};
     `;
-    const statusTextInactive = import_css58.css`
+    const statusTextInactive = import_css57.css`
       color: ${theme.vars.colors.error.main};
     `;
-    const organizationActions = import_css58.css`
+    const organizationActions = import_css57.css`
       display: flex;
       align-items: center;
     `;
-    const badge = import_css58.css`
+    const badge = import_css57.css`
       border-radius: ${theme.vars.borderRadius.large};
       font-size: 0.75rem;
       font-weight: 500;
@@ -12946,15 +12821,15 @@ var useStyles28 = (theme, colorScheme) => {
       text-transform: uppercase;
       letter-spacing: 0.5px;
     `;
-    const badgeSuccess = import_css58.css`
+    const badgeSuccess = import_css57.css`
       background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);
       color: ${theme.vars.colors.success.main};
     `;
-    const badgeError = import_css58.css`
+    const badgeError = import_css57.css`
       background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
       color: ${theme.vars.colors.error.main};
     `;
-    const loadingContainer = import_css58.css`
+    const loadingContainer = import_css57.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       text-align: center;
       display: flex;
@@ -12962,25 +12837,25 @@ var useStyles28 = (theme, colorScheme) => {
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadingText = import_css58.css`
+    const loadingText = import_css57.css`
       margin-top: ${theme.vars.spacing.unit};
     `;
-    const errorContainer = import_css58.css`
+    const errorContainer = import_css57.css`
       background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
       border: 1px solid ${theme.vars.colors.error.main};
       border-radius: ${theme.vars.borderRadius.medium};
       color: ${theme.vars.colors.error.main};
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const emptyContainer = import_css58.css`
+    const emptyContainer = import_css57.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       text-align: center;
     `;
-    const emptyText = import_css58.css`
+    const emptyText = import_css57.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 1rem;
     `;
-    const loadMoreButton = import_css58.css`
+    const loadMoreButton = import_css57.css`
       background-color: ${theme.vars.colors.primary.main};
       border: none;
       border-radius: ${theme.vars.borderRadius.medium};
@@ -13001,13 +12876,13 @@ var useStyles28 = (theme, colorScheme) => {
         opacity: 0.6;
       }
     `;
-    const errorMargin = import_css58.css`
+    const errorMargin = import_css57.css`
       margin-top: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadMoreMargin = import_css58.css`
+    const loadMoreMargin = import_css57.css`
       margin-top: calc(${theme.vars.spacing.unit} * 3);
     `;
-    const popupContent = import_css58.css`
+    const popupContent = import_css57.css`
       padding: ${theme.vars.spacing.unit};
     `;
     return {
@@ -13057,27 +12932,27 @@ var useStyles28 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseOrganizationList_styles_default = useStyles28;
+var BaseOrganizationList_styles_default = useStyles27;
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationItem), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationContent), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css58.cx)(styles.organizationItem), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css58.cx)(styles.organizationContent), children: [
       /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationInfo), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "h6", className: (0, import_css59.cx)(styles.organizationName), children: organization.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.organizationHandle), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css58.cx)(styles.organizationInfo), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "h6", className: (0, import_css58.cx)(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css58.cx)(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
         ] }),
-        showStatus && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.organizationStatus), children: [
+        showStatus && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css58.cx)(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
           /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
             "span",
             {
-              className: (0, import_css59.cx)(
+              className: (0, import_css58.cx)(
                 styles.statusText,
                 organization.status === "ACTIVE" ? styles.statusTextActive : styles.statusTextInactive
               ),
@@ -13087,7 +12962,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.organizationActions), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    organization.canSwitch && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.organizationActions), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       Button_default,
       {
         onClick: (e) => {
@@ -13101,17 +12976,17 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
     ) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.loadingContainer), children: [
+var defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css58.cx)(styles.loadingContainer), children: [
   /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css59.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") })
+  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css58.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body1", color: "error", children: [
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body1", color: "error", children: [
   /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button_default, { onClick: onLoadMore, disabled: isLoading, className: (0, import_css59.cx)(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.emptyContainer), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css59.cx)(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button_default, { onClick: onLoadMore, disabled: isLoading, className: (0, import_css58.cx)(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.emptyContainer), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css58.cx)(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -13138,7 +13013,7 @@ var BaseOrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationList_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const organizationsWithSwitchAccess = (0, import_react89.useMemo)(() => {
+  const organizationsWithSwitchAccess = (0, import_react88.useMemo)(() => {
     if (!allOrganizations?.organizations) {
       return [];
     }
@@ -13154,53 +13029,53 @@ var BaseOrganizationList = ({
   const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, isLoading2) => defaultRenderLoadMore(onLoadMore, isLoading2, t, styles));
   const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));
   if (isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const loadingContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
       return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: loadingContent })
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
       return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: errorContent })
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
       return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: emptyContent })
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.headerInfo), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.subtitle), children: t("organization.switcher.showing.count", {
+  const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css58.cx)(styles.root, className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css58.cx)(styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.headerInfo), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css58.cx)(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button_default, { onClick: onRefresh, className: (0, import_css59.cx)(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button_default, { onClick: onRefresh, className: (0, import_css58.cx)(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
     return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: organizationListContent })
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css58.cx)(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -13208,11 +13083,11 @@ var BaseOrganizationList = ({
 var BaseOrganizationList_default = BaseOrganizationList;
 // src/components/presentation/OrganizationList/OrganizationList.styles.ts
-var import_css60 = require("@emotion/css");
-var import_react90 = require("react");
-var useStyles29 = (theme, colorScheme) => {
-  return (0, import_react90.useMemo)(() => {
-    const cssOrganizationListWrapper = import_css60.css`
+var import_css59 = require("@emotion/css");
+var import_react89 = require("react");
+var useStyles28 = (theme, colorScheme) => {
+  return (0, import_react89.useMemo)(() => {
+    const cssOrganizationListWrapper = import_css59.css`
       /* Container wrapper styles for OrganizationList component */
       width: 100%;
@@ -13243,11 +13118,11 @@ var useStyles29 = (theme, colorScheme) => {
     `;
     return {
       root: cssOrganizationListWrapper,
-      container: import_css60.css`
+      container: import_css59.css`
         position: relative;
         width: 100%;
       `,
-      errorState: import_css60.css`
+      errorState: import_css59.css`
         padding: calc(${theme.vars.spacing.unit} * 2);
         background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);
         border: 1px solid ${theme.vars.colors.error.main};
@@ -13255,7 +13130,7 @@ var useStyles29 = (theme, colorScheme) => {
         color: ${theme.vars.colors.error.main};
         text-align: center;
       `,
-      loadingOverlay: import_css60.css`
+      loadingOverlay: import_css59.css`
         position: absolute;
         inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
@@ -13268,7 +13143,7 @@ var useStyles29 = (theme, colorScheme) => {
     };
   }, [theme, colorScheme]);
 };
-var OrganizationList_styles_default = useStyles29;
+var OrganizationList_styles_default = useStyles28;
 // src/components/presentation/OrganizationList/OrganizationList.tsx
 var import_jsx_runtime94 = require("react/jsx-runtime");
@@ -13285,15 +13160,15 @@ var OrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = OrganizationList_styles_default(theme, colorScheme);
   const { getAllOrganizations: getAllOrganizations2, error, isLoading, myOrganizations } = useOrganization_default();
-  const [allOrganizations, setAllOrganizations] = (0, import_react91.useState)({
+  const [allOrganizations, setAllOrganizations] = (0, import_react90.useState)({
     organizations: []
   });
-  (0, import_react91.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     (async () => {
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: (0, import_css61.cx)(styles.root, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: (0, import_css61.cx)(styles.container), children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: (0, import_css60.cx)(styles.root, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: (0, import_css60.cx)(styles.container), children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -13352,9 +13227,9 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react92.useState)(false);
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react92.useState)(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react92.useState)(false);
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react91.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react91.useState)(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react91.useState)(false);
   const { t } = useTranslation_default();
   if (!isSignedIn && fallback) {
     return fallback;