@verma-consulting/design-library 0.1.59 → 0.1.61

package/dist/index.mjs

@@ -238,28 +238,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",
@@ -273,6 +279,7 @@ function CompanySlot({
   maxWidth,
   harmonizeCompanyTypography,
   companySlotSx,
+  hasRowLogo,
   children
 }) {
   return /* @__PURE__ */ jsx3(
@@ -285,7 +292,7 @@ function CompanySlot({
         display: "flex",
         justifyContent: centered ? "center" : "flex-start",
         alignItems: "center",
-        ...harmonizeCompanyTypography ? companySlotTypographySx(centered) : null,
+        ...harmonizeCompanyTypography ? companySlotTypographySx(centered, hasRowLogo) : null,
         ...companySlotSx
       },
       children
@@ -309,13 +316,14 @@ var Logo = 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__ */ jsxs(
         Stack,
@@ -324,10 +332,12 @@ var Logo = memo(
           onClick: handleClick,
           sx: {
             cursor: "pointer",
-            alignItems: "stretch",
+            alignItems: "center",
             width: "100%",
             maxWidth,
-            minWidth: 0
+            minWidth: 0,
+            mx: "auto",
+            "&:hover": { opacity: 0.9, transition: "opacity 0.2s ease-in-out" }
           },
           children: [
             (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(
@@ -373,6 +383,7 @@ var Logo = memo(
                     maxWidth,
                     harmonizeCompanyTypography,
                     companySlotSx,
+                    hasRowLogo,
                     children: companyComponent
                   }
                 )
@@ -416,6 +427,7 @@ var Logo = memo(
               maxWidth,
               harmonizeCompanyTypography,
               companySlotSx,
+              hasRowLogo,
               children: companyComponent
             }
           ) })