npm - @asgardeo/react - Versions diffs - 0.6.2 → 0.6.4 - Mend

@asgardeo/react 0.6.2 → 0.6.4

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/index.js CHANGED Viewed

@@ -5539,7 +5539,8 @@ var useStyles13 = (theme, colorScheme, variant, clickable) => {
       }
     `;
     const headerStyles = css13`
-      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};
@@ -5558,7 +5559,8 @@ var useStyles13 = (theme, colorScheme, variant, clickable) => {
       margin-top: ${theme.vars.spacing.unit};
     `;
     const contentStyles = css13`
-      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 = css13`
@@ -5963,7 +5965,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
 import { css as css16 } from "@emotion/css";
 import { useMemo as useMemo23 } from "react";
 var useStyles16 = (theme, colorScheme) => {
@@ -5982,17 +5984,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 = css16`
       gap: 0;
+      align-items: center;
     `;
     const title = css16`
       margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
       color: ${theme.vars.colors.text.primary};
     `;
     const subtitle = css16`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
     const messagesContainer = css16`
@@ -6061,7 +6064,7 @@ var useStyles16 = (theme, colorScheme) => {
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
     const flowMessagesContainer = css16`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const flowMessageItem = css16`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
@@ -6107,12 +6110,12 @@ var BaseSignIn_styles_default = useStyles16;
 // src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
 import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var isPasskeyAuthenticator = (authenticator) => authenticator.authenticatorId === ApplicationNativeAuthenticationConstants3.SupportedAuthenticators.Passkey && authenticator.metadata?.promptType === 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__ */ jsxs26("div", { children: [
-    /* @__PURE__ */ jsx53("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx53(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ jsx53(FlowProvider_default, { children: /* @__PURE__ */ jsx53(BaseSignInContent, { ...props }) })
+    showLogo && /* @__PURE__ */ jsx53("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx53(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ jsx53(FlowProvider_default, { children: /* @__PURE__ */ jsx53(BaseSignInContent, { showLogo, ...rest }) })
   ] });
 };
 var HIDDEN_AUTHENTICATORS = ["T3JnYW5pemF0aW9uQXV0aGVudGljYXRvcjpTU08"];
@@ -6130,7 +6133,9 @@ var BaseSignInContent = ({
   errorClassName = "",
   messageClassName = "",
   size = "medium",
-  variant = "outlined"
+  variant = "outlined",
+  showTitle = true,
+  showSubtitle = true
 }) => {
   const { theme } = useTheme_default();
   const { t } = useTranslation_default();
@@ -6671,9 +6676,11 @@ var BaseSignInContent = ({
     );
     const optionAuthenticators = availableAuthenticators.filter((auth) => !userPromptAuthenticators.includes(auth)).filter((authenticator) => !HIDDEN_AUTHENTICATORS.includes(authenticator.authenticatorId));
     return /* @__PURE__ */ jsxs26(Card_default, { className: cx19(containerClasses, styles.card), variant, children: [
-      /* @__PURE__ */ jsxs26(Card_default.Header, { className: styles.header, children: [
-        /* @__PURE__ */ jsx53(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-        flowSubtitle && /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") }),
+      (showTitle || showSubtitle) && /* @__PURE__ */ jsxs26(Card_default.Header, { className: styles.header, children: [
+        showTitle && /* @__PURE__ */ jsx53(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
+        showSubtitle && /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") })
+      ] }),
+      /* @__PURE__ */ jsxs26(Card_default.Content, { children: [
         flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx53("div", { className: styles.flowMessagesContainer, children: flowMessages.map((flowMessage, index) => /* @__PURE__ */ jsx53(
           Alert_default,
           {
@@ -6686,9 +6693,7 @@ var BaseSignInContent = ({
         messages.length > 0 && /* @__PURE__ */ jsx53("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__ */ jsx53(Alert_default, { variant: variant2, className: cx19(styles.messageItem, messageClasses), children: /* @__PURE__ */ jsx53(Alert_default.Description, { children: message.message }) }, index);
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxs26(Card_default.Content, { children: [
+        }) }),
         error && /* @__PURE__ */ jsxs26(Alert_default, { variant: "error", className: cx19(styles.errorContainer, errorClasses), children: [
           /* @__PURE__ */ jsx53(Alert_default.Title, { children: "Error" }),
           /* @__PURE__ */ jsx53(Alert_default.Description, { children: error })
@@ -6818,147 +6823,6 @@ import { useState as useState15, useCallback as useCallback10 } from "react";
 import { cx as cx20 } from "@emotion/css";
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix20 } from "@asgardeo/browser";
-// src/components/presentation/SignIn/BaseSignIn.styles.ts
-import { css as css17 } from "@emotion/css";
-import { useMemo as useMemo24 } from "react";
-var useStyles17 = (theme, colorScheme) => {
-  return useMemo24(() => {
-    const signIn = css17`
-      min-width: 420px;
-      margin: 0 auto;
-    `;
-    const card = css17`
-      background: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.large};
-      gap: calc(${theme.vars.spacing.unit} * 2);
-      min-width: 420px;
-    `;
-    const logoContainer = css17`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
-    `;
-    const header = css17`
-      gap: 0;
-    `;
-    const title = css17`
-      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
-      color: ${theme.vars.colors.text.primary};
-    `;
-    const subtitle = css17`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-    const messagesContainer = css17`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const messageItem = css17`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    const errorContainer = css17`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const contentContainer = css17`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const loadingContainer = css17`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: calc(${theme.vars.spacing.unit} * 4);
-    `;
-    const loadingText = css17`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-    const divider = css17`
-      margin: calc(${theme.vars.spacing.unit} * 1) 0;
-    `;
-    const centeredContainer = css17`
-      text-align: center;
-      padding: calc(${theme.vars.spacing.unit} * 4);
-    `;
-    const passkeyContainer = css17`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const passkeyText = css17`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-    const form = css17`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const formDivider = css17`
-      margin: calc(${theme.vars.spacing.unit} * 1) 0;
-    `;
-    const authenticatorSection = css17`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    const authenticatorItem = css17`
-      width: 100%;
-    `;
-    const noAuthenticatorCard = css17`
-      background: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.large};
-      padding: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const errorAlert = css17`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const messagesAlert = css17`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-    const flowMessagesContainer = css17`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const flowMessageItem = css17`
-      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;
 // src/components/presentation/SignIn/component-driven/SignInOptionFactory.tsx
 import React from "react";
 import { AsgardeoRuntimeError as AsgardeoRuntimeError7, FieldType as FieldType7 } from "@asgardeo/browser";
@@ -7129,67 +6993,223 @@ var renderSignInComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
-// src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
-var BaseSignIn2 = (props) => {
-  const { theme } = useTheme_default();
-  const styles = BaseSignIn_styles_default2(theme, theme.vars.colors.text.primary);
-  return /* @__PURE__ */ jsxs27("div", { children: [
-    /* @__PURE__ */ jsx56("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx56(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ jsx56(FlowProvider_default, { children: /* @__PURE__ */ jsx56(BaseSignInContent2, { ...props }) })
-  ] });
+// src/components/presentation/SignUp/transformer.ts
+import {
+  EmbeddedFlowComponentType as EmbeddedFlowComponentType2
+} from "@asgardeo/browser";
+var generateId = (prefix) => {
+  const suffix = Math.random().toString(36).substring(2, 6);
+  return `${prefix}_${suffix}`;
 };
-var BaseSignInContent2 = ({
-  components = [],
-  onSubmit,
-  onError,
-  className = "",
-  inputClassName = "",
-  buttonClassName = "",
-  errorClassName = "",
-  messageClassName = "",
-  size = "medium",
-  variant = "outlined",
-  isLoading: externalIsLoading,
-  children
-}) => {
-  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] = useState15(false);
-  const [error, setError] = useState15(null);
-  const isLoading = externalIsLoading || isSubmitting;
-  const extractFormFields = useCallback10(
-    (components2) => {
-      const fields = [];
-      const processComponents = (comps) => {
-        comps.forEach((component) => {
-          if (component.type === "INPUT" && component.config) {
-            const identifier = component.config["identifier"] || component.id;
-            fields.push({
-              name: identifier,
-              required: component.config["required"] || false,
-              initialValue: "",
-              validator: (value) => {
-                if (component.config["required"] && (!value || value.trim() === "")) {
-                  return t("field.required");
-                }
-                return null;
-              }
-            });
-          }
-          if (component.components) {
-            processComponents(component.components);
-          }
-        });
-      };
-      processComponents(components2);
-      return fields;
+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.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+  }
+  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(fieldType, input.name);
+  const label = getInputLabel(input.name, fieldType, t);
+  const placeholder = getInputPlaceholder(input.name, fieldType, t);
+  return {
+    id: generateId("input"),
+    type: EmbeddedFlowComponentType2.Input,
+    variant,
+    config: {
+      type: input.type,
+      label,
+      placeholder,
+      required: input.required,
+      identifier: input.name,
+      hint: ""
     },
-    [t]
-  );
-  const formFields = components ? extractFormFields(components) : [];
+    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: EmbeddedFlowComponentType2.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: EmbeddedFlowComponentType2.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: EmbeddedFlowComponentType2.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
+import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+var BaseSignIn2 = ({ showLogo = true, ...rest }) => {
+  const { theme } = useTheme_default();
+  const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
+  return /* @__PURE__ */ jsxs27("div", { children: [
+    showLogo && /* @__PURE__ */ jsx56("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx56(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ jsx56(FlowProvider_default, { children: /* @__PURE__ */ jsx56(BaseSignInContent2, { showLogo, ...rest }) })
+  ] });
+};
+var BaseSignInContent2 = ({
+  components = [],
+  onSubmit,
+  onError,
+  className = "",
+  inputClassName = "",
+  buttonClassName = "",
+  errorClassName = "",
+  messageClassName = "",
+  size = "medium",
+  variant = "outlined",
+  isLoading: externalIsLoading,
+  children,
+  showTitle = true,
+  showSubtitle = true,
+  showLogo = true
+}) => {
+  const { theme } = useTheme_default();
+  const { t } = useTranslation_default();
+  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] = useState15(false);
+  const isLoading = externalIsLoading || isSubmitting;
+  const handleError = useCallback10(
+    (error) => {
+      const errorMessage = extractErrorMessage(error, t);
+      clearMessages();
+      addMessage({
+        type: "error",
+        message: errorMessage
+      });
+    },
+    [t, addMessage, clearMessages]
+  );
+  const extractFormFields = useCallback10(
+    (components2) => {
+      const fields = [];
+      const processComponents = (comps) => {
+        comps.forEach((component) => {
+          if (component.type === "INPUT" && component.config) {
+            const identifier = component.config["identifier"] || component.id;
+            fields.push({
+              name: identifier,
+              required: component.config["required"] || false,
+              initialValue: "",
+              validator: (value) => {
+                if (component.config["required"] && (!value || value.trim() === "")) {
+                  return t("field.required");
+                }
+                return null;
+              }
+            });
+          }
+          if (component.components) {
+            processComponents(component.components);
+          }
+        });
+      };
+      processComponents(components2);
+      return fields;
+    },
+    [t]
+  );
+  const formFields = components ? extractFormFields(components) : [];
   const form = useForm({
     initialValues: {},
     fields: formFields,
@@ -7220,7 +7240,7 @@ var BaseSignInContent2 = ({
       return;
     }
     setIsSubmitting(true);
-    setError(null);
+    clearMessages();
     try {
       const filteredInputs = {};
       if (data) {
@@ -7244,8 +7264,7 @@ 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);
@@ -7288,7 +7307,6 @@ var BaseSignInContent2 = ({
       handleInputChange,
       {
         buttonClassName: buttonClasses,
-        error,
         inputClassName: inputClasses,
         onInputBlur: handleInputBlur,
         onSubmit: handleSubmit,
@@ -7304,7 +7322,6 @@ var BaseSignInContent2 = ({
       isLoading,
       size,
       variant,
-      error,
       inputClasses,
       buttonClasses,
       handleInputBlur,
@@ -7318,7 +7335,6 @@ var BaseSignInContent2 = ({
       touched: touchedFields,
       isValid: isFormValid,
       isLoading,
-      error,
       components,
       handleInputChange,
       handleSubmit,
@@ -7336,9 +7352,11 @@ var BaseSignInContent2 = ({
     return /* @__PURE__ */ jsx56(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx56(Card_default.Content, { children: /* @__PURE__ */ jsx56(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", children: t("errors.sign.in.components.not.available") }) }) }) });
   }
   return /* @__PURE__ */ jsxs27(Card_default, { className: cx20(containerClasses, styles.card), variant, children: [
-    /* @__PURE__ */ jsxs27(Card_default.Header, { className: styles.header, children: [
-      /* @__PURE__ */ jsx56(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-      /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") }),
+    (showTitle || showSubtitle) && /* @__PURE__ */ jsxs27(Card_default.Header, { className: styles.header, children: [
+      showTitle && /* @__PURE__ */ jsx56(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
+      showSubtitle && /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") })
+    ] }),
+    /* @__PURE__ */ jsxs27(Card_default.Content, { children: [
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx56("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx56(
         Alert_default,
         {
@@ -7347,13 +7365,7 @@ var BaseSignInContent2 = ({
           children: /* @__PURE__ */ jsx56(Alert_default.Description, { children: message.message })
         },
         index
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs27(Card_default.Content, { children: [
-      error && /* @__PURE__ */ jsxs27(Alert_default, { variant: "error", className: cx20(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ jsx56(Alert_default.Title, { children: t("errors.title") }),
-        /* @__PURE__ */ jsx56(Alert_default.Description, { children: error })
-      ] }),
+      )) }),
       /* @__PURE__ */ jsx56("div", { className: styles.contentContainer, children: components && renderComponents(components) })
     ] })
   ] });
@@ -7385,12 +7397,12 @@ import {
 } from "@asgardeo/browser";
 // src/components/presentation/SignIn/component-driven/transformer.ts
-import { EmbeddedFlowComponentType as EmbeddedFlowComponentType2 } from "@asgardeo/browser";
-var generateId = (prefix) => {
+import { EmbeddedFlowComponentType as EmbeddedFlowComponentType3 } from "@asgardeo/browser";
+var generateId2 = (prefix) => {
   const suffix = Math.random().toString(36).substring(2, 6);
   return `${prefix}_${suffix}`;
 };
-var getInputVariant = (type, name) => {
+var getInputVariant2 = (type, name) => {
   switch (type.toLowerCase()) {
     case "email":
       return "EMAIL";
@@ -7400,7 +7412,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) {
@@ -7408,25 +7420,25 @@ 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) => {
+var convertSimpleInputToComponent2 = (input, t) => {
   let fieldType = input.type;
   if (input.name.toLowerCase().includes("password") && input.type.toLowerCase() === "string") {
     fieldType = "password";
   }
-  const variant = getInputVariant(fieldType, input.name);
-  const label = getInputLabel(input.name, fieldType, t);
-  const placeholder = getInputPlaceholder(input.name, fieldType, t);
+  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: EmbeddedFlowComponentType2.Input,
+    id: generateId2("input"),
+    type: EmbeddedFlowComponentType3.Input,
     variant,
     config: {
       type: fieldType,
@@ -7439,7 +7451,7 @@ var convertSimpleInputToComponent = (input, t) => {
     components: []
   };
 };
-var convertActionToComponent = (action, t) => {
+var convertActionToComponent2 = (action, t) => {
   const normalizedId = action.id.replace(/_auth$/, "");
   const i18nKey = `elements.buttons.${normalizedId}`;
   let text = t(i18nKey);
@@ -7448,8 +7460,8 @@ var convertActionToComponent = (action, t) => {
     text = text.charAt(0).toUpperCase() + text.slice(1);
   }
   return {
-    id: generateId("action"),
-    type: EmbeddedFlowComponentType2.Button,
+    id: generateId2("action"),
+    type: EmbeddedFlowComponentType3.Button,
     variant: "SECONDARY",
     config: {
       type: "button",
@@ -7460,12 +7472,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: EmbeddedFlowComponentType2.Button,
+    id: generateId2("button"),
+    type: EmbeddedFlowComponentType3.Button,
     variant: "PRIMARY",
     config: {
       type: "submit",
@@ -7481,8 +7493,8 @@ var transformSimpleToComponentDriven = (response, t) => {
   const result = [];
   if (formComponents.length > 0) {
     result.push({
-      id: generateId("form"),
-      type: EmbeddedFlowComponentType2.Form,
+      id: generateId2("form"),
+      type: EmbeddedFlowComponentType3.Form,
       config: {},
       components: formComponents
     });
@@ -7495,7 +7507,7 @@ var transformSimpleToComponentDriven = (response, t) => {
 var normalizeFlowResponse = (response, t) => {
   return {
     flowId: response.flowId,
-    components: transformSimpleToComponentDriven(response, t)
+    components: transformSimpleToComponentDriven2(response, t)
   };
 };
@@ -7675,6 +7687,9 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       onSuccess: handleSuccess,
       className,
       size,
+      showLogo: true,
+      showSubtitle: true,
+      showTitle: true,
       ...rest
     }
   );
@@ -7692,7 +7707,7 @@ import { cx as cx21 } from "@emotion/css";
 import { useEffect as useEffect14, useState as useState17, useCallback as useCallback11, useRef as useRef5 } from "react";
 // src/components/presentation/SignUp/SignUpOptionFactory.tsx
-import { EmbeddedFlowComponentType as EmbeddedFlowComponentType3 } from "@asgardeo/browser";
+import { EmbeddedFlowComponentType as EmbeddedFlowComponentType4 } from "@asgardeo/browser";
 // src/components/adapters/CheckboxInput.tsx
 import { FieldType as FieldType8 } from "@asgardeo/browser";
@@ -8097,352 +8112,207 @@ var TypographyComponent = ({ component }) => {
     default:
       typographyVariant = "body1";
   }
-  return /* @__PURE__ */ jsx65(
-    Typography_default,
-    {
-      variant: typographyVariant,
-      style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
-      children: text
-    },
-    component.id
-  );
-};
-var Typography_default2 = TypographyComponent;
-// src/components/presentation/SignUp/SignUpOptionFactory.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
-var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
-  switch (component.type) {
-    case EmbeddedFlowComponentType3.Typography:
-      return /* @__PURE__ */ jsx66(Typography_default2, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType3.Input:
-      const inputVariant = component.variant?.toUpperCase();
-      const inputType = component.config["type"]?.toLowerCase();
-      if (inputVariant === "EMAIL" || inputType === "email") {
-        return /* @__PURE__ */ jsx66(EmailInput_default, { component, onSubmit, ...rest });
-      }
-      if (inputVariant === "PASSWORD" || inputType === "password") {
-        return /* @__PURE__ */ jsx66(PasswordInput_default, { component, onSubmit, ...rest });
-      }
-      if (inputVariant === "TELEPHONE" || inputType === "tel") {
-        return /* @__PURE__ */ jsx66(TelephoneInput_default, { component, onSubmit, ...rest });
-      }
-      if (inputVariant === "NUMBER" || inputType === "number") {
-        return /* @__PURE__ */ jsx66(NumberInput_default, { component, onSubmit, ...rest });
-      }
-      if (inputVariant === "DATE" || inputType === "date") {
-        return /* @__PURE__ */ jsx66(DateInput_default, { component, onSubmit, ...rest });
-      }
-      if (inputVariant === "CHECKBOX" || inputType === "checkbox") {
-        return /* @__PURE__ */ jsx66(CheckboxInput_default, { component, onSubmit, ...rest });
-      }
-      return /* @__PURE__ */ jsx66(TextInput_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType3.Button: {
-      const buttonVariant = component.variant?.toUpperCase();
-      const buttonText = component.config["text"] || component.config["label"] || "";
-      if (buttonVariant === "SOCIAL") {
-        if (buttonText.toLowerCase().includes("google")) {
-          return /* @__PURE__ */ jsx66(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
-        }
-        if (buttonText.toLowerCase().includes("github")) {
-          return /* @__PURE__ */ jsx66(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
-        }
-        if (buttonText.toLowerCase().includes("microsoft")) {
-          return /* @__PURE__ */ jsx66(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
-        }
-        if (buttonText.toLowerCase().includes("facebook")) {
-          return /* @__PURE__ */ jsx66(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
-        }
-        if (buttonText.toLowerCase().includes("linkedin")) {
-          return /* @__PURE__ */ jsx66(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
-        }
-        if (buttonText.toLowerCase().includes("ethereum")) {
-          return /* @__PURE__ */ jsx66(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
-        }
-      }
-      return /* @__PURE__ */ jsx66(SubmitButton_default, { component, onSubmit, ...rest });
-    }
-    case EmbeddedFlowComponentType3.Form:
-      return /* @__PURE__ */ jsx66(FormContainer_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType3.Divider:
-      return /* @__PURE__ */ jsx66(DividerComponent_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType3.Image:
-      return /* @__PURE__ */ jsx66(ImageComponent_default, { component, onSubmit, ...rest });
-    default:
-      return /* @__PURE__ */ jsx66("div", {});
-  }
-};
-var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
-  component,
-  formErrors,
-  formValues,
-  isFormValid,
-  isLoading,
-  onInputChange,
-  touchedFields,
-  ...options
-});
-var renderSignUpComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
-  (component, index) => createSignUpOptionFromComponent(
-    component,
-    formValues,
-    touchedFields,
-    formErrors,
-    isLoading,
-    isFormValid,
-    onInputChange,
-    {
-      ...options,
-      // Use component id as key, fallback to index
-      key: component.id || index
-    }
-  )
-).filter(Boolean);
-// src/components/presentation/SignUp/transformer.ts
-import {
-  EmbeddedFlowComponentType as EmbeddedFlowComponentType4
-} from "@asgardeo/browser";
-var generateId2 = (prefix) => {
-  const suffix = Math.random().toString(36).substring(2, 6);
-  return `${prefix}_${suffix}`;
-};
-var getInputVariant2 = (type, name) => {
-  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) => {
-  let fieldType = input.type;
-  if (input.name.toLowerCase().includes("password") && input.type.toLowerCase() === "string") {
-    fieldType = "password";
-  }
-  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: EmbeddedFlowComponentType4.Input,
-    variant,
-    config: {
-      type: input.type,
-      label,
-      placeholder,
-      required: input.required,
-      identifier: input.name,
-      hint: ""
-    },
-    components: []
-  };
-};
-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: generateId2("action"),
-    type: EmbeddedFlowComponentType4.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: EmbeddedFlowComponentType4.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: EmbeddedFlowComponentType4.Form,
-      config: {},
-      components: formComponents
-    });
-  }
-  if (actionComponents.length > 0) {
-    result.push(...actionComponents);
-  }
-  return result;
+  return /* @__PURE__ */ jsx65(
+    Typography_default,
+    {
+      variant: typographyVariant,
+      style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
+      children: text
+    },
+    component.id
+  );
 };
-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;
+var Typography_default2 = TypographyComponent;
+// src/components/presentation/SignUp/SignUpOptionFactory.tsx
+import { jsx as jsx66 } from "react/jsx-runtime";
+var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
+  switch (component.type) {
+    case EmbeddedFlowComponentType4.Typography:
+      return /* @__PURE__ */ jsx66(Typography_default2, { component, onSubmit, ...rest });
+    case EmbeddedFlowComponentType4.Input:
+      const inputVariant = component.variant?.toUpperCase();
+      const inputType = component.config["type"]?.toLowerCase();
+      if (inputVariant === "EMAIL" || inputType === "email") {
+        return /* @__PURE__ */ jsx66(EmailInput_default, { component, onSubmit, ...rest });
+      }
+      if (inputVariant === "PASSWORD" || inputType === "password") {
+        return /* @__PURE__ */ jsx66(PasswordInput_default, { component, onSubmit, ...rest });
+      }
+      if (inputVariant === "TELEPHONE" || inputType === "tel") {
+        return /* @__PURE__ */ jsx66(TelephoneInput_default, { component, onSubmit, ...rest });
+      }
+      if (inputVariant === "NUMBER" || inputType === "number") {
+        return /* @__PURE__ */ jsx66(NumberInput_default, { component, onSubmit, ...rest });
+      }
+      if (inputVariant === "DATE" || inputType === "date") {
+        return /* @__PURE__ */ jsx66(DateInput_default, { component, onSubmit, ...rest });
+      }
+      if (inputVariant === "CHECKBOX" || inputType === "checkbox") {
+        return /* @__PURE__ */ jsx66(CheckboxInput_default, { component, onSubmit, ...rest });
+      }
+      return /* @__PURE__ */ jsx66(TextInput_default, { component, onSubmit, ...rest });
+    case EmbeddedFlowComponentType4.Button: {
+      const buttonVariant = component.variant?.toUpperCase();
+      const buttonText = component.config["text"] || component.config["label"] || "";
+      if (buttonVariant === "SOCIAL") {
+        if (buttonText.toLowerCase().includes("google")) {
+          return /* @__PURE__ */ jsx66(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("github")) {
+          return /* @__PURE__ */ jsx66(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("microsoft")) {
+          return /* @__PURE__ */ jsx66(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("facebook")) {
+          return /* @__PURE__ */ jsx66(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("linkedin")) {
+          return /* @__PURE__ */ jsx66(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("ethereum")) {
+          return /* @__PURE__ */ jsx66(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
-      } catch {
-        errorMessage = error.message;
       }
-    } else if (error.message) {
-      errorMessage = error.message;
+      return /* @__PURE__ */ jsx66(SubmitButton_default, { component, onSubmit, ...rest });
     }
-  } else if (typeof error === "string") {
-    errorMessage = error;
+    case EmbeddedFlowComponentType4.Form:
+      return /* @__PURE__ */ jsx66(FormContainer_default, { component, onSubmit, ...rest });
+    case EmbeddedFlowComponentType4.Divider:
+      return /* @__PURE__ */ jsx66(DividerComponent_default, { component, onSubmit, ...rest });
+    case EmbeddedFlowComponentType4.Image:
+      return /* @__PURE__ */ jsx66(ImageComponent_default, { component, onSubmit, ...rest });
+    default:
+      return /* @__PURE__ */ jsx66("div", {});
   }
-  return errorMessage;
 };
+var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
+  component,
+  formErrors,
+  formValues,
+  isFormValid,
+  isLoading,
+  onInputChange,
+  touchedFields,
+  ...options
+});
+var renderSignUpComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
+  (component, index) => createSignUpOptionFromComponent(
+    component,
+    formValues,
+    touchedFields,
+    formErrors,
+    isLoading,
+    isFormValid,
+    onInputChange,
+    {
+      ...options,
+      // Use component id as key, fallback to index
+      key: component.id || index
+    }
+  )
+).filter(Boolean);
 // src/components/presentation/SignUp/BaseSignUp.styles.ts
-import { css as css18 } from "@emotion/css";
-import { useMemo as useMemo25 } from "react";
-var useStyles18 = (theme, colorScheme) => {
-  return useMemo25(() => {
-    const signUp = css18`
+import { css as css17 } from "@emotion/css";
+import { useMemo as useMemo24 } from "react";
+var useStyles17 = (theme, colorScheme) => {
+  return useMemo24(() => {
+    const signUp = css17`
       min-width: 420px;
       margin: 0 auto;
     `;
-    const card = css18`
+    const card = css17`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       gap: calc(${theme.vars.spacing.unit} * 2);
       min-width: 420px;
     `;
-    const logoContainer = css18`
+    const logoContainer = css17`
       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 = css18`
+    const header = css17`
       gap: 0;
+      align-items: center;
     `;
-    const title = css18`
+    const title = css17`
       margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const subtitle = css18`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
+    const subtitle = css17`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
-    const messagesContainer = css18`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-    const messageItem = css18`
+    const messageItem = css17`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
-    const errorContainer = css18`
+    const errorContainer = css17`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const contentContainer = css18`
+    const contentContainer = css17`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadingContainer = css18`
+    const loadingContainer = css17`
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const loadingText = css18`
+    const loadingText = css17`
       margin-top: calc(${theme.vars.spacing.unit} * 2);
       color: ${theme.vars.colors.text.secondary};
     `;
-    const divider = css18`
+    const divider = css17`
       margin: calc(${theme.vars.spacing.unit} * 1) 0;
     `;
-    const centeredContainer = css18`
+    const centeredContainer = css17`
       text-align: center;
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const passkeyContainer = css18`
+    const passkeyContainer = css17`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const passkeyText = css18`
+    const passkeyText = css17`
       margin-top: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
-    const form = css18`
+    const form = css17`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const formDivider = css18`
+    const formDivider = css17`
       margin: calc(${theme.vars.spacing.unit} * 1) 0;
     `;
-    const authenticatorSection = css18`
+    const authenticatorSection = css17`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 1);
     `;
-    const authenticatorItem = css18`
+    const authenticatorItem = css17`
       width: 100%;
     `;
-    const noAuthenticatorCard = css18`
+    const noAuthenticatorCard = css17`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorAlert = css18`
+    const errorAlert = css17`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const messagesAlert = css18`
+    const messagesAlert = css17`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
-    const flowMessagesContainer = css18`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
+    const flowMessagesContainer = css17`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const flowMessageItem = css18`
+    const flowMessageItem = css17`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
     return {
@@ -8452,7 +8322,6 @@ var useStyles18 = (theme, colorScheme) => {
       header,
       title,
       subtitle,
-      messagesContainer,
       messageItem,
       errorContainer,
       contentContainer,
@@ -8481,16 +8350,16 @@ var useStyles18 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseSignUp_styles_default = useStyles18;
+var BaseSignUp_styles_default = useStyles17;
 // src/components/presentation/SignUp/BaseSignUp.tsx
 import { jsx as jsx67, jsxs as jsxs28 } from "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__ */ jsxs28("div", { children: [
-    /* @__PURE__ */ jsx67("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx67(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ jsx67(FlowProvider_default, { children: /* @__PURE__ */ jsx67(BaseSignUpContent, { ...props }) })
+    showLogo && /* @__PURE__ */ jsx67("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx67(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ jsx67(FlowProvider_default, { children: /* @__PURE__ */ jsx67(BaseSignUpContent, { showLogo, ...rest }) })
   ] });
 };
 var BaseSignUpContent = ({
@@ -8508,7 +8377,9 @@ var BaseSignUpContent = ({
   size = "medium",
   variant = "outlined",
   isInitialized,
-  children
+  children,
+  showTitle = true,
+  showSubtitle = true
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const { t } = useTranslation_default();
@@ -8536,7 +8407,7 @@ var BaseSignUpContent = ({
         return response;
       }
       if (response?.data && (response.data.inputs || response.data.actions)) {
-        const transformedComponents = transformSimpleToComponentDriven2(response, t);
+        const transformedComponents = transformSimpleToComponentDriven(response, t);
         return {
           ...response,
           data: {
@@ -8901,9 +8772,11 @@ var BaseSignUpContent = ({
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs28(Card_default, { className: cx21(containerClasses, styles.card), variant, children: [
-    /* @__PURE__ */ jsxs28(Card_default.Header, { className: styles.header, children: [
-      /* @__PURE__ */ jsx67(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
-      /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") }),
+    (showTitle || showSubtitle) && /* @__PURE__ */ jsxs28(Card_default.Header, { className: styles.header, children: [
+      showTitle && /* @__PURE__ */ jsx67(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
+      showSubtitle && /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") })
+    ] }),
+    /* @__PURE__ */ jsxs28(Card_default.Content, { children: [
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx67(
         Alert_default,
         {
@@ -8912,9 +8785,9 @@ var BaseSignUpContent = ({
           children: /* @__PURE__ */ jsx67(Alert_default.Description, { children: message.message })
         },
         message.id || index
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx67(Card_default.Content, { children: /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx67(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) }) })
+      )) }),
+      /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx67(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) })
+    ] })
   ] });
 };
 var BaseSignUp_default = BaseSignUp;
@@ -8938,9 +8811,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: EmbeddedFlowType2.Registration,
-      ...platform === Platform5.AsgardeoV2 && applicationId && { applicationId }
+      ...platform === Platform5.AsgardeoV2 && effectiveApplicationId && { applicationId: effectiveApplicationId }
     };
     return await signUp(initialPayload);
   };
@@ -8967,6 +8843,9 @@ var SignUp = ({
       size,
       isInitialized,
       children,
+      showLogo: true,
+      showTitle: platform === Platform5.AsgardeoV2,
+      showSubtitle: platform === Platform5.AsgardeoV2,
       ...rest
     }
   );
@@ -9044,14 +8923,14 @@ var getMappedUserProfileValue_default = getMappedUserProfileValue;
 // src/components/primitives/Avatar/Avatar.tsx
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22, bem as bem16 } from "@asgardeo/browser";
 import { cx as cx22 } from "@emotion/css";
-import { useMemo as useMemo27 } from "react";
+import { useMemo as useMemo26 } from "react";
 // src/components/primitives/Avatar/Avatar.styles.ts
-import { css as css19 } from "@emotion/css";
-import { useMemo as useMemo26 } from "react";
-var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
-  return useMemo26(() => {
-    const baseAvatar = css19`
+import { css as css18 } from "@emotion/css";
+import { useMemo as useMemo25 } from "react";
+var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
+  return useMemo25(() => {
+    const baseAvatar = css18`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
       border: ${backgroundColor ? "none" : `1px solid ${theme.vars.colors.border}`};
@@ -9067,19 +8946,19 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
       width: ${size}px;
     `;
     const variantStyles = {
-      circular: css19`
+      circular: css18`
         border-radius: 50%;
       `,
-      square: css19`
+      square: css18`
         border-radius: 8px;
       `
     };
-    const imageStyles = css19`
+    const imageStyles = css18`
       height: 100%;
       object-fit: cover;
       width: 100%;
     `;
-    const skeletonStyles = css19`
+    const skeletonStyles = css18`
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
@@ -9096,7 +8975,7 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
         }
       }
     `;
-    const iconStyles = css19`
+    const iconStyles = css18`
       width: 60%;
       height: 60%;
       fill: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.secondary};
@@ -9111,7 +8990,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
 import { jsx as jsx73 } from "react/jsx-runtime";
@@ -9144,7 +9023,7 @@ var Avatar = ({
     const colors = generateColor(seed);
     return `linear-gradient(${angle}deg, ${colors})`;
   };
-  const backgroundColor = useMemo27(() => {
+  const backgroundColor = useMemo26(() => {
     if (!name || imageUrl) {
       return void 0;
     }
@@ -9307,18 +9186,18 @@ var X = (props) => /* @__PURE__ */ jsxs32(
 var X_default = X;
 // src/components/primitives/Dialog/Dialog.styles.ts
-import { css as css20 } from "@emotion/css";
-import { useMemo as useMemo28 } from "react";
-var useStyles20 = (theme, colorScheme) => {
-  return useMemo28(() => {
-    const overlay = css20`
+import { css as css19 } from "@emotion/css";
+import { useMemo as useMemo27 } from "react";
+var useStyles19 = (theme, colorScheme) => {
+  return useMemo27(() => {
+    const overlay = css19`
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
     `;
-    const content = css20`
+    const content = css19`
       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)"};
@@ -9326,7 +9205,7 @@ var useStyles20 = (theme, colorScheme) => {
       overflow-y: auto;
       z-index: 10000;
     `;
-    const dropdownContent = css20`
+    const dropdownContent = css19`
       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)"};
@@ -9336,23 +9215,23 @@ var useStyles20 = (theme, colorScheme) => {
       overflow-y: auto;
       z-index: 10000;
     `;
-    const header = css20`
+    const header = css19`
       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 = css20`
+    const headerTitle = css19`
       margin: 0;
       font-size: 1.2rem;
       font-weight: 600;
       color: ${theme.vars.colors.text.primary};
     `;
-    const contentBody = css20`
+    const contentBody = css19`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const description = css20`
+    const description = css19`
       margin: 0;
       color: ${theme.vars.colors.text.secondary};
       font-size: ${theme.vars.typography.fontSizes.sm};
@@ -9369,7 +9248,7 @@ var useStyles20 = (theme, colorScheme) => {
     };
   }, [theme, colorScheme]);
 };
-var Dialog_styles_default = useStyles20;
+var Dialog_styles_default = useStyles19;
 // src/components/primitives/Dialog/Dialog.tsx
 import { jsx as jsx78, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -9563,36 +9442,36 @@ import { cx as cx24 } from "@emotion/css";
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24, bem as bem18 } from "@asgardeo/browser";
 // src/components/primitives/MultiInput/MultiInput.styles.ts
-import { css as css21 } from "@emotion/css";
-import { useMemo as useMemo29 } from "react";
-var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => {
-  return useMemo29(() => {
-    const container = css21`
+import { css as css20 } from "@emotion/css";
+import { useMemo as useMemo28 } from "react";
+var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => {
+  return useMemo28(() => {
+    const container = css20`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-    const inputRow = css21`
+    const inputRow = css20`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       position: relative;
     `;
-    const inputWrapper = css21`
+    const inputWrapper = css20`
       flex: 1;
     `;
-    const plusIcon = css21`
+    const plusIcon = css20`
       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 = css21`
+    const listContainer = css20`
       display: flex;
       flex-direction: column;
       gap: 0;
     `;
-    const listItem = css21`
+    const listItem = css20`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -9607,11 +9486,11 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         margin-bottom: 0;
       }
     `;
-    const listItemText = css21`
+    const listItemText = css20`
       flex: 1;
       word-break: break-word;
     `;
-    const removeButton = css21`
+    const removeButton = css20`
       padding: calc(${theme.vars.spacing.unit} / 2);
       min-width: auto;
       color: ${theme.vars.colors.error.main};
@@ -9631,7 +9510,7 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         opacity: 0.6;
       }
     `;
-    const icon = css21`
+    const icon = css20`
       width: 16px;
       height: 16px;
       stroke: currentColor;
@@ -9653,7 +9532,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
 import { jsx as jsx79, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -9798,15 +9677,15 @@ var MultiInput = ({
 var MultiInput_default = MultiInput;
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
-import { css as css22 } from "@emotion/css";
-import { useMemo as useMemo30 } from "react";
+import { css as css21 } from "@emotion/css";
+import { useMemo as useMemo29 } from "react";
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25 } from "@asgardeo/browser";
-var useStyles22 = (theme, colorScheme) => {
-  const valuePlaceholder = css22`
+var useStyles21 = (theme, colorScheme) => {
+  const valuePlaceholder = css21`
     font-style: italic;
     opacity: 0.7;
   `;
-  const editButton = css22`
+  const editButton = css21`
     font-style: italic;
     text-decoration: underline;
     opacity: 0.7;
@@ -9817,19 +9696,19 @@ var useStyles22 = (theme, colorScheme) => {
       background-color: transparent;
     }
   `;
-  const fieldInner = css22`
+  const fieldInner = css21`
     flex: 1;
     display: flex;
     align-items: center;
     gap: ${theme.vars.spacing.unit};
   `;
-  const fieldActions = css22`
+  const fieldActions = css21`
     display: flex;
     gap: calc(${theme.vars.spacing.unit} / 2);
     align-items: center;
     margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
   `;
-  const complexTextarea = css22`
+  const complexTextarea = css21`
     min-height: 60px;
     width: 100%;
     padding: 8px;
@@ -9837,57 +9716,57 @@ var useStyles22 = (theme, colorScheme) => {
     border-radius: ${theme.vars.borderRadius.small};
     resize: vertical;
   `;
-  const objectKey = css22`
+  const objectKey = css21`
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  const objectValue = css22`
+  const objectValue = css21`
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  return useMemo30(() => {
-    const root = css22`
+  return useMemo29(() => {
+    const root = css21`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
     `;
-    const card = css22`
+    const card = css21`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
     `;
-    const header = css22`
+    const header = css21`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
       margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const profileInfo = css22`
+    const profileInfo = css21`
       flex: 1;
     `;
-    const name = css22`
+    const name = css21`
       font-size: 1.5rem;
       font-weight: 600;
       margin: 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const infoContainer = css22`
+    const infoContainer = css21`
       display: flex;
       flex-direction: column;
     `;
-    const info = css22`
+    const info = css21`
       padding: calc(${theme.vars.spacing.unit} * 1.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const field = css22`
+    const field = css21`
       display: flex;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} / 2) 0;
       min-height: 28px;
     `;
-    const lastField = css22`
+    const lastField = css21`
       border-bottom: none;
     `;
-    const label = css22`
+    const label = css21`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
@@ -9896,7 +9775,7 @@ var useStyles22 = (theme, colorScheme) => {
       line-height: 28px;
       text-align: start;
     `;
-    const value = css22`
+    const value = css21`
       color: ${theme.vars.colors.text.primary};
       flex: 1;
       display: inline-block;
@@ -9929,10 +9808,10 @@ var useStyles22 = (theme, colorScheme) => {
         border-color: ${theme.vars.colors.border};
       }
     `;
-    const popup = css22`
+    const popup = css21`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const alert = css22`
+    const alert = css21`
       margin-bottom: calc(${theme.vars.spacing.unit} * 3);
     `;
     return {
@@ -9968,7 +9847,7 @@ var useStyles22 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseUserProfile_styles_default = useStyles22;
+var BaseUserProfile_styles_default = useStyles21;
 // src/utils/getDisplayName.ts
 var getDisplayName = (mergedMappings, user) => {
@@ -10492,11 +10371,11 @@ import { cx as cx26 } from "@emotion/css";
 import { useState as useState21 } from "react";
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
-import { css as css23 } from "@emotion/css";
-import { useMemo as useMemo31 } from "react";
-var useStyles23 = (theme, colorScheme) => {
-  return useMemo31(() => {
-    const trigger = css23`
+import { css as css22 } from "@emotion/css";
+import { useMemo as useMemo30 } from "react";
+var useStyles22 = (theme, colorScheme) => {
+  return useMemo30(() => {
+    const trigger = css22`
       display: inline-flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 0.75);
@@ -10523,7 +10402,7 @@ var useStyles23 = (theme, colorScheme) => {
         box-shadow: none;
       }
     `;
-    const userName = css23`
+    const userName = css22`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -10532,7 +10411,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const dropdownContent = css23`
+    const dropdownContent = css22`
       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);
@@ -10542,12 +10421,12 @@ var useStyles23 = (theme, colorScheme) => {
       z-index: 1000;
       overflow: hidden;
     `;
-    const dropdownMenu = css23`
+    const dropdownMenu = css22`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-    const menuItem = css23`
+    const menuItem = css22`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -10575,7 +10454,7 @@ var useStyles23 = (theme, colorScheme) => {
         box-shadow: none;
       }
     `;
-    const menuItemAnchor = css23`
+    const menuItemAnchor = css22`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -10596,18 +10475,18 @@ var useStyles23 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
       }
     `;
-    const divider = css23`
+    const divider = css22`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const dropdownHeader = css23`
+    const dropdownHeader = css22`
       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 = css23`
+    const headerInfo = css22`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -10617,7 +10496,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerName = css23`
+    const headerName = css22`
       color: ${theme.vars.colors.text.primary};
       font-size: 1rem;
       font-weight: 500;
@@ -10626,7 +10505,7 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerEmail = css23`
+    const headerEmail = css22`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
@@ -10634,14 +10513,14 @@ var useStyles23 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const loadingContainer = css23`
+    const loadingContainer = css22`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `;
-    const loadingText = css23`
+    const loadingText = css22`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `;
@@ -10673,7 +10552,7 @@ var useStyles23 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseUserDropdown_styles_default = useStyles23;
+var BaseUserDropdown_styles_default = useStyles22;
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
 import { jsx as jsx82, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -10985,15 +10864,15 @@ ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
-import { css as css24 } from "@emotion/css";
-import { useMemo as useMemo32 } from "react";
-var useStyles24 = (theme, colorScheme) => {
-  return useMemo32(() => {
-    const root = css24`
+import { css as css23 } from "@emotion/css";
+import { useMemo as useMemo31 } from "react";
+var useStyles23 = (theme, colorScheme) => {
+  return useMemo31(() => {
+    const root = css23`
       display: inline-block;
       position: relative;
     `;
-    const trigger = css24`
+    const trigger = css23`
       display: inline-flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
@@ -11013,7 +10892,7 @@ var useStyles24 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.background.surface};
       }
     `;
-    const triggerLabel = css24`
+    const triggerLabel = css23`
       color: ${theme.vars.colors.text.primary};
       font-weight: 500;
       overflow: hidden;
@@ -11021,7 +10900,7 @@ var useStyles24 = (theme, colorScheme) => {
       white-space: nowrap;
       flex: 1;
     `;
-    const content = css24`
+    const content = css23`
       min-width: 280px;
       max-width: 400px;
       background-color: ${theme.vars.colors.background.surface};
@@ -11031,13 +10910,13 @@ var useStyles24 = (theme, colorScheme) => {
       outline: none;
       z-index: 1000;
     `;
-    const header = css24`
+    const header = css23`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);
     `;
-    const headerInfo = css24`
+    const headerInfo = css23`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11045,7 +10924,7 @@ var useStyles24 = (theme, colorScheme) => {
       min-width: 0;
       overflow: hidden;
     `;
-    const headerName = css24`
+    const headerName = css23`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11054,7 +10933,7 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerMeta = css24`
+    const headerMeta = css23`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11062,7 +10941,7 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const headerRole = css24`
+    const headerRole = css23`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11071,16 +10950,16 @@ var useStyles24 = (theme, colorScheme) => {
       white-space: nowrap;
       text-transform: capitalize;
     `;
-    const manageButton = css24`
+    const manageButton = css23`
       min-width: auto;
       margin-inline-start: auto;
     `;
-    const menu = css24`
+    const menu = css23`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-    const menuItem = css24`
+    const menuItem = css23`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -11105,11 +10984,11 @@ var useStyles24 = (theme, colorScheme) => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
       }
     `;
-    const menuDivider = css24`
+    const menuDivider = css23`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const organizationInfo = css24`
+    const organizationInfo = css23`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -11117,7 +10996,7 @@ var useStyles24 = (theme, colorScheme) => {
       min-width: 0;
       overflow: hidden;
     `;
-    const organizationName = css24`
+    const organizationName = css23`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -11126,7 +11005,7 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const organizationMeta = css24`
+    const organizationMeta = css23`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.75rem;
       margin: 0;
@@ -11134,40 +11013,40 @@ var useStyles24 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-    const loadingContainer = css24`
+    const loadingContainer = css23`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `;
-    const loadingText = css24`
+    const loadingText = css23`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `;
-    const errorContainer = css24`
+    const errorContainer = css23`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorText = css24`
+    const errorText = css23`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       text-align: center;
     `;
-    const sectionHeader = css24`
+    const sectionHeader = css23`
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: ${theme.vars.colors.text.secondary};
     `;
-    const sectionHeaderContainer = css24`
+    const sectionHeaderContainer = css23`
       border-top: none;
       border-bottom: none;
       padding-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const roleCapitalized = css24`
+    const roleCapitalized = css23`
       text-transform: capitalize;
     `;
     return {
@@ -11207,7 +11086,7 @@ var useStyles24 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseOrganizationSwitcher_styles_default = useStyles24;
+var BaseOrganizationSwitcher_styles_default = useStyles23;
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
 import { Fragment as Fragment17, jsx as jsx87, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -11474,50 +11353,50 @@ import { cx as cx28 } from "@emotion/css";
 import { useState as useState24 } from "react";
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
-import { css as css25 } from "@emotion/css";
-import { useMemo as useMemo33 } from "react";
-var useStyles25 = (theme, colorScheme) => {
-  return useMemo33(() => {
-    const root = css25`
+import { css as css24 } from "@emotion/css";
+import { useMemo as useMemo32 } from "react";
+var useStyles24 = (theme, colorScheme) => {
+  return useMemo32(() => {
+    const root = css24`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
       margin: 0 auto;
     `;
-    const card = css25`
+    const card = css24`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-    const content = css25`
+    const content = css24`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const form = css25`
+    const form = css24`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
       width: 100%;
     `;
-    const header = css25`
+    const header = css24`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
       margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const field = css25`
+    const field = css24`
       display: flex;
       align-items: center;
       padding: ${theme.vars.spacing.unit} 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
       min-height: 32px;
     `;
-    const fieldGroup = css25`
+    const fieldGroup = css24`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
     `;
-    const textarea = css25`
+    const textarea = css24`
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${theme.vars.colors.border};
@@ -11539,28 +11418,28 @@ var useStyles25 = (theme, colorScheme) => {
         cursor: not-allowed;
       }
     `;
-    const textareaError = css25`
+    const textareaError = css24`
       border-color: ${theme.vars.colors.error.main};
     `;
-    const input = css25``;
-    const avatarContainer = css25`
+    const input = css24``;
+    const avatarContainer = css24`
       align-items: flex-start;
       display: flex;
       gap: calc(${theme.vars.spacing.unit} * 2);
       margin-bottom: ${theme.vars.spacing.unit};
     `;
-    const actions = css25`
+    const actions = css24`
       display: flex;
       gap: ${theme.vars.spacing.unit};
       justify-content: flex-end;
       padding-top: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const infoContainer = css25`
+    const infoContainer = css24`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-    const value = css25`
+    const value = css24`
       color: ${theme.vars.colors.text.primary};
       flex: 1;
       display: flex;
@@ -11570,10 +11449,10 @@ var useStyles25 = (theme, colorScheme) => {
       min-height: 32px;
       line-height: 32px;
     `;
-    const popup = css25`
+    const popup = css24`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const errorAlert = css25`
+    const errorAlert = css24`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     return {
@@ -11609,7 +11488,7 @@ var useStyles25 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseCreateOrganization_styles_default = useStyles25;
+var BaseCreateOrganization_styles_default = useStyles24;
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 import { jsx as jsx88, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -11869,30 +11748,30 @@ import { cx as cx29 } from "@emotion/css";
 import { useState as useState26, useCallback as useCallback14 } from "react";
 // src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
-import { css as css26 } from "@emotion/css";
-import { useMemo as useMemo34 } from "react";
-var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
-  return useMemo34(() => {
-    const container = css26`
+import { css as css25 } from "@emotion/css";
+import { useMemo as useMemo33 } from "react";
+var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
+  return useMemo33(() => {
+    const container = css25`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const label = css26`
+    const label = css25`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.primary};
       margin-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const requiredIndicator = css26`
+    const requiredIndicator = css25`
       color: ${theme.vars.colors.error.main};
     `;
-    const pairsList = css26`
+    const pairsList = css25`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
     `;
-    const pairRow = css26`
+    const pairRow = css25`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -11905,11 +11784,11 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
         background-color: ${theme.vars.colors.action.hover};
       }
     `;
-    const pairInput = css26`
+    const pairInput = css25`
       flex: 1;
       min-width: 0;
     `;
-    const addRow = css26`
+    const addRow = css25`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -11919,7 +11798,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
       background-color: transparent;
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-    const removeButton = css26`
+    const removeButton = css25`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -11942,7 +11821,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
         opacity: 0.6;
       }
     `;
-    const addButton = css26`
+    const addButton = css25`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -11965,39 +11844,39 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
         opacity: 0.6;
       }
     `;
-    const helperText = css26`
+    const helperText = css25`
       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 = css26`
+    const emptyState = css25`
       padding: ${theme.vars.spacing.unit};
       text-align: center;
       color: ${theme.vars.colors.text.secondary};
       font-style: italic;
       font-size: 0.75rem;
     `;
-    const readOnlyPair = css26`
+    const readOnlyPair = css25`
       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 = css26`
+    const readOnlyKey = css25`
       font-size: 0.75rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
       min-width: 80px;
       flex-shrink: 0;
     `;
-    const readOnlyValue = css26`
+    const readOnlyValue = css25`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.primary};
       word-break: break-word;
       flex: 1;
     `;
-    const counterText = css26`
+    const counterText = css25`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);
@@ -12021,7 +11900,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
 import { jsx as jsx90, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -12231,48 +12110,48 @@ var KeyValueInput = ({
 var KeyValueInput_default = KeyValueInput;
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
-import { css as css27 } from "@emotion/css";
-import { useMemo as useMemo35 } from "react";
-var useStyles27 = (theme, colorScheme) => {
-  return useMemo35(() => {
+import { css as css26 } from "@emotion/css";
+import { useMemo as useMemo34 } from "react";
+var useStyles26 = (theme, colorScheme) => {
+  return useMemo34(() => {
     return {
-      root: css27`
+      root: css26`
         padding: calc(${theme.vars.spacing.unit} * 4);
         min-width: 600px;
         margin: 0 auto;
       `,
-      card: css27`
+      card: css26`
         background: ${theme.vars.colors.background.surface};
         border-radius: ${theme.vars.borderRadius.large};
       `,
-      header: css27`
+      header: css26`
         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: css27`
+      orgInfo: css26`
         flex: 1;
       `,
-      name: css27`
+      name: css26`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
       `,
-      handle: css27`
+      handle: css26`
         font-size: 1rem;
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
       `,
-      infoContainer: css27`
+      infoContainer: css26`
         display: flex;
         flex-direction: column;
         gap: ${theme.vars.spacing.unit};
       `,
-      field: css27`
+      field: css26`
         display: flex;
         align-items: flex-start;
         padding: calc(${theme.vars.spacing.unit} / 2) 0;
@@ -12280,21 +12159,21 @@ var useStyles27 = (theme, colorScheme) => {
         min-height: 28px;
         gap: ${theme.vars.spacing.unit};
       `,
-      fieldLast: css27`
+      fieldLast: css26`
         border-bottom: none;
       `,
-      fieldContent: css27`
+      fieldContent: css26`
         flex: 1;
         display: flex;
         align-items: center;
         gap: ${theme.vars.spacing.unit};
       `,
-      fieldActions: css27`
+      fieldActions: css26`
         display: flex;
         align-items: center;
         gap: calc(${theme.vars.spacing.unit} / 2);
       `,
-      label: css27`
+      label: css26`
         font-size: 0.875rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
@@ -12302,7 +12181,7 @@ var useStyles27 = (theme, colorScheme) => {
         flex-shrink: 0;
         line-height: 28px;
       `,
-      value: css27`
+      value: css26`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
         display: flex;
@@ -12313,11 +12192,11 @@ var useStyles27 = (theme, colorScheme) => {
         line-height: 28px;
         word-break: break-word;
       `,
-      valueEmpty: css27`
+      valueEmpty: css26`
         font-style: italic;
         opacity: 0.7;
       `,
-      statusBadge: css27`
+      statusBadge: css26`
         padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
         border-radius: ${theme.vars.borderRadius.small};
         font-size: 0.75rem;
@@ -12326,12 +12205,12 @@ var useStyles27 = (theme, colorScheme) => {
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
-      permissionsList: css27`
+      permissionsList: css26`
         display: flex;
         flex-wrap: wrap;
         gap: calc(${theme.vars.spacing.unit} / 2);
       `,
-      permissionBadge: css27`
+      permissionBadge: css26`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
         border-radius: ${theme.vars.borderRadius.small};
         font-size: 0.75rem;
@@ -12339,52 +12218,52 @@ var useStyles27 = (theme, colorScheme) => {
         color: ${theme.vars.colors.primary.contrastText};
         border: 1px solid ${theme.vars.colors.border};
       `,
-      attributesList: css27`
+      attributesList: css26`
         display: flex;
         flex-direction: column;
         gap: calc(${theme.vars.spacing.unit} / 4);
       `,
-      attributeItem: css27`
+      attributeItem: css26`
         display: flex;
         gap: ${theme.vars.spacing.unit};
         padding: calc(${theme.vars.spacing.unit} / 4) 0;
         align-items: center;
       `,
-      attributeKey: css27`
+      attributeKey: css26`
         font-size: 0.75rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
         min-width: 80px;
         flex-shrink: 0;
       `,
-      attributeValue: css27`
+      attributeValue: css26`
         font-size: 0.75rem;
         color: ${theme.vars.colors.text.primary};
         word-break: break-word;
         flex: 1;
       `,
-      popup: css27`
+      popup: css26`
         padding: calc(${theme.vars.spacing.unit} * 2);
       `,
-      editButton: css27`
+      editButton: css26`
         min-width: auto;
         padding: calc(${theme.vars.spacing.unit} / 2);
         min-height: auto;
       `,
-      placeholderButton: css27`
+      placeholderButton: css26`
         font-style: italic;
         text-decoration: underline;
         opacity: 0.7;
         padding: 0;
         min-height: auto;
       `,
-      fieldInput: css27`
+      fieldInput: css26`
         margin-bottom: 0;
       `
     };
   }, [theme, colorScheme]);
 };
-var BaseOrganizationProfile_styles_default = useStyles27;
+var BaseOrganizationProfile_styles_default = useStyles26;
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 import { Fragment as Fragment19, jsx as jsx91, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -12809,21 +12688,21 @@ import { useEffect as useEffect16, useState as useState29 } from "react";
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 import { cx as cx31 } from "@emotion/css";
-import { useMemo as useMemo37 } from "react";
+import { useMemo as useMemo36 } from "react";
 // src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
-import { css as css28 } from "@emotion/css";
-import { useMemo as useMemo36 } from "react";
-var useStyles28 = (theme, colorScheme) => {
-  return useMemo36(() => {
-    const root = css28`
+import { css as css27 } from "@emotion/css";
+import { useMemo as useMemo35 } from "react";
+var useStyles27 = (theme, colorScheme) => {
+  return useMemo35(() => {
+    const root = css27`
       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 = css28`
+    const header = css27`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12831,21 +12710,21 @@ var useStyles28 = (theme, colorScheme) => {
       padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-    const headerInfo = css28`
+    const headerInfo = css27`
       flex: 1;
     `;
-    const title = css28`
+    const title = css27`
       font-size: 1.5rem;
       font-weight: 600;
       margin: 0 0 8px 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const subtitle = css28`
+    const subtitle = css27`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
     `;
-    const refreshButton = css28`
+    const refreshButton = css27`
       background-color: ${theme.vars.colors.background.surface};
       border: 1px solid ${theme.vars.colors.border};
       border-radius: ${theme.vars.borderRadius.small};
@@ -12859,12 +12738,12 @@ var useStyles28 = (theme, colorScheme) => {
         border-color: ${theme.vars.colors.primary.main};
       }
     `;
-    const listContainer = css28`
+    const listContainer = css27`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 1.5);
     `;
-    const organizationItem = css28`
+    const organizationItem = css27`
       border: 1px solid ${theme.vars.colors.border};
       border-radius: ${theme.vars.borderRadius.medium};
       display: flex;
@@ -12877,46 +12756,46 @@ var useStyles28 = (theme, colorScheme) => {
         box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;
       }
     `;
-    const organizationContent = css28`
+    const organizationContent = css27`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 2);
       flex: 1;
     `;
-    const organizationInfo = css28`
+    const organizationInfo = css27`
       flex: 1;
     `;
-    const organizationName = css28`
+    const organizationName = css27`
       font-size: 1.125rem;
       font-weight: 600;
       margin: 0 0 4px 0;
       color: ${theme.vars.colors.text.primary};
     `;
-    const organizationHandle = css28`
+    const organizationHandle = css27`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0 0 4px 0;
       font-family: monospace;
     `;
-    const organizationStatus = css28`
+    const organizationStatus = css27`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
     `;
-    const statusText = css28`
+    const statusText = css27`
       font-weight: 500;
     `;
-    const statusTextActive = css28`
+    const statusTextActive = css27`
       color: ${theme.vars.colors.success.main};
     `;
-    const statusTextInactive = css28`
+    const statusTextInactive = css27`
       color: ${theme.vars.colors.error.main};
     `;
-    const organizationActions = css28`
+    const organizationActions = css27`
       display: flex;
       align-items: center;
     `;
-    const badge = css28`
+    const badge = css27`
       border-radius: ${theme.vars.borderRadius.large};
       font-size: 0.75rem;
       font-weight: 500;
@@ -12924,15 +12803,15 @@ var useStyles28 = (theme, colorScheme) => {
       text-transform: uppercase;
       letter-spacing: 0.5px;
     `;
-    const badgeSuccess = css28`
+    const badgeSuccess = css27`
       background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);
       color: ${theme.vars.colors.success.main};
     `;
-    const badgeError = css28`
+    const badgeError = css27`
       background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
       color: ${theme.vars.colors.error.main};
     `;
-    const loadingContainer = css28`
+    const loadingContainer = css27`
       padding: calc(${theme.vars.spacing.unit} * 4);
       text-align: center;
       display: flex;
@@ -12940,25 +12819,25 @@ var useStyles28 = (theme, colorScheme) => {
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadingText = css28`
+    const loadingText = css27`
       margin-top: ${theme.vars.spacing.unit};
     `;
-    const errorContainer = css28`
+    const errorContainer = css27`
       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 = css28`
+    const emptyContainer = css27`
       padding: calc(${theme.vars.spacing.unit} * 4);
       text-align: center;
     `;
-    const emptyText = css28`
+    const emptyText = css27`
       color: ${theme.vars.colors.text.secondary};
       font-size: 1rem;
     `;
-    const loadMoreButton = css28`
+    const loadMoreButton = css27`
       background-color: ${theme.vars.colors.primary.main};
       border: none;
       border-radius: ${theme.vars.borderRadius.medium};
@@ -12979,13 +12858,13 @@ var useStyles28 = (theme, colorScheme) => {
         opacity: 0.6;
       }
     `;
-    const errorMargin = css28`
+    const errorMargin = css27`
       margin-top: calc(${theme.vars.spacing.unit} * 2);
     `;
-    const loadMoreMargin = css28`
+    const loadMoreMargin = css27`
       margin-top: calc(${theme.vars.spacing.unit} * 3);
     `;
-    const popupContent = css28`
+    const popupContent = css27`
       padding: ${theme.vars.spacing.unit};
     `;
     return {
@@ -13035,7 +12914,7 @@ var useStyles28 = (theme, colorScheme) => {
     colorScheme
   ]);
 };
-var BaseOrganizationList_styles_default = useStyles28;
+var BaseOrganizationList_styles_default = useStyles27;
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 import { jsx as jsx93, jsxs as jsxs43 } from "react/jsx-runtime";
@@ -13116,7 +12995,7 @@ var BaseOrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationList_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const organizationsWithSwitchAccess = useMemo37(() => {
+  const organizationsWithSwitchAccess = useMemo36(() => {
     if (!allOrganizations?.organizations) {
       return [];
     }
@@ -13186,11 +13065,11 @@ var BaseOrganizationList = ({
 var BaseOrganizationList_default = BaseOrganizationList;
 // src/components/presentation/OrganizationList/OrganizationList.styles.ts
-import { css as css29 } from "@emotion/css";
-import { useMemo as useMemo38 } from "react";
-var useStyles29 = (theme, colorScheme) => {
-  return useMemo38(() => {
-    const cssOrganizationListWrapper = css29`
+import { css as css28 } from "@emotion/css";
+import { useMemo as useMemo37 } from "react";
+var useStyles28 = (theme, colorScheme) => {
+  return useMemo37(() => {
+    const cssOrganizationListWrapper = css28`
       /* Container wrapper styles for OrganizationList component */
       width: 100%;
@@ -13221,11 +13100,11 @@ var useStyles29 = (theme, colorScheme) => {
     `;
     return {
       root: cssOrganizationListWrapper,
-      container: css29`
+      container: css28`
         position: relative;
         width: 100%;
       `,
-      errorState: css29`
+      errorState: css28`
         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};
@@ -13233,7 +13112,7 @@ var useStyles29 = (theme, colorScheme) => {
         color: ${theme.vars.colors.error.main};
         text-align: center;
       `,
-      loadingOverlay: css29`
+      loadingOverlay: css28`
         position: absolute;
         inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
@@ -13246,7 +13125,7 @@ var useStyles29 = (theme, colorScheme) => {
     };
   }, [theme, colorScheme]);
 };
-var OrganizationList_styles_default = useStyles29;
+var OrganizationList_styles_default = useStyles28;
 // src/components/presentation/OrganizationList/OrganizationList.tsx
 import { jsx as jsx94 } from "react/jsx-runtime";