@asgardeo/react 0.25.6 → 0.25.8

package/dist/index.js

@@ -3790,7 +3790,6 @@ import {
   EmbeddedSignInFlowStatus,
   EmbeddedSignInFlowAuthenticatorPromptType,
   ApplicationNativeAuthenticationConstants as ApplicationNativeAuthenticationConstants3,
-  AsgardeoAPIError,
   withVendorCSSClassPrefix as withVendorCSSClassPrefix19,
   handleWebAuthnAuthentication,
   createPackageComponentLogger as createPackageComponentLogger5
@@ -6150,6 +6149,40 @@ var createSignInOptionFromAuthenticator = (authenticator, formValues, touchedFie
   ...options
 });
 
+// src/utils/resolveFlowErrorMessage.ts
+var resolveFlowErrorMessage = (error, fallback) => {
+  let raw = "";
+  if (error instanceof Error) {
+    raw = error.message;
+  } else if (typeof error === "string") {
+    raw = error;
+  } else if (error && typeof error === "object") {
+    const { description, message } = error;
+    raw = typeof description === "string" && description || typeof message === "string" && message || "";
+  }
+  if (!raw) {
+    return fallback;
+  }
+  const jsonStart = raw.indexOf("{");
+  const jsonEnd = raw.lastIndexOf("}");
+  if (jsonStart !== -1 && jsonEnd > jsonStart) {
+    try {
+      const payload = JSON.parse(raw.slice(jsonStart, jsonEnd + 1));
+      const extracted = payload?.description || payload?.message;
+      if (typeof extracted === "string" && extracted) {
+        return extracted;
+      }
+    } catch {
+    }
+  }
+  const messagePart = raw.match(/Message:\s*([\s\S]+)$/);
+  if (messagePart?.[1]?.trim()) {
+    return messagePart[1].trim();
+  }
+  return raw;
+};
+var resolveFlowErrorMessage_default = resolveFlowErrorMessage;
+
 // src/components/primitives/Alert/Alert.tsx
 import { withVendorCSSClassPrefix as withVendorCSSClassPrefix15, bem as bem12 } from "@asgardeo/browser";
 import { cx as cx15 } from "@emotion/css";
@@ -7268,7 +7301,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t("errors.signin.flow.failure");
+      const errorMessage = resolveFlowErrorMessage_default(err, t("errors.signin.flow.failure"));
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -7477,7 +7510,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err?.message : "Authenticator selection failed";
+      const errorMessage = resolveFlowErrorMessage_default(err, "Authenticator selection failed");
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -7563,7 +7596,7 @@ var BaseSignInContent = ({
           );
         }
       } catch (err) {
-        const errorMessage = err instanceof AsgardeoAPIError ? err.message : t("errors.signin.initialization");
+        const errorMessage = resolveFlowErrorMessage_default(err, t("errors.signin.initialization"));
         setError(errorMessage);
         onError?.(err);
       } finally {
@@ -10426,6 +10459,7 @@ import { useEffect as useEffect19, useState as useState21, useCallback as useCal
 
 // src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
 import { EmbeddedFlowComponentType as EmbeddedFlowComponentType2 } from "@asgardeo/browser";
+import { cloneElement as cloneElement2 } from "react";
 
 // src/components/adapters/CheckboxInput.tsx
 import { FieldType as FieldType8 } from "@asgardeo/browser";
@@ -10545,9 +10579,10 @@ var FormContainer = (props) => {
       }
     };
     return /* @__PURE__ */ jsx76("form", { onSubmit: handleFormSubmit, style: { display: "flex", flexDirection: "column" }, children: component.components.map(
-      (childComponent) => createSignUpComponent({
+      (childComponent, index) => createSignUpComponent({
         ...props,
-        component: childComponent
+        component: childComponent,
+        key: childComponent.id || index
       })
     ) }, component.id);
   }
@@ -10846,7 +10881,7 @@ var Typography_default2 = TypographyComponent;
 
 // src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
 import { jsx as jsx80 } from "react/jsx-runtime";
-var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
+var createSignUpElement = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
     case EmbeddedFlowComponentType2.Typography:
       return /* @__PURE__ */ jsx80(Typography_default2, { component, onSubmit, ...rest });
@@ -10910,6 +10945,10 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
       return /* @__PURE__ */ jsx80("div", {});
   }
 };
+var createSignUpComponent = ({ key, ...props }) => {
+  const element = createSignUpElement(props);
+  return key === void 0 || key === null ? element : cloneElement2(element, { key });
+};
 var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
   component,
   formErrors,
@@ -11081,6 +11120,13 @@ var logger8 = createPackageComponentLogger7(
   "@asgardeo/react",
   "BaseSignUp"
 );
+var resolveAlertVariant = (type) => {
+  const normalized = type?.toLowerCase() ?? "";
+  if (normalized === "success" || normalized === "error" || normalized === "warning") {
+    return normalized;
+  }
+  return "info";
+};
 var BaseSignUpContent = ({
   afterSignUpUrl,
   onInitialize,
@@ -11107,29 +11153,7 @@ var BaseSignUpContent = ({
   const styles = BaseSignUp_styles_default(theme, colorScheme);
   const handleError = useCallback14(
     (error) => {
-      let errorMessage = t("errors.signup.flow.failure");
-      if (error && typeof error === "object") {
-        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.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;
-      }
+      const errorMessage = resolveFlowErrorMessage_default(error, t("errors.signup.flow.failure"));
       clearMessages();
       addMessage({
         message: errorMessage,
@@ -11140,8 +11164,22 @@ var BaseSignUpContent = ({
   );
   const [isLoading, setIsLoading] = useState21(false);
   const [isFlowInitialized, setIsFlowInitialized] = useState21(false);
+  const [isFlowComplete, setIsFlowComplete] = useState21(false);
   const [currentFlow, setCurrentFlow] = useState21(null);
   const initializationAttemptedRef = useRef8(false);
+  const handleFlowComplete = useCallback14(
+    (response) => {
+      setCurrentFlow(response);
+      setIsFlowComplete(true);
+      clearMessages();
+      addMessage({
+        message: t("signup.success"),
+        type: "success"
+      });
+      onComplete?.(response);
+    },
+    [t, addMessage, clearMessages, onComplete]
+  );
   const extractFormFields = useCallback14(
     (components) => {
       const fields = [];
@@ -11251,9 +11289,14 @@ var BaseSignUpContent = ({
           };
           try {
             const continueResponse = await onSubmit(payload);
+            if (!continueResponse) {
+              popup.close();
+              cleanup();
+              return;
+            }
             onFlowChange?.(continueResponse);
             if (continueResponse.flowStatus === EmbeddedFlowStatus.Complete) {
-              onComplete?.(continueResponse);
+              handleFlowComplete(continueResponse);
             } else if (continueResponse.flowStatus === EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
@@ -11304,9 +11347,13 @@ var BaseSignUpContent = ({
                 };
                 try {
                   const continueResponse = await onSubmit(payload);
+                  if (!continueResponse) {
+                    popup.close();
+                    return;
+                  }
                   onFlowChange?.(continueResponse);
                   if (continueResponse.flowStatus === EmbeddedFlowStatus.Complete) {
-                    onComplete?.(continueResponse);
+                    handleFlowComplete(continueResponse);
                   } else if (continueResponse.flowStatus === EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
@@ -11352,9 +11399,12 @@ var BaseSignUpContent = ({
         ...actionId && { actionId }
       };
       const response = await onSubmit(payload);
+      if (!response) {
+        return;
+      }
       onFlowChange?.(response);
       if (response.flowStatus === EmbeddedFlowStatus.Complete) {
-        onComplete?.(response);
+        handleFlowComplete(response);
         return;
       }
       if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
@@ -11363,6 +11413,11 @@ var BaseSignUpContent = ({
         }
         setCurrentFlow(response);
         setupFormFields(response);
+        const flowError = response.data?.additionalData?.["error"];
+        if (flowError) {
+          clearMessages();
+          addMessage({ message: String(flowError), type: "error" });
+        }
       }
     } catch (err) {
       handleError(err);
@@ -11435,11 +11490,14 @@ var BaseSignUpContent = ({
         clearMessages();
         try {
           const response = await onInitialize();
+          if (!response) {
+            return;
+          }
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
           if (response.flowStatus === EmbeddedFlowStatus.Complete) {
-            onComplete?.(response);
+            handleFlowComplete(response);
             return;
           }
           if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
@@ -11457,7 +11515,7 @@ var BaseSignUpContent = ({
     isInitialized,
     isFlowInitialized,
     onInitialize,
-    onComplete,
+    handleFlowComplete,
     onError,
     onFlowChange,
     setupFormFields,
@@ -11499,13 +11557,13 @@ var BaseSignUpContent = ({
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx81("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx81(
         Alert_default,
         {
-          variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+          variant: resolveAlertVariant(message.type),
           className: cx24(styles.flowMessageItem, messageClasses),
           children: /* @__PURE__ */ jsx81(Alert_default.Description, { children: message.message })
         },
         message.id || index
       )) }),
-      /* @__PURE__ */ jsx81("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx81(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx81(Typography_default, { variant: "body1", children: t("errors.signup.components.not.available") }) }) })
+      !isFlowComplete && /* @__PURE__ */ jsx81("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx81(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx81(Typography_default, { variant: "body1", children: t("errors.signup.components.not.available") }) }) })
     ] })
   ] });
 };
@@ -11926,6 +11984,9 @@ var BaseSignUpContent2 = ({
         inputs: filteredInputs
       };
       const rawResponse = await onSubmit(payload);
+      if (!rawResponse) {
+        return;
+      }
       const response = normalizeFlowResponseLocal(rawResponse);
       onFlowChange?.(response);
       await setChallengeToken(response.challengeToken ?? null);
@@ -12344,8 +12405,9 @@ import { useEffect as useEffect21, useState as useState23, useCallback as useCal
 
 // src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
 import { EmbeddedFlowComponentType as EmbeddedFlowComponentType5 } from "@asgardeo/browser";
+import { cloneElement as cloneElement3 } from "react";
 import { jsx as jsx87 } from "react/jsx-runtime";
-var createRecoveryComponent = ({ component, onSubmit, ...rest }) => {
+var createRecoveryElement = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
     case EmbeddedFlowComponentType5.Typography:
       return /* @__PURE__ */ jsx87(Typography_default2, { component, onSubmit, ...rest });
@@ -12409,6 +12471,10 @@ var createRecoveryComponent = ({ component, onSubmit, ...rest }) => {
       return /* @__PURE__ */ jsx87("div", {});
   }
 };
+var createRecoveryComponent = ({ key, ...props }) => {
+  const element = createRecoveryElement(props);
+  return key === void 0 || key === null ? element : cloneElement3(element, { key });
+};
 var createRecoveryOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createRecoveryComponent({
   component,
   formErrors,
@@ -14824,7 +14890,7 @@ import {
   useId
 } from "@floating-ui/react";
 import {
-  cloneElement as cloneElement2,
+  cloneElement as cloneElement4,
   createContext as createContext12,
   forwardRef as forwardRef10,
   isValidElement,
@@ -15046,7 +15112,7 @@ var DialogTrigger = forwardRef10(
     const childrenRef = children.ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
     if (asChild && isValidElement(children)) {
-      return cloneElement2(
+      return cloneElement4(
         children,
         context.getReferenceProps({
           ref,
@@ -15160,7 +15226,7 @@ var DialogClose = forwardRef10(
       props.onClick?.(event);
     };
     if (asChild && isValidElement(children)) {
-      return cloneElement2(children, {
+      return cloneElement4(children, {
         ref,
         ...props,
         ...children.props,
@@ -15457,6 +15523,9 @@ var fieldsToSkip = [
   "preferredMFAOption"
 ];
 var readonlyFields = ["username", "userName", "user_name"];
+var normalizeMutability = (mutability) => (mutability ?? "").replace(/_/g, "").toLowerCase();
+var isReadOnlyMutability = (mutability) => normalizeMutability(mutability) === "readonly";
+var isReadWriteMutability = (mutability) => normalizeMutability(mutability) === "readwrite";
 var BaseUserProfile = ({
   fallback = null,
   className = "",
@@ -15635,7 +15704,7 @@ var BaseUserProfile = ({
     }
     if (Array.isArray(value) || multiValued) {
       const hasValues = Array.isArray(value) ? value.length > 0 : value !== void 0 && value !== null && value !== "";
-      const isEditable2 = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+      const isEditable2 = editable && !isReadOnlyMutability(mutability) && !readonlyFields.includes(name || "");
       if (isEditing && onEditValue && isEditable2) {
         let currentValue;
         if (editedUser && name && editedUser[name] !== void 0) {
@@ -15705,7 +15774,7 @@ var BaseUserProfile = ({
     if (type === "COMPLEX" && typeof value === "object") {
       return /* @__PURE__ */ jsx109(ObjectDisplay, { data: value });
     }
-    if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
+    if (isEditing && onEditValue && !isReadOnlyMutability(mutability) && !readonlyFields.includes(name || "")) {
       let fieldValue;
       if (editedUser && name && editedUser[name] !== void 0) {
         fieldValue = editedUser[name];
@@ -15763,7 +15832,7 @@ var BaseUserProfile = ({
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
-    const isEditable = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+    const isEditable = editable && !isReadOnlyMutability(mutability) && !readonlyFields.includes(name || "");
     let displayValue;
     if (hasValue) {
       displayValue = String(value);
@@ -15793,7 +15862,7 @@ var BaseUserProfile = ({
     const hasValue = schema.value !== void 0 && schema.value !== "" && schema.value !== null;
     const isFieldEditing = editingFields[schema.name];
     const isReadonlyField = readonlyFields.includes(schema.name);
-    const shouldShow = hasValue || isFieldEditing || editable && schema.mutability === "READ_WRITE";
+    const shouldShow = hasValue || isFieldEditing || editable && isReadWriteMutability(schema.mutability);
     if (!shouldShow) {
       return null;
     }
@@ -15808,7 +15877,7 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs47("div", { className: styles.fieldActions, children: [
+      editable && !isReadOnlyMutability(schema.mutability) && !isReadonlyField && /* @__PURE__ */ jsxs47("div", { className: styles.fieldActions, children: [
         isFieldEditing && /* @__PURE__ */ jsxs47(Fragment20, { children: [
           /* @__PURE__ */ jsx109(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
           /* @__PURE__ */ jsx109(
@@ -17092,6 +17161,23 @@ var useStyles30 = (theme, colorScheme) => useMemo41(() => {
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
+  const headerContainer = css31`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+  const title = css31`
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: ${theme.vars.colors.text.primary};
+      margin: 0 0 6px 0;
+      letter-spacing: -0.01em;
+    `;
+  const subtitle = css31`
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.secondary};
+      margin: 0;
+    `;
   const form = css31`
       display: flex;
       flex-direction: column;
@@ -17106,12 +17192,25 @@ var useStyles30 = (theme, colorScheme) => useMemo41(() => {
     `;
   const field = css31`
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: ${theme.vars.spacing.unit} 0;
-      border-bottom: 1px solid ${theme.vars.colors.border};
       min-height: 32px;
     `;
+  const label = css31`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+      width: 200px;
+      min-width: 200px;
+      flex-shrink: 0;
+      text-align: left;
+      padding-right: calc(${theme.vars.spacing.unit} * 2);
+      padding-top: calc(${theme.vars.spacing.unit} * 0.75);
+      white-space: nowrap;
+      line-height: 1.4;
+    `;
   const fieldGroup = css31`
+      flex: 1;
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
@@ -17128,6 +17227,8 @@ var useStyles30 = (theme, colorScheme) => useMemo41(() => {
       min-height: 80px;
       resize: vertical;
       outline: none;
+      box-sizing: border-box;
+      transition: border-color 0.2s, box-shadow 0.2s;
       &:focus {
         border-color: ${theme.vars.colors.primary.main};
         box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
@@ -17185,12 +17286,16 @@ var useStyles30 = (theme, colorScheme) => useMemo41(() => {
     fieldGroup,
     form,
     header,
+    headerContainer,
     infoContainer,
     input,
+    label,
     popup,
     root,
+    subtitle,
     textarea,
     textareaError,
+    title,
     value
   };
 }, [
@@ -17301,53 +17406,68 @@ var BaseCreateOrganization = ({
       logger11.error("Form submission error:");
     }
   };
+  const getTranslation = (key, fallback) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback;
+  };
   const createOrganizationContent = /* @__PURE__ */ jsx118("div", { className: cx36(styles["root"], cardLayout && styles["card"], className), style, children: /* @__PURE__ */ jsxs53("div", { className: cx36(styles["content"]), children: [
+    mode !== "popup" && /* @__PURE__ */ jsxs53("div", { className: cx36(styles["headerContainer"]), children: [
+      /* @__PURE__ */ jsx118(Typography_default, { variant: "h5", component: "h1", className: cx36(styles["title"]), children: getTranslation("organization.create.heading", title || "Create organization") }),
+      /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", color: "textSecondary", className: cx36(styles["subtitle"]), children: getTranslation("organization.create.subheading", "Set up a new organization workspace.") })
+    ] }),
     /* @__PURE__ */ jsxs53("form", { id: "create-organization-form", className: cx36(styles["form"]), onSubmit: handleSubmit, children: [
       error && /* @__PURE__ */ jsxs53(Alert_default, { variant: "error", className: styles["errorAlert"], children: [
         /* @__PURE__ */ jsx118(Alert_default.Title, { children: "Error" }),
         /* @__PURE__ */ jsx118(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ jsx118("div", { className: cx36(styles["fieldGroup"]), children: /* @__PURE__ */ jsx118(
-        TextField_default,
-        {
-          label: `${t("elements.fields.organization.name.label")}`,
-          placeholder: t("elements.fields.organization.name.placeholder"),
-          value: formData.name,
-          onChange: (e) => handleNameChange(e.target.value),
-          disabled: loading,
-          required: true,
-          error: formErrors.name,
-          className: cx36(styles["input"])
-        }
-      ) }),
-      /* @__PURE__ */ jsx118("div", { className: cx36(styles["fieldGroup"]), children: /* @__PURE__ */ jsx118(
-        TextField_default,
-        {
-          label: `${t("elements.fields.organization.handle.label") || "Organization Handle"}`,
-          placeholder: t("elements.fields.organization.handle.placeholder") || "my-organization",
-          value: formData.handle,
-          onChange: (e) => handleInputChange("handle", e.target.value),
-          disabled: loading,
-          required: true,
-          error: formErrors.handle,
-          helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
-          className: cx36(styles["input"])
-        }
-      ) }),
-      /* @__PURE__ */ jsx118("div", { className: cx36(styles["fieldGroup"]), children: /* @__PURE__ */ jsxs53(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ jsx118(InputLabel_default, { required: true, children: t("elements.fields.organization.description.label") }),
-        /* @__PURE__ */ jsx118(
+      /* @__PURE__ */ jsxs53("div", { className: cx36(styles["field"]), children: [
+        /* @__PURE__ */ jsx118(InputLabel_default, { required: true, className: cx36(styles["label"]), children: getTranslation("elements.fields.organization.name.label", "Organization Name") }),
+        /* @__PURE__ */ jsx118("div", { className: cx36(styles["fieldGroup"]), children: /* @__PURE__ */ jsx118(
+          TextField_default,
+          {
+            placeholder: getTranslation("elements.fields.organization.name.placeholder", "Organization Name"),
+            value: formData.name,
+            onChange: (e) => handleNameChange(e.target.value),
+            disabled: loading,
+            required: true,
+            error: formErrors.name,
+            className: cx36(styles["input"])
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs53("div", { className: cx36(styles["field"]), children: [
+        /* @__PURE__ */ jsx118(InputLabel_default, { required: true, className: cx36(styles["label"]), children: getTranslation("elements.fields.organization.handle.label", "Organization Handle") }),
+        /* @__PURE__ */ jsx118("div", { className: cx36(styles["fieldGroup"]), children: /* @__PURE__ */ jsx118(
+          TextField_default,
+          {
+            placeholder: getTranslation("elements.fields.organization.handle.placeholder", "my-organization"),
+            value: formData.handle,
+            onChange: (e) => handleInputChange("handle", e.target.value),
+            disabled: loading,
+            required: true,
+            error: formErrors.handle,
+            helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
+            className: cx36(styles["input"])
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs53("div", { className: cx36(styles["field"]), children: [
+        /* @__PURE__ */ jsx118(InputLabel_default, { required: true, className: cx36(styles["label"]), children: getTranslation("elements.fields.organization.description.label", "Organization Description") }),
+        /* @__PURE__ */ jsx118("div", { className: cx36(styles["fieldGroup"]), children: /* @__PURE__ */ jsx118(FormControl_default, { error: formErrors.description, children: /* @__PURE__ */ jsx118(
           "textarea",
           {
             className: cx36(styles["textarea"], formErrors.description && styles["textareaError"]),
-            placeholder: t("organization.create.description.placeholder"),
+            placeholder: getTranslation(
+              "organization.create.description.placeholder",
+              "Enter organization description"
+            ),
             value: formData.description,
             onChange: (e) => handleInputChange("description", e.target.value),
             disabled: loading,
             required: true
           }
-        )
-      ] }) }),
+        ) }) })
+      ] }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
     /* @__PURE__ */ jsxs53("div", { className: cx36(styles["actions"]), children: [
@@ -17491,14 +17611,19 @@ var useStyles31 = (theme, colorScheme) => useMemo42(() => {
       padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
+  const headerContainer = css32`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
   const headerInfo = css32`
       flex: 1;
     `;
   const title = css32`
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin: 0 0 8px 0;
+      font-size: 1.75rem;
+      font-weight: 700;
       color: ${theme.vars.colors.text.primary};
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 0.5) 0;
     `;
   const subtitle = css32`
       color: ${theme.vars.colors.text.secondary};
@@ -17657,7 +17782,7 @@ var useStyles31 = (theme, colorScheme) => useMemo42(() => {
     errorContainer,
     errorMargin,
     header,
-    headerInfo,
+    headerContainer,
     listContainer,
     loadMoreButton,
     loadMoreMargin,
@@ -17768,7 +17893,8 @@ var BaseOrganizationList = ({
   renderLoadMore,
   renderOrganization,
   style,
-  title = "Organizations",
+  title,
+  subheading,
   showStatus,
   preferences
 }) => {
@@ -17820,7 +17946,15 @@ var BaseOrganizationList = ({
     }
     return emptyContent;
   }
+  const getTranslation = (key, fallback) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback;
+  };
   const organizationListContent = /* @__PURE__ */ jsxs54("div", { className: cx37(styles["root"], className), style, children: [
+    mode !== "popup" && /* @__PURE__ */ jsxs54("div", { className: cx37(styles["headerContainer"]), children: [
+      /* @__PURE__ */ jsx120(Typography_default, { variant: "h5", component: "h1", className: cx37(styles["title"]), children: getTranslation("organization.list.heading", title || "Organizations List") }),
+      /* @__PURE__ */ jsx120(Typography_default, { variant: "body2", color: "textSecondary", className: cx37(styles["subtitle"]), children: getTranslation("organization.list.subheading", subheading || "View list of organizations.") })
+    ] }),
     /* @__PURE__ */ jsxs54("div", { className: cx37(styles["header"]), children: [
       /* @__PURE__ */ jsx120("div", { className: cx37(styles["headerInfo"]), children: /* @__PURE__ */ jsx120(Typography_default, { variant: "body2", color: "textSecondary", className: cx37(styles["subtitle"]), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
@@ -18023,6 +18157,7 @@ var useStyles33 = (theme, colorScheme) => useMemo45(
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
+        text-align: left;
       `,
     header: css34`
         display: flex;
@@ -18031,6 +18166,11 @@ var useStyles33 = (theme, colorScheme) => useMemo45(
         margin-bottom: calc(${theme.vars.spacing.unit} * 3);
         padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       `,
+    headerContainer: css34`
+        margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+        padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+        border-bottom: 1px solid ${theme.vars.colors.border};
+      `,
     infoContainer: css34`
         display: flex;
         flex-direction: column;
@@ -18040,18 +18180,26 @@ var useStyles33 = (theme, colorScheme) => useMemo45(
         font-size: 0.875rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
-        width: 120px;
+        width: 200px;
+        min-width: 200px;
         flex-shrink: 0;
         line-height: 28px;
+        text-align: left;
+        white-space: nowrap;
       `,
     name: css34`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
+        text-align: left;
       `,
     orgInfo: css34`
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
       `,
     permissionBadge: css34`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
@@ -18091,6 +18239,17 @@ var useStyles33 = (theme, colorScheme) => useMemo45(
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
+    subtitle: css34`
+        font-size: 0.875rem;
+        color: ${theme.vars.colors.text.secondary};
+        margin: 0;
+      `,
+    title: css34`
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: ${theme.vars.colors.text.primary};
+        margin: 0 0 calc(${theme.vars.spacing.unit} * 0.5) 0;
+      `,
     value: css34`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
@@ -18487,7 +18646,9 @@ var BaseOrganizationProfile = ({
   className = "",
   cardLayout = true,
   organization,
-  title = "Organization Profile",
+  preferences,
+  title,
+  subheading,
   mode = "inline",
   editable = true,
   onOpenChange,
@@ -18527,6 +18688,7 @@ var BaseOrganizationProfile = ({
   ]
 }) => {
   const { theme, colorScheme } = useTheme_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = useState38(organization);
   const [editingFields, setEditingFields] = useState38({});
@@ -18742,7 +18904,15 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
+  const getTranslation = (key, fallback2) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback2;
+  };
   const profileContent = /* @__PURE__ */ jsxs56(Card_default, { className: cx40(styles["root"], cardLayout && styles["card"], className), children: [
+    mode !== "popup" && /* @__PURE__ */ jsxs56("div", { className: cx40(styles["headerContainer"]), children: [
+      /* @__PURE__ */ jsx123(Typography_default, { variant: "h5", component: "h1", className: cx40(styles["title"]), children: getTranslation("organization.profile.heading", title || "Organization Profile") }),
+      /* @__PURE__ */ jsx123(Typography_default, { variant: "body2", color: "textSecondary", className: cx40(styles["subtitle"]), children: getTranslation("organization.profile.subheading", subheading || "Manage your organization details.") })
+    ] }),
     /* @__PURE__ */ jsxs56("div", { className: cx40(styles["header"]), children: [
       /* @__PURE__ */ jsx123(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
       /* @__PURE__ */ jsxs56("div", { className: cx40(styles["orgInfo"]), children: [