@verma-consulting/design-library 0.1.58 → 0.1.60

package/dist/index.mjs

@@ -228,7 +228,8 @@ import {
   Tooltip,
   Box as Box2,
   useTheme,
-  useMediaQuery
+  useMediaQuery,
+  Stack
 } from "@mui/material";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var LOGO_FONT_STACK = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
@@ -237,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",
@@ -272,6 +279,7 @@ function CompanySlot({
   maxWidth,
   harmonizeCompanyTypography,
   companySlotSx,
+  hasRowLogo,
   children
 }) {
   return /* @__PURE__ */ jsx3(
@@ -284,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
@@ -308,50 +316,77 @@ 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(
-        Grid,
+        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__ */ jsx3(Grid, { item: true, sx: { display: "flex", justifyContent: "center" }, children: logoUrl ? /* @__PURE__ */ jsx3(
-              Avatar,
+            (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(
+              Box2,
               {
-                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__ */ jsx3(
+                  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__ */ jsx3(Grid, { item: true, sx: { maxWidth, width: "100%", textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ jsx3(
-              CompanySlot,
+            ),
+            /* @__PURE__ */ jsx3(
+              Box2,
               {
-                centered: true,
-                maxWidth,
-                harmonizeCompanyTypography,
-                companySlotSx,
-                children: companyComponent
+                sx: {
+                  width: "100%",
+                  minWidth: 0,
+                  display: "flex",
+                  justifyContent: "center",
+                  textAlign: "center"
+                },
+                children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ jsx3(
+                  CompanySlot,
+                  {
+                    centered: true,
+                    maxWidth,
+                    harmonizeCompanyTypography,
+                    companySlotSx,
+                    hasRowLogo,
+                    children: companyComponent
+                  }
+                )
               }
-            ) })
+            )
           ]
         }
       );
@@ -390,6 +425,7 @@ var Logo = memo(
               maxWidth,
               harmonizeCompanyTypography,
               companySlotSx,
+              hasRowLogo,
               children: companyComponent
             }
           ) })
@@ -1811,7 +1847,7 @@ import {
 import {
   Autocomplete as Autocomplete2,
   Box as Box9,
-  Stack,
+  Stack as Stack2,
   TextField as TextField2,
   useTheme as useTheme11,
   useMediaQuery as useMediaQuery4
@@ -2060,7 +2096,7 @@ var PhoneNumberField = ({
       onBlurCapture: handleWrapperBlur,
       sx: { display: "flex", alignItems: "center", width: "100%" },
       children: /* @__PURE__ */ jsxs10(
-        Stack,
+        Stack2,
         {
           direction: "row",
           spacing: 0,