@verma-consulting/design-library 0.1.59 → 0.1.61

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 vermadev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,13 +361,14 @@ 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.Stack,
@@ -369,10 +377,12 @@ var Logo = (0, import_react.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__ */ (0, import_jsx_runtime3.jsx)(
@@ -418,6 +428,7 @@ var Logo = (0, import_react.memo)(
                     maxWidth,
                     harmonizeCompanyTypography,
                     companySlotSx,
+                    hasRowLogo,
                     children: companyComponent
                   }
                 )
@@ -461,6 +472,7 @@ var Logo = (0, import_react.memo)(
               maxWidth,
               harmonizeCompanyTypography,
               companySlotSx,
+              hasRowLogo,
               children: companyComponent
             }
           ) })