@asgardeo/react 0.25.6 → 0.25.7

package/dist/cjs/index.js

@@ -17090,6 +17090,23 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
+  const headerContainer = import_css66.css`
+      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 = import_css66.css`
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: ${theme.vars.colors.text.primary};
+      margin: 0 0 6px 0;
+      letter-spacing: -0.01em;
+    `;
+  const subtitle = import_css66.css`
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.secondary};
+      margin: 0;
+    `;
   const form = import_css66.css`
       display: flex;
       flex-direction: column;
@@ -17104,12 +17121,25 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
     `;
   const field = import_css66.css`
       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 = import_css66.css`
+      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 = import_css66.css`
+      flex: 1;
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
@@ -17126,6 +17156,8 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
       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;
@@ -17183,12 +17215,16 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
     fieldGroup,
     form,
     header,
+    headerContainer,
     infoContainer,
     input,
+    label,
     popup,
     root,
+    subtitle,
     textarea,
     textareaError,
+    title,
     value
   };
 }, [
@@ -17299,53 +17335,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__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["root"], cardLayout && styles["card"], className), style, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["content"]), children: [
+    mode !== "popup" && /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["headerContainer"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Typography_default, { variant: "h5", component: "h1", className: (0, import_css67.cx)(styles["title"]), children: getTranslation("organization.create.heading", title || "Create organization") }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css67.cx)(styles["subtitle"]), children: getTranslation("organization.create.subheading", "Set up a new organization workspace.") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("form", { id: "create-organization-form", className: (0, import_css67.cx)(styles["form"]), onSubmit: handleSubmit, children: [
       error && /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(Alert_default, { variant: "error", className: styles["errorAlert"], children: [
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Alert_default.Title, { children: "Error" }),
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-        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: (0, import_css67.cx)(styles["input"])
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-        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: (0, import_css67.cx)(styles["input"])
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, children: t("elements.fields.organization.description.label") }),
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["field"]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, className: (0, import_css67.cx)(styles["label"]), children: getTranslation("elements.fields.organization.name.label", "Organization Name") }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          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: (0, import_css67.cx)(styles["input"])
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["field"]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, className: (0, import_css67.cx)(styles["label"]), children: getTranslation("elements.fields.organization.handle.label", "Organization Handle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          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: (0, import_css67.cx)(styles["input"])
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["field"]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, className: (0, import_css67.cx)(styles["label"]), children: getTranslation("elements.fields.organization.description.label", "Organization Description") }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(FormControl_default, { error: formErrors.description, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           "textarea",
           {
             className: (0, import_css67.cx)(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__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["actions"]), children: [
@@ -17486,14 +17537,19 @@ var useStyles31 = (theme, colorScheme) => (0, import_react107.useMemo)(() => {
       padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
+  const headerContainer = import_css68.css`
+      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 = import_css68.css`
       flex: 1;
     `;
   const title = import_css68.css`
-      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 = import_css68.css`
       color: ${theme.vars.colors.text.secondary};
@@ -17652,7 +17708,7 @@ var useStyles31 = (theme, colorScheme) => (0, import_react107.useMemo)(() => {
     errorContainer,
     errorMargin,
     header,
-    headerInfo,
+    headerContainer,
     listContainer,
     loadMoreButton,
     loadMoreMargin,
@@ -17763,7 +17819,8 @@ var BaseOrganizationList = ({
   renderLoadMore,
   renderOrganization,
   style,
-  title = "Organizations",
+  title,
+  subheading,
   showStatus,
   preferences
 }) => {
@@ -17815,7 +17872,15 @@ var BaseOrganizationList = ({
     }
     return emptyContent;
   }
+  const getTranslation = (key, fallback) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback;
+  };
   const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: (0, import_css69.cx)(styles["root"], className), style, children: [
+    mode !== "popup" && /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: (0, import_css69.cx)(styles["headerContainer"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Typography_default, { variant: "h5", component: "h1", className: (0, import_css69.cx)(styles["title"]), children: getTranslation("organization.list.heading", title || "Organizations List") }),
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css69.cx)(styles["subtitle"]), children: getTranslation("organization.list.subheading", subheading || "View list of organizations.") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: (0, import_css69.cx)(styles["header"]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: (0, import_css69.cx)(styles["headerInfo"]), children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css69.cx)(styles["subtitle"]), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
@@ -18018,6 +18083,7 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
+        text-align: left;
       `,
     header: import_css72.css`
         display: flex;
@@ -18026,6 +18092,11 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         margin-bottom: calc(${theme.vars.spacing.unit} * 3);
         padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       `,
+    headerContainer: import_css72.css`
+        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: import_css72.css`
         display: flex;
         flex-direction: column;
@@ -18035,18 +18106,26 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         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: import_css72.css`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
+        text-align: left;
       `,
     orgInfo: import_css72.css`
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
       `,
     permissionBadge: import_css72.css`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
@@ -18086,6 +18165,17 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
+    subtitle: import_css72.css`
+        font-size: 0.875rem;
+        color: ${theme.vars.colors.text.secondary};
+        margin: 0;
+      `,
+    title: import_css72.css`
+        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: import_css72.css`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
@@ -18482,7 +18572,9 @@ var BaseOrganizationProfile = ({
   className = "",
   cardLayout = true,
   organization,
-  title = "Organization Profile",
+  preferences,
+  title,
+  subheading,
   mode = "inline",
   editable = true,
   onOpenChange,
@@ -18522,6 +18614,7 @@ var BaseOrganizationProfile = ({
   ]
 }) => {
   const { theme, colorScheme } = useTheme_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = (0, import_react114.useState)(organization);
   const [editingFields, setEditingFields] = (0, import_react114.useState)({});
@@ -18737,7 +18830,15 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
+  const getTranslation = (key, fallback2) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback2;
+  };
   const profileContent = /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Card_default, { className: (0, import_css75.cx)(styles["root"], cardLayout && styles["card"], className), children: [
+    mode !== "popup" && /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: (0, import_css75.cx)(styles["headerContainer"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Typography_default, { variant: "h5", component: "h1", className: (0, import_css75.cx)(styles["title"]), children: getTranslation("organization.profile.heading", title || "Organization Profile") }),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css75.cx)(styles["subtitle"]), children: getTranslation("organization.profile.subheading", subheading || "Manage your organization details.") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: (0, import_css75.cx)(styles["header"]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: (0, import_css75.cx)(styles["orgInfo"]), children: [