@verma-consulting/design-library 0.1.58 → 0.1.60

package/dist/index.js

@@ -283,28 +283,34 @@ var wordmarkCore = {
   fontWeight: 600,
   letterSpacing: "-0.015em",
   lineHeight: 1.35,
-  color: "text.primary"
+  /** Brand wordmark color (matches pre-refactor Logo); avoids dark `text.primary` on dark surfaces when theme mode is still light. */
+  color: "primary.main"
 };
-function wordmarkSx(centered) {
+function wordmarkFontSize(centered, hasRowLogo) {
+  if (centered) return "1.0625rem";
+  if (!hasRowLogo) return "1.0625rem";
+  return "1rem";
+}
+function wordmarkSx(centered, hasRowLogo) {
   return {
     ...wordmarkCore,
     ...centered ? {
-      fontSize: "1.0625rem",
+      fontSize: wordmarkFontSize(true, false),
       textAlign: "center",
       wordBreak: "break-word"
     } : {
-      fontSize: "0.9375rem",
+      fontSize: wordmarkFontSize(false, hasRowLogo),
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     }
   };
 }
-function companySlotTypographySx(centered) {
+function companySlotTypographySx(centered, hasRowLogo) {
   return {
     "& .MuiTypography-root": {
       ...wordmarkCore,
-      fontSize: centered ? "1.0625rem" : "0.9375rem",
+      fontSize: wordmarkFontSize(centered, centered ? false : hasRowLogo),
       textAlign: centered ? "center" : "inherit",
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -318,6 +324,7 @@ function CompanySlot({
   maxWidth,
   harmonizeCompanyTypography,
   companySlotSx,
+  hasRowLogo,
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -330,7 +337,7 @@ function CompanySlot({
         display: "flex",
         justifyContent: centered ? "center" : "flex-start",
         alignItems: "center",
-        ...harmonizeCompanyTypography ? companySlotTypographySx(centered) : null,
+        ...harmonizeCompanyTypography ? companySlotTypographySx(centered, hasRowLogo) : null,
         ...companySlotSx
       },
       children
@@ -354,50 +361,77 @@ var Logo = (0, import_react.memo)(
     const maxWidth = mdMatches ? 160 : 320;
     const companyName = (organization == null ? void 0 : organization.name) || "\u2013";
     const logoUrl = (_a2 = organization == null ? void 0 : organization.logo) == null ? void 0 : _a2.url;
+    const hasRowLogo = !!(logoUrl || defaultLogo);
     const avatarSx = {
       fontFamily: LOGO_FONT_STACK,
       bgcolor: "primary.main",
       fontWeight: 600,
       letterSpacing: "-0.02em"
     };
-    const wm = wordmarkSx(centered);
+    const wm = wordmarkSx(centered, hasRowLogo);
     if (centered) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_material2.Grid,
+        import_material2.Stack,
         {
-          container: true,
-          direction: "column",
-          alignItems: "center",
-          justifyContent: "center",
           spacing: 1,
-          sx: { cursor: "pointer" },
           onClick: handleClick,
+          sx: {
+            cursor: "pointer",
+            alignItems: "stretch",
+            width: "100%",
+            maxWidth,
+            minWidth: 0
+          },
           children: [
-            (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { display: "flex", justifyContent: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_material2.Avatar,
+            (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_material2.Box,
               {
-                alt: companyName || "avatar",
-                src: logoUrl,
                 sx: {
-                  width: 64,
-                  height: 64,
-                  fontSize: "1.125rem",
-                  ...avatarSx
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  width: "100%"
                 },
-                imgProps: { loading: "lazy" },
-                children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
+                children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_material2.Avatar,
+                  {
+                    alt: companyName || "avatar",
+                    src: logoUrl,
+                    sx: {
+                      width: 64,
+                      height: 64,
+                      fontSize: "1.125rem",
+                      ...avatarSx
+                    },
+                    imgProps: { loading: "lazy" },
+                    children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
+                  }
+                ) : defaultLogo
               }
-            ) : defaultLogo }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { maxWidth, width: "100%", textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              CompanySlot,
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_material2.Box,
               {
-                centered: true,
-                maxWidth,
-                harmonizeCompanyTypography,
-                companySlotSx,
-                children: companyComponent
+                sx: {
+                  width: "100%",
+                  minWidth: 0,
+                  display: "flex",
+                  justifyContent: "center",
+                  textAlign: "center"
+                },
+                children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  CompanySlot,
+                  {
+                    centered: true,
+                    maxWidth,
+                    harmonizeCompanyTypography,
+                    companySlotSx,
+                    hasRowLogo,
+                    children: companyComponent
+                  }
+                )
               }
-            ) })
+            )
           ]
         }
       );
@@ -436,6 +470,7 @@ var Logo = (0, import_react.memo)(
               maxWidth,
               harmonizeCompanyTypography,
               companySlotSx,
+              hasRowLogo,
               children: companyComponent
             }
           ) })