@fairmint/ui 0.2.8 → 0.2.10

package/dist/fairmint-ui.js

@@ -26906,6 +26906,13 @@ function FairmintLogo({
     }
   );
 }
+const radii = {
+  xs: "0.25rem",
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem"
+};
 const indigo = [
   "#EEF2FF",
   "#E0E7FF",
@@ -27010,13 +27017,7 @@ const theme = createTheme({
     fontFamily: '"Plus Jakarta Sans", sans-serif',
     fontWeight: "700"
   },
-  radius: {
-    xs: "0.25rem",
-    sm: "0.375rem",
-    md: "0.5rem",
-    lg: "0.75rem",
-    xl: "1rem"
-  },
+  radius: radii,
   defaultRadius: "md",
   breakpoints: {
     xs: "30em",
@@ -28525,7 +28526,7 @@ function DataTable({
           styles: onRowClick ? {
             tr: {
               "&:hover": {
-                backgroundColor: `var(--mantine-color-${colors.neutral}-0)`
+                backgroundColor: neutralColors[50]
               }
             }
           } : void 0,
@@ -28707,10 +28708,10 @@ function ListRow({
         root: {
           transition: "background-color 0.15s ease",
           "&:hover": {
-            backgroundColor: `var(--mantine-color-${colors.neutral}-0)`
+            backgroundColor: neutralColors[50]
           },
           "&:focus-visible": {
-            outline: `2px solid var(--mantine-color-${colors.primary}-5)`,
+            outline: `2px solid ${brandColors.indigo}`,
             outlineOffset: "-2px"
           }
         }
@@ -29939,7 +29940,7 @@ function PhotoCropModal({
         style: {
           position: "relative",
           height: 320,
-          borderRadius: "var(--mantine-radius-md)",
+          borderRadius: radii.md,
           overflow: "hidden",
           background: neutralColors[900]
         },
@@ -30055,32 +30056,24 @@ function StatCard({
   trend,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      bg: `${color}.0`,
-      style: { border: `1px solid var(--mantine-color-${color}-2)` },
-      ...rest,
-      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "xs",
-              fw: 600,
-              tt: "uppercase",
-              c: `${color}.6`,
-              style: { letterSpacing: "0.05em" },
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
-          trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: trend })
-        ] }),
-        icon && /* @__PURE__ */ jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx(Card, { bg: `${color}.0`, bd: `1px solid ${color}.2`, ...rest, children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          tt: "uppercase",
+          c: `${color}.6`,
+          style: { letterSpacing: "0.05em" },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
+      trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: trend })
+    ] }),
+    icon && /* @__PURE__ */ jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
+  ] }) });
 }
 const DEFAULT_COLOR_MAP = {
   active: colors.success,
@@ -30126,7 +30119,7 @@ function LoadingSpinner({ size: size2 = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: "var(--mantine-color-gray-3)",
+        stroke: neutralColors[300],
         style: { position: "absolute", inset: 0 },
         "aria-hidden": "true",
         children: paths
@@ -30136,7 +30129,7 @@ function LoadingSpinner({ size: size2 = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: "var(--mantine-color-indigo-5)",
+        stroke: brandColors.indigo,
         style: { position: "absolute", inset: 0, animation: "fillUp 1.4s ease-in-out infinite" },
         "aria-hidden": "true",
         children: paths
@@ -30187,14 +30180,14 @@ function SideNav({ items, onItemClick, color = "indigo" }) {
       onClick: () => onItemClick(item.id),
       color,
       variant: "light",
-      style: { borderRadius: "var(--mantine-radius-md)" },
+      style: { borderRadius: radii.md },
       styles: {
         root: {
-          color: item.active ? void 0 : "var(--mantine-color-gray-5)",
+          color: item.active ? void 0 : neutralColors[500],
           fontWeight: item.active ? 500 : 400
         },
         section: {
-          color: item.active ? void 0 : "var(--mantine-color-gray-4)"
+          color: item.active ? void 0 : neutralColors[400]
         }
       }
     },
@@ -30403,7 +30396,7 @@ function InvestorProfileCard({
             background: "none",
             border: "none",
             padding: 0,
-            borderRadius: "var(--mantine-radius-md)",
+            borderRadius: radii.md,
             flexShrink: 0
           },
           children: [
@@ -30417,7 +30410,7 @@ function InvestorProfileCard({
                 style: {
                   position: "absolute",
                   inset: 0,
-                  borderRadius: "var(--mantine-radius-md)",
+                  borderRadius: radii.md,
                   backgroundColor: `${neutralColors[900]}80`,
                   display: "flex",
                   alignItems: "center",
@@ -30431,7 +30424,7 @@ function InvestorProfileCard({
                 style: {
                   position: "absolute",
                   inset: 0,
-                  borderRadius: "var(--mantine-radius-md)",
+                  borderRadius: radii.md,
                   backgroundColor: `${neutralColors[900]}73`,
                   display: "flex",
                   alignItems: "center",
@@ -30548,8 +30541,8 @@ function WalletList({
         justify: "space-between",
         p: "xs",
         style: {
-          borderRadius: "var(--mantine-radius-sm)",
-          border: "1px solid var(--mantine-color-default-border)"
+          borderRadius: radii.sm,
+          border: `1px solid ${neutralColors[200]}`
         },
         children: [
           /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
@@ -30784,6 +30777,7 @@ export {
   notify,
   passwordSchema,
   phoneSchema,
+  radii,
   semanticColors,
   theme,
   truncateAddress,