@verma-consulting/design-library 0.1.57 → 0.1.59

package/dist/index.mjs

@@ -228,9 +228,70 @@ 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"';
+var wordmarkCore = {
+  fontFamily: LOGO_FONT_STACK,
+  fontWeight: 600,
+  letterSpacing: "-0.015em",
+  lineHeight: 1.35,
+  color: "text.primary"
+};
+function wordmarkSx(centered) {
+  return {
+    ...wordmarkCore,
+    ...centered ? {
+      fontSize: "1.0625rem",
+      textAlign: "center",
+      wordBreak: "break-word"
+    } : {
+      fontSize: "0.9375rem",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  };
+}
+function companySlotTypographySx(centered) {
+  return {
+    "& .MuiTypography-root": {
+      ...wordmarkCore,
+      fontSize: centered ? "1.0625rem" : "0.9375rem",
+      textAlign: centered ? "center" : "inherit",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      maxWidth: "100%"
+    }
+  };
+}
+function CompanySlot({
+  centered,
+  maxWidth,
+  harmonizeCompanyTypography,
+  companySlotSx,
+  children
+}) {
+  return /* @__PURE__ */ jsx3(
+    Box2,
+    {
+      sx: {
+        width: "100%",
+        maxWidth,
+        minWidth: 0,
+        display: "flex",
+        justifyContent: centered ? "center" : "flex-start",
+        alignItems: "center",
+        ...harmonizeCompanyTypography ? companySlotTypographySx(centered) : null,
+        ...companySlotSx
+      },
+      children
+    }
+  );
+}
 var Logo = memo(
   ({
     loggedIn = false,
@@ -238,7 +299,9 @@ var Logo = memo(
     organization = null,
     defaultLogo = null,
     handleClick = () => null,
-    companyComponent = null
+    companyComponent = null,
+    harmonizeCompanyTypography = true,
+    companySlotSx
   }) => {
     var _a2;
     const theme = useTheme();
@@ -246,47 +309,75 @@ 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 avatarSx = {
+      fontFamily: LOGO_FONT_STACK,
+      bgcolor: "primary.main",
+      fontWeight: 600,
+      letterSpacing: "-0.02em"
+    };
+    const wm = wordmarkSx(centered);
     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, children: logoUrl ? /* @__PURE__ */ jsx3(
-              Avatar,
+            (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(
+              Box2,
               {
-                alt: companyName || "avatar",
-                src: logoUrl,
                 sx: {
-                  width: 64,
-                  // slightly bigger
-                  height: 64,
-                  bgcolor: "primary.main",
-                  fontSize: 20,
-                  fontWeight: "bold"
+                  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, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
-              Typography,
+            ),
+            /* @__PURE__ */ jsx3(
+              Box2,
               {
-                variant: "h6",
                 sx: {
-                  fontFamily: "Courier, monospace",
-                  fontWeight: "bold",
-                  color: "primary.main"
+                  width: "100%",
+                  minWidth: 0,
+                  display: "flex",
+                  justifyContent: "center",
+                  textAlign: "center"
                 },
-                children: companyName
+                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,
+                    children: companyComponent
+                  }
+                )
               }
-            ) }) : /* @__PURE__ */ jsx3(Box2, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
+            )
           ]
         }
       );
@@ -303,7 +394,7 @@ var Logo = memo(
         },
         onClick: handleClick,
         children: [
-          (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(Box2, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx3(
+          (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(Box2, { sx: { mr: 1.25, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx3(
             Avatar,
             {
               alt: companyName || "avatar",
@@ -311,30 +402,23 @@ var Logo = memo(
               sx: {
                 width: 36,
                 height: 36,
-                bgcolor: "primary.main",
-                fontSize: 14,
-                fontWeight: "bold"
+                fontSize: "0.875rem",
+                ...avatarSx
               },
               imgProps: { loading: "lazy" },
               children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
             }
           ) : defaultLogo }),
-          /* @__PURE__ */ jsx3(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
-            Typography,
+          /* @__PURE__ */ jsx3(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ jsx3(
+            CompanySlot,
             {
-              variant: "h6",
-              noWrap: true,
-              sx: {
-                textOverflow: "ellipsis",
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                fontFamily: "Courier, monospace",
-                fontWeight: "bold",
-                color: "primary.main"
-              },
-              children: companyName
+              centered: false,
+              maxWidth,
+              harmonizeCompanyTypography,
+              companySlotSx,
+              children: companyComponent
             }
-          ) }) : companyComponent })
+          ) })
         ]
       }
     );
@@ -1753,7 +1837,7 @@ import {
 import {
   Autocomplete as Autocomplete2,
   Box as Box9,
-  Stack,
+  Stack as Stack2,
   TextField as TextField2,
   useTheme as useTheme11,
   useMediaQuery as useMediaQuery4
@@ -2002,7 +2086,7 @@ var PhoneNumberField = ({
       onBlurCapture: handleWrapperBlur,
       sx: { display: "flex", alignItems: "center", width: "100%" },
       children: /* @__PURE__ */ jsxs10(
-        Stack,
+        Stack2,
         {
           direction: "row",
           spacing: 0,
@@ -2513,6 +2597,7 @@ export {
   IOSSwitch_default as IOSSwitch,
   ImageUploadAvatar_default as ImageUploadAvatar,
   InputFileUpload_default as InputFileUpload,
+  LOGO_FONT_STACK,
   Loader_default as Loader,
   Logo_default as Logo,
   OTPField_default as OTPField,