@verma-consulting/design-library 0.1.55 → 0.1.57

package/dist/index.js

@@ -1124,6 +1124,16 @@ var EmptyState_default = EmptyState;
 var import_material10 = require("@mui/material");
 var import_styles9 = require("@mui/material/styles");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function glassSurface2(theme) {
+  return {
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.88)"
+  };
+}
+function isSemanticColor(c) {
+  return c === "warning" || c === "success" || c === "error" || c === "secondary" || c === "info";
+}
 function renderIconSlot(node, side) {
   if (node == null) return null;
   const spacing = side === "left" ? { pr: 1 } : { ml: 1 };
@@ -1166,23 +1176,46 @@ var Pill = ({
   disabled = false
 }) => {
   const theme = (0, import_styles9.useTheme)();
+  const semantic = isSemanticColor(color);
+  const buttonColor = semantic ? color : color === "inherit" ? "inherit" : color != null ? color : "primary";
+  const neutralChrome = !semantic;
+  const hoverShadow = theme.palette.mode === "dark" ? "0 10px 22px rgba(0,0,0,0.34)" : "0 10px 20px rgba(15,23,42,0.14)";
+  let chromeSx;
+  if (neutralChrome) {
+    chromeSx = {
+      borderColor: isSelected ? (0, import_styles9.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles9.alpha)(theme.palette.text.primary, 0.18),
+      color: isSelected ? "primary.main" : "text.primary",
+      "&:hover": {
+        ...glassSurface2(theme),
+        borderColor: (0, import_styles9.alpha)(theme.palette.primary.main, 0.42),
+        boxShadow: hoverShadow
+      }
+    };
+  } else {
+    const c = color;
+    const main = theme.palette[c].main;
+    chromeSx = {
+      borderColor: isSelected ? (0, import_styles9.alpha)(main, 0.34) : (0, import_styles9.alpha)(main, 0.18),
+      color: `${c}.main`,
+      "&:hover": {
+        ...glassSurface2(theme),
+        borderColor: (0, import_styles9.alpha)(main, 0.42),
+        boxShadow: hoverShadow
+      }
+    };
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_material10.Button,
     {
       variant: isSelected ? "contained" : "outlined",
-      color: color != null ? color : "primary",
+      color: buttonColor,
       sx: {
-        ...glassSurface(theme),
+        ...glassSurface2(theme),
         borderRadius: 16,
         padding: "8px 16px",
         minHeight: 38,
         textTransform: "none",
-        borderColor: isSelected ? (0, import_styles9.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles9.alpha)(theme.palette.text.primary, 0.18),
-        color: isSelected ? "primary.main" : "text.primary",
-        "&:hover": {
-          borderColor: (0, import_styles9.alpha)(theme.palette.primary.main, 0.42),
-          boxShadow: theme.palette.mode === "dark" ? "0 10px 22px rgba(0,0,0,0.34)" : "0 10px 20px rgba(15,23,42,0.14)"
-        }
+        ...chromeSx
       },
       onClick,
       disabled,