@kashifd/jwero-components 0.6.92 → 0.6.93

package/dist/index.es.js

@@ -48813,11 +48813,11 @@ const VF = /* @__PURE__ */ zo(WF), YF = ({ ...e }) => /* @__PURE__ */ b.jsxs(
 }, ZF = Ee(zc)(({ size: e, name: t, showGradientBackground: r }) => ({
   width: e,
   height: e,
-  color: gt.colors.primary,
+  color: "#fff",
   fontFamily: "Inter, sans-serif",
-  fontSize: e > 20 ? e / 3.5 : e / 2.5,
+  fontSize: e > 20 ? e / 3.5 : e / 2.7,
   fontStyle: "normal",
-  fontWeight: 500,
+  fontWeight: 600,
   lineHeight: "normal",
   background: r ? KF(t) : gt.colors.light_blue
 })), Id = ({
@@ -62662,42 +62662,70 @@ const MH = ({
   icon: t,
   label: r,
   isComingSoon: a
-}) => /* @__PURE__ */ b.jsxs(Ue, { onClick: e, alignItems: "center", sx: { gap: "0.75rem" }, children: [
-  /* @__PURE__ */ b.jsx(
-    nr,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: "0.5rem 0.6rem",
-        borderRadius: "0.5rem",
-        boxShadow: "0px 0px 1px 0px rgba(0, 0, 0, 0.40)",
-        cursor: "pointer",
-        height: "3.5rem",
-        width: "3.5rem",
-        transition: "0.3s ease",
-        "&:hover": {
-          backgroundColor: "#fafafa"
+}) => /* @__PURE__ */ b.jsxs(
+  Ue,
+  {
+    onClick: e,
+    alignItems: "center",
+    sx: { gap: "0.75rem", position: "relative" },
+    children: [
+      /* @__PURE__ */ b.jsx(
+        nr,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "0.5rem 0.6rem",
+            borderRadius: "0.5rem",
+            boxShadow: "0px 0px 1px 0px rgba(0, 0, 0, 0.40)",
+            cursor: "pointer",
+            height: "3.5rem",
+            width: "3.5rem",
+            transition: "0.3s ease",
+            "&:hover": {
+              backgroundColor: "#fafafa"
+            }
+          },
+          children: t
         }
-      },
-      children: t
-    }
-  ),
-  /* @__PURE__ */ b.jsx(Ue, { direction: "row", alignItems: "center", sx: { gap: "0.5rem" }, children: /* @__PURE__ */ b.jsx(
-    xt,
-    {
-      variant: "xlSemibold",
-      sx: {
-        textAlign: "center",
-        color: gt.colors.text_primary,
-        maxWidth: "5rem"
-      },
-      children: r
-    }
-  ) }),
-  a && /* @__PURE__ */ b.jsx(jd, { label: "Coming soon...", value: r })
-] });
+      ),
+      /* @__PURE__ */ b.jsx(Ue, { direction: "row", alignItems: "center", sx: { gap: "0.5rem" }, children: /* @__PURE__ */ b.jsx(
+        xt,
+        {
+          variant: "xlSemibold",
+          sx: {
+            textAlign: "center",
+            color: gt.colors.text_primary,
+            maxWidth: "5rem"
+          },
+          children: r
+        }
+      ) }),
+      a && /* @__PURE__ */ b.jsx(Ue, { sx: { position: "absolute", top: "-0.75rem", right: "-2rem" }, children: /* @__PURE__ */ b.jsx(
+        jd,
+        {
+          label: "Coming soon",
+          value: r,
+          boxSx: {
+            width: "fit-content",
+            padding: "0.25rem 0.35rem",
+            backgroundColor: gt.colors.positive
+          },
+          labelProps: {
+            sx: {
+              textAlign: "center",
+              whiteSpace: "nowrap",
+              fontSize: "0.65rem",
+              fontWeight: 600,
+              color: "#fff"
+            }
+          }
+        }
+      ) })
+    ]
+  }
+);
 var QH = function(e) {
   var t = {};
   function r(a) {