@fairmint/ui 0.2.13 → 0.2.15

package/dist/fairmint-ui.cjs

@@ -26820,110 +26820,6 @@ const AVATAR_PALETTE = [
   colors.accent2,
   colors.accent3
 ];
-const ActionIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionIcon$1, { color: colors.primary, variant: "subtle", ...props, ref }));
-ActionIcon.displayName = "ActionIcon";
-function Alert(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Alert$1, { ...props });
-}
-const Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
-Avatar.displayName = "Avatar";
-const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "light", ...props, ref }));
-Badge.displayName = "Badge";
-const Button = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { color: colors.primary, ...props, ref }));
-Button.displayName = "Button";
-const Card = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Card$1, { padding: "lg", radius: "xl", withBorder: true, ...props, ref }));
-Card.displayName = "Card";
-const Checkbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
-Checkbox.displayName = "Checkbox";
-function Drawer(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
-}
-function Loader(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { ...props });
-}
-function MenuBase(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Menu$1, { shadow: "md", ...props });
-}
-const Menu = Object.assign(MenuBase, {
-  Target: Menu$1.Target,
-  Dropdown: Menu$1.Dropdown,
-  Item: Menu$1.Item,
-  Label: Menu$1.Label,
-  Divider: Menu$1.Divider
-});
-function Modal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal$1, { centered: true, radius: "lg", ...props });
-}
-const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput$1, { size: "md", ...props, ref }));
-PasswordInput.displayName = "PasswordInput";
-const Select = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Select$1, { size: "md", ...props, ref }));
-Select.displayName = "Select";
-function Skeleton(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton$1, { ...props });
-}
-const Switch = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Switch$1, { color: colors.primary, ...props, ref }));
-Switch.displayName = "Switch";
-function TableBase(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Table$1, { ...props });
-}
-const Table = Object.assign(TableBase, {
-  Thead: Table$1.Thead,
-  Tbody: Table$1.Tbody,
-  Tr: Table$1.Tr,
-  Th: Table$1.Th,
-  Td: Table$1.Td,
-  Tfoot: Table$1.Tfoot,
-  Caption: Table$1.Caption
-});
-function TabsBase(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { color: colors.primary, ...props });
-}
-const Tabs = Object.assign(TabsBase, {
-  List: Tabs$1.List,
-  Tab: Tabs$1.Tab,
-  Panel: Tabs$1.Panel
-});
-const TextInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(TextInput$1, { size: "md", ...props, ref }));
-TextInput.displayName = "TextInput";
-function Tooltip(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip$1, { fz: "xs", ...props });
-}
-function ErrorFallback({
-  title = "Something went wrong",
-  description = "We've been notified and are working on a fix.",
-  onAction,
-  actionLabel = "Reload Page",
-  error: error2
-}) {
-  if (error2 !== void 0) {
-    console.error("[ErrorFallback]", error2);
-  }
-  const handleAction = onAction ?? (() => window.location.reload());
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, { size: "sm", py: "xl", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { align: "center", gap: "md", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Title, { order: 2, children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { c: "dimmed", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleAction, children: actionLabel })
-  ] }) });
-}
-function FairmintLogo({
-  src = "https://imagedelivery.net/Lm6ChJXR4cIKKycsNMvGjA/0367be38-c9d8-4206-aaae-eba5ff830600/public",
-  width = 140,
-  height = 30,
-  className,
-  alt = "Fairmint"
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src,
-      alt,
-      width,
-      height,
-      className,
-      style: { objectFit: "contain" }
-    }
-  );
-}
 const radii = {
   xs: "0.25rem",
   sm: "0.375rem",
@@ -27027,12 +26923,16 @@ const info = [
   "#155B75",
   "#164C63"
 ];
+const typography = {
+  fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+  headingFontFamily: '"Plus Jakarta Sans", sans-serif'
+};
 const theme = createTheme({
   primaryColor: "indigo",
   colors: { indigo, gray: neutral, fairmintBlue, fairmintPurple, success, warning, error, info },
-  fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+  fontFamily: typography.fontFamily,
   headings: {
-    fontFamily: '"Plus Jakarta Sans", sans-serif',
+    fontFamily: typography.headingFontFamily,
     fontWeight: "700"
   },
   radius: radii,
@@ -27082,6 +26982,49 @@ const theme = createTheme({
     }
   }
 });
+const fairmintCssVariables = () => ({
+  variables: {
+    "--fairmint-font-headings": typography.headingFontFamily,
+    "--fairmint-font-body": typography.fontFamily
+  },
+  light: {
+    /** Large decorative background text on error/empty pages. */
+    "--fairmint-watermark-color": neutral[1],
+    /** Supporting / muted text (subtitles, secondary labels). Replaces c="dimmed" and neutral.5 */
+    "--fairmint-color-text-secondary": neutral[5],
+    /** Faint metadata text (timestamps, tertiary labels). Replaces neutral.4 */
+    "--fairmint-color-text-tertiary": neutral[4],
+    /** Background tint for selected / active rows. Replaces primary.0 */
+    "--fairmint-color-surface-selected": indigo[0]
+  },
+  dark: {
+    "--fairmint-watermark-color": neutral[7],
+    "--fairmint-color-text-secondary": neutral[4],
+    "--fairmint-color-text-tertiary": neutral[5],
+    "--fairmint-color-surface-selected": indigo[9]
+  }
+});
+const fairmintVars = {
+  /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */
+  colorTextSecondary: `var(--fairmint-color-text-secondary, ${neutral[5]})`,
+  /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */
+  colorTextTertiary: `var(--fairmint-color-text-tertiary, ${neutral[4]})`,
+  /** Background tint for selected / active rows. Adapts to color scheme. */
+  colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${indigo[0]})`,
+  /** Large decorative watermark on error/empty pages. Adapts to color scheme. */
+  watermarkColor: `var(--fairmint-watermark-color, ${neutral[1]})`,
+  /** Heading font family (Plus Jakarta Sans). */
+  fontHeadings: `var(--fairmint-font-headings, ${typography.headingFontFamily})`,
+  /** Body font family (Inter). */
+  fontBody: `var(--fairmint-font-body, ${typography.fontFamily})`
+};
+function createFairmintMantineProviderProps(colorScheme = "light") {
+  return {
+    theme,
+    cssVariablesResolver: fairmintCssVariables,
+    defaultColorScheme: colorScheme
+  };
+}
 const brandColors = {
   blue: "#0A4EFB",
   purple: "#9E03FF",
@@ -27106,15 +27049,127 @@ const semanticColors = {
   error: "#F04438",
   info: "#06AED4"
 };
+const ActionIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionIcon$1, { color: colors.primary, variant: "subtle", ...props, ref }));
+ActionIcon.displayName = "ActionIcon";
+function Alert(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Alert$1, { ...props });
+}
+const Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
+Avatar.displayName = "Avatar";
+const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "light", ...props, ref }));
+Badge.displayName = "Badge";
+const Button = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { color: colors.primary, ...props, ref }));
+Button.displayName = "Button";
+const Card = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Card$1, { padding: "lg", radius: "xl", withBorder: true, ...props, ref }));
+Card.displayName = "Card";
+const Checkbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
+Checkbox.displayName = "Checkbox";
+function Drawer(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
+}
+function Loader(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { ...props });
+}
+function MenuBase(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu$1, { shadow: "md", ...props });
+}
+const Menu = Object.assign(MenuBase, {
+  Target: Menu$1.Target,
+  Dropdown: Menu$1.Dropdown,
+  Item: Menu$1.Item,
+  Label: Menu$1.Label,
+  Divider: Menu$1.Divider
+});
+function Modal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal$1, { centered: true, radius: "lg", ...props });
+}
+const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput$1, { size: "md", ...props, ref }));
+PasswordInput.displayName = "PasswordInput";
+const Select = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Select$1, { size: "md", ...props, ref }));
+Select.displayName = "Select";
+function Skeleton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton$1, { ...props });
+}
+const Switch = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Switch$1, { color: colors.primary, ...props, ref }));
+Switch.displayName = "Switch";
+function TableBase(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Table$1, { ...props });
+}
+const Table = Object.assign(TableBase, {
+  Thead: Table$1.Thead,
+  Tbody: Table$1.Tbody,
+  Tr: Table$1.Tr,
+  Th: Table$1.Th,
+  Td: Table$1.Td,
+  Tfoot: Table$1.Tfoot,
+  Caption: Table$1.Caption
+});
+function TabsBase(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { color: colors.primary, ...props });
+}
+const Tabs = Object.assign(TabsBase, {
+  List: Tabs$1.List,
+  Tab: Tabs$1.Tab,
+  Panel: Tabs$1.Panel
+});
+const TextInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(TextInput$1, { size: "md", ...props, ref }));
+TextInput.displayName = "TextInput";
+function Tooltip(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip$1, { fz: "xs", ...props });
+}
+function ErrorFallback({
+  title = "Something went wrong",
+  description = "We've been notified and are working on a fix.",
+  onAction,
+  actionLabel = "Reload Page",
+  error: error2
+}) {
+  if (error2 !== void 0) {
+    console.error("[ErrorFallback]", error2);
+  }
+  const handleAction = onAction ?? (() => window.location.reload());
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { size: "sm", py: "xl", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { align: "center", gap: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title, { order: 2, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text, { c: fairmintVars.colorTextSecondary, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleAction, children: actionLabel })
+  ] }) });
+}
+function FairmintLogo({
+  src = "https://imagedelivery.net/Lm6ChJXR4cIKKycsNMvGjA/0367be38-c9d8-4206-aaae-eba5ff830600/public",
+  width = 140,
+  height = 30,
+  className,
+  alt = "Fairmint"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt,
+      width,
+      height,
+      className,
+      style: { objectFit: "contain" }
+    }
+  );
+}
 function FairmintProvider({
   children,
   colorScheme = "light",
   notificationPosition = "top-right"
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(MantineProvider, { theme, defaultColorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Notifications, { position: notificationPosition }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MantineProvider,
+    {
+      theme,
+      defaultColorScheme: colorScheme,
+      cssVariablesResolver: fairmintCssVariables,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Notifications, { position: notificationPosition }),
+        children
+      ]
+    }
+  );
 }
 const emailSchema = stringType().email("Please enter a valid email address");
 function EmailField({ error: error2, ...rest }) {
@@ -28229,7 +28284,7 @@ function FormField({
       }
     ),
     children && inputProps.error && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "error", role: "alert", children: inputProps.error }),
-    children && description && !inputProps.error && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", children: description })
+    children && description && !inputProps.error && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: description })
   ] });
 }
 const passwordSchema = stringType().min(8, "Password must be at least 8 characters");
@@ -28519,9 +28574,9 @@ function EmptyState({
   actionColor = colors.primary
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { align: "center", gap: "md", py: "xl", role: "status", children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: `${colors.neutral}.5`, fz: "2.5rem", children: icon }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: fairmintVars.colorTextSecondary, fz: "2.5rem", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx(Title, { order: 4, ta: "center", children: title }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(Text, { c: "dimmed", size: "sm", ta: "center", maw: 360, children: description }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(Text, { c: fairmintVars.colorTextSecondary, size: "sm", ta: "center", maw: 360, children: description }),
     actionLabel && onAction && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", color: actionColor, onClick: onAction, children: actionLabel })
   ] });
 }
@@ -28709,6 +28764,102 @@ function EditableSection({
     ] }) : readView
   ] });
 }
+const ERROR_CONFIGS = {
+  400: {
+    title: "Bad request",
+    description: "Your request could not be understood. Please check your input and try again.",
+    actionLabel: "Go back"
+  },
+  401: {
+    title: "Authentication required",
+    description: "You need to sign in to access this page. If you believe this is a mistake, please contact support.",
+    actionLabel: "Go back"
+  },
+  403: {
+    title: "Access denied",
+    description: "You don't have permission to access this page. Contact support if you believe this is a mistake.",
+    actionLabel: "Go back"
+  },
+  404: {
+    title: "Nothing to see here",
+    description: "The page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL.",
+    actionLabel: "Go back"
+  },
+  429: {
+    title: "Too many requests",
+    description: "You have made too many requests in a short period. Please wait a moment before trying again.",
+    actionLabel: "Try again"
+  },
+  500: {
+    title: "Something went wrong",
+    description: "An unexpected error occurred on our end. We have been notified and are working on a fix.",
+    actionLabel: "Reload page"
+  },
+  503: {
+    title: "Service unavailable",
+    description: "We are temporarily unavailable for scheduled maintenance. Please check back shortly.",
+    actionLabel: "Try again"
+  }
+};
+function defaultAction(errorCode) {
+  if (errorCode >= 500 || errorCode === 429) return () => window.location.reload();
+  return () => {
+    if (window.history.length > 1) window.history.back();
+    else window.location.assign(window.location.origin);
+  };
+}
+function ErrorPage({
+  errorCode = 404,
+  title,
+  description,
+  onAction,
+  actionLabel
+}) {
+  const config2 = ERROR_CONFIGS[errorCode] ?? ERROR_CONFIGS[500];
+  const resolvedTitle = title ?? config2.title;
+  const resolvedDescription = description ?? config2.description;
+  const resolvedActionLabel = actionLabel ?? config2.actionLabel;
+  const handleAction = onAction ?? defaultAction(errorCode);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Flex,
+    {
+      pos: "relative",
+      align: "center",
+      justify: "center",
+      style: { minHeight: "100dvh", overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            pos: "absolute",
+            "aria-hidden": true,
+            fw: 900,
+            lh: 1,
+            w: "100%",
+            ta: "center",
+            c: fairmintVars.watermarkColor,
+            ff: fairmintVars.fontHeadings,
+            style: {
+              fontSize: "clamp(200px, 30vw, 380px)",
+              userSelect: "none",
+              letterSpacing: "-0.04em",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none"
+            },
+            children: errorCode
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Container, { size: "sm", pos: "relative", style: { zIndex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { align: "center", gap: "lg", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Title, { order: 2, ta: "center", children: resolvedTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { c: fairmintVars.colorTextSecondary, ta: "center", maw: 500, size: "lg", children: resolvedDescription }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: colors.primary, onClick: handleAction, children: resolvedActionLabel })
+        ] }) })
+      ]
+    }
+  );
+}
 const DefaultChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -28747,14 +28898,22 @@ function ListRow({
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarSrc, alt: title, radius: "md", size: 40, color: avatarColor, children: avatarFallback ?? title.charAt(0).toUpperCase() }),
     /* @__PURE__ */ jsxRuntime.jsxs(Box, { flex: 1, miw: 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 500, size: "sm", truncate: true, children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", lh: 1.3, children: subtitle })
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, lh: 1.3, children: subtitle })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: 6, wrap: "nowrap", children: [
       rightSection ?? (value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 2, align: "flex-end", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 500, size: "sm", style: { whiteSpace: "nowrap" }, children: value }),
-        valueSubtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: "nowrap" }, children: valueSubtitle })
+        valueSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
+          Text,
+          {
+            size: "xs",
+            c: fairmintVars.colorTextSecondary,
+            style: { whiteSpace: "nowrap" },
+            children: valueSubtitle
+          }
+        )
       ] })),
-      displayChevron && (chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Box, { c: `${colors.neutral}.4`, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultChevronIcon, {}) }))
+      displayChevron && (chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Box, { c: fairmintVars.colorTextTertiary, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultChevronIcon, {}) }))
     ] })
   ] });
   const animationStyle = animate ? {
@@ -28766,7 +28925,7 @@ function ListRow({
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        bg: isSelected ? `${colors.primary}.0` : void 0,
+        bg: isSelected ? fairmintVars.colorSurfaceSelected : void 0,
         py: "sm",
         px: "md",
         style: animationStyle,
@@ -28777,7 +28936,7 @@ function ListRow({
   return /* @__PURE__ */ jsxRuntime.jsx(
     UnstyledButton,
     {
-      bg: isSelected ? `${colors.primary}.0` : void 0,
+      bg: isSelected ? fairmintVars.colorSurfaceSelected : void 0,
       onClick,
       w: "100%",
       py: "sm",
@@ -30047,9 +30206,9 @@ function PhotoCropModal({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: "Drag to reposition · Scroll or pinch to zoom" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, ta: "center", children: "Drag to reposition · Scroll or pinch to zoom" }),
     /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "flex-end", gap: "xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "subtle", color: "gray", onClick: onClose, disabled: isConfirming, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "subtle", color: colors.neutral, onClick: onClose, disabled: isConfirming, children: "Cancel" }),
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleConfirm, loading: isConfirming, disabled: !croppedAreaPixels, children: "Apply" })
     ] })
   ] }) });
@@ -30148,7 +30307,7 @@ function StatCard({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
-      trend && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", children: trend })
+      trend && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: trend })
     ] }),
     icon && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
   ] }) });
@@ -30243,7 +30402,7 @@ function PageHeader({ title, subtitle, action }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "space-between", align: "flex-start", mb: "lg", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 4, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title, { order: 2, children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { c: "dimmed", size: "sm", children: subtitle })
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { c: fairmintVars.colorTextSecondary, size: "sm", children: subtitle })
     ] }),
     action
   ] });
@@ -30539,46 +30698,92 @@ function InvestorProfileCard({
             }
           ) }) : /* @__PURE__ */ jsxRuntime.jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultPencilIcon, {}) }))
         ] }),
-        email && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: `${colors.neutral}.5`, children: email }),
-        memberSinceText && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: `${colors.neutral}.4`, children: memberSinceText }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: `${colors.neutral}.5`, children: subtitle })
+        email && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: fairmintVars.colorTextSecondary, children: email }),
+        memberSinceText && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextTertiary, children: memberSinceText }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: subtitle })
       ] })
     ] }),
     children
   ] });
 }
-const DEFAULT_TYPE_LABELS = {
+const SYSTEM_TYPES = /* @__PURE__ */ new Set(["fairmint", "privy"]);
+const TYPE_LABELS = {
   fairmint: "Fairmint Wallet",
   privy: "Fairmint Wallet",
   manual: "Manual"
 };
-function getTypeLabel(type, custom2) {
-  if (custom2?.[type]) return custom2[type];
-  return DEFAULT_TYPE_LABELS[type] ?? type;
+function normalizeWalletType(type) {
+  return String(type ?? "").trim().toLowerCase();
+}
+function getWalletLabel(type, custom2) {
+  const key = normalizeWalletType(type);
+  const rawType = typeof type === "string" ? type : String(type ?? "");
+  if (custom2?.[key]) return custom2[key];
+  if (custom2?.[rawType]) return custom2[rawType];
+  return TYPE_LABELS[key] ?? rawType;
+}
+function getWalletDisplayName(wallet, customLabels) {
+  const label = wallet.label?.trim();
+  if (label) return label;
+  return getWalletLabel(wallet.type, customLabels);
+}
+function isSystemWalletType(type) {
+  return SYSTEM_TYPES.has(normalizeWalletType(type));
+}
+function isRemovableWalletType(type) {
+  return !isSystemWalletType(type);
+}
+function walletKey(w) {
+  return `${normalizeWalletType(w.type)}:${w.address.toLowerCase()}`;
 }
 function WalletList({
   wallets,
   onAdd,
   onRemove,
+  onSetDefault,
+  onLabel,
+  onConnect,
+  getExplorerUrl,
   readOnly = false,
   addLoading = false,
   removeLoading = false,
+  setDefaultLoading = false,
+  setDefaultAddress,
+  labelLoading = false,
+  labelAddress,
+  connectLoading = false,
   emptyIcon,
   copyIcon,
   copiedIcon,
   removeIcon,
   addIcon,
+  defaultIcon,
+  renameIcon,
+  explorerIcon,
+  connectIcon,
   typeLabels,
-  removableTypes = ["manual"]
+  removableTypes,
+  children
 }) {
+  const normalizeWalletAddress = React.useCallback(
+    (address) => address?.trim().toLowerCase() ?? "",
+    []
+  );
   const [newAddress, setNewAddress] = React.useState("");
   const [addressError, setAddressError] = React.useState(null);
   const [showAddForm, setShowAddForm] = React.useState(false);
   const [walletToRemove, setWalletToRemove] = React.useState(null);
   const [copiedAddress, setCopiedAddress] = React.useState(null);
+  const [renamingAddress, setRenamingAddress] = React.useState(null);
+  const [renameValue, setRenameValue] = React.useState("");
+  const [labelError, setLabelError] = React.useState(null);
+  const [setDefaultError, setSetDefaultError] = React.useState(null);
   const copyTimeoutRef = React.useRef(void 0);
   React.useEffect(() => () => clearTimeout(copyTimeoutRef.current), []);
-  const copyAddress = async (address) => {
+  React.useEffect(() => {
+    if (readOnly) setRenamingAddress(null);
+  }, [readOnly]);
+  const copyAddress = React.useCallback(async (address) => {
     try {
       await navigator.clipboard.writeText(address);
       clearTimeout(copyTimeoutRef.current);
@@ -30586,9 +30791,27 @@ function WalletList({
       copyTimeoutRef.current = setTimeout(() => setCopiedAddress(null), 2e3);
     } catch {
     }
-  };
+  }, []);
   const canAdd = !readOnly && !!onAdd;
   const canRemove = !readOnly && !!onRemove;
+  const canSetDefault = !readOnly && !!onSetDefault;
+  const canLabel = !readOnly && !!onLabel;
+  const canConnect = !readOnly && !!onConnect;
+  const getSafeExplorerUrl = React.useCallback(
+    (address) => {
+      if (!getExplorerUrl) return null;
+      try {
+        const url = getExplorerUrl(address);
+        if (!url) return null;
+        const parsed = new URL(url);
+        if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
+        return parsed.toString();
+      } catch {
+        return null;
+      }
+    },
+    [getExplorerUrl]
+  );
   const handleAdd = async () => {
     const trimmed = newAddress.trim();
     const error2 = validateEthereumAddress(trimmed);
@@ -30616,8 +30839,191 @@ function WalletList({
       setRemoveError("Failed to remove wallet. Please try again.");
     }
   };
-  if (wallets.length === 0 && !showAddForm) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  const handleSetDefault = async (address) => {
+    setSetDefaultError(null);
+    try {
+      await onSetDefault?.(address);
+    } catch {
+      setSetDefaultError("Failed to set default wallet. Please try again.");
+    }
+  };
+  const handleLabelSave = async (address) => {
+    setLabelError(null);
+    try {
+      await onLabel?.(address, renameValue.trim() || null);
+      setRenamingAddress((current) => current === address ? null : current);
+    } catch {
+      setLabelError("Failed to update label. Please try again.");
+    }
+  };
+  const hasWallets = wallets.length > 0;
+  if (!hasWallets && !showAddForm && !canConnect) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EmptyState,
+        {
+          icon: emptyIcon,
+          title: "No wallets connected",
+          description: "Add a wallet address to receive equity on-chain.",
+          actionLabel: canAdd ? "Add Wallet" : void 0,
+          onAction: canAdd ? () => setShowAddForm(true) : void 0
+        }
+      ),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
+    wallets.map((w) => {
+      const normalizedWalletAddress = normalizeWalletAddress(w.address);
+      const setDefaultActionLoading = setDefaultLoading && (!setDefaultAddress || normalizeWalletAddress(setDefaultAddress) === normalizedWalletAddress);
+      const labelActionLoading = labelLoading && (!labelAddress || normalizeWalletAddress(labelAddress) === normalizedWalletAddress);
+      const explorerUrl = getSafeExplorerUrl(w.address);
+      return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Group,
+          {
+            justify: "space-between",
+            p: "xs",
+            style: {
+              borderRadius: radii.sm,
+              border: `1px solid ${neutralColors[200]}`
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "xs", variant: "light", children: getWalletLabel(w.type, typeLabels) }),
+                w.label && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: w.label }),
+                w.defaultRecipient && /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "xs", color: colors.success, variant: "light", children: "Default" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", ff: "monospace", children: truncateAddress(w.address) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: 4, children: [
+                copyIcon && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: copiedAddress === w.address ? "Copied!" : "Copy address", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ActionIcon,
+                  {
+                    variant: "subtle",
+                    size: "sm",
+                    onClick: () => copyAddress(w.address),
+                    "aria-label": "Copy wallet address",
+                    children: copiedAddress === w.address ? copiedIcon ?? copyIcon : copyIcon
+                  }
+                ) }),
+                canSetDefault && defaultIcon && !w.defaultRecipient && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: "Set as default recipient", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ActionIcon,
+                  {
+                    variant: "subtle",
+                    size: "sm",
+                    onClick: () => handleSetDefault(w.address),
+                    loading: setDefaultActionLoading,
+                    disabled: setDefaultActionLoading,
+                    "aria-label": "Set as default wallet",
+                    children: defaultIcon
+                  }
+                ) }),
+                canLabel && renameIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                  Tooltip,
+                  {
+                    label: renamingAddress === w.address ? "Cancel rename" : "Rename wallet",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ActionIcon,
+                      {
+                        variant: "subtle",
+                        size: "sm",
+                        onClick: () => {
+                          setLabelError(null);
+                          if (renamingAddress === w.address) {
+                            setRenamingAddress(null);
+                          } else {
+                            setRenamingAddress(w.address);
+                            setRenameValue(w.label ?? "");
+                          }
+                        },
+                        "aria-label": "Rename wallet",
+                        children: renameIcon
+                      }
+                    )
+                  }
+                ),
+                explorerUrl && explorerIcon && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: "View on block explorer", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Anchor,
+                  {
+                    href: explorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    "aria-label": "View on block explorer",
+                    c: colors.primary,
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "1.625rem",
+                      height: "1.625rem",
+                      borderRadius: radii.sm
+                    },
+                    children: explorerIcon
+                  }
+                ) }),
+                canRemove && removeIcon && (removableTypes ? removableTypes.some(
+                  (t) => normalizeWalletType(t) === normalizeWalletType(w.type)
+                ) : isRemovableWalletType(w.type)) && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: "Remove wallet", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ActionIcon,
+                  {
+                    variant: "subtle",
+                    size: "sm",
+                    color: colors.error,
+                    onClick: () => setWalletToRemove(w.address),
+                    disabled: removeLoading,
+                    "aria-label": "Remove wallet",
+                    children: removeIcon
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        renamingAddress === w.address && /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", mt: "xs", align: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TextInput,
+            {
+              value: renameValue,
+              onChange: (e) => {
+                setRenameValue(e.currentTarget.value);
+                setLabelError(null);
+              },
+              placeholder: getWalletLabel(w.type, typeLabels),
+              size: "xs",
+              style: { flex: 1 },
+              "aria-label": "Wallet label",
+              maxLength: 50,
+              error: labelError
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              size: "xs",
+              loading: labelActionLoading,
+              disabled: labelActionLoading,
+              onClick: () => handleLabelSave(w.address),
+              children: "Save"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              size: "xs",
+              variant: "subtle",
+              color: colors.neutral,
+              onClick: () => {
+                setRenamingAddress(null);
+                setLabelError(null);
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }, walletKey(w));
+    }),
+    setDefaultError && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: colors.error, children: setDefaultError }),
+    !hasWallets && !showAddForm && /* @__PURE__ */ jsxRuntime.jsx(
       EmptyState,
       {
         icon: emptyIcon,
@@ -30626,52 +31032,19 @@ function WalletList({
         actionLabel: canAdd ? "Add Wallet" : void 0,
         onAction: canAdd ? () => setShowAddForm(true) : void 0
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
-    wallets.map((w) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Group,
+    ),
+    canConnect && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
       {
-        justify: "space-between",
-        p: "xs",
-        style: {
-          borderRadius: radii.sm,
-          border: `1px solid ${neutralColors[200]}`
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "xs", variant: "light", children: getTypeLabel(w.type, typeLabels) }),
-            w.label && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: `${colors.neutral}.5`, children: w.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", ff: "monospace", children: truncateAddress(w.address) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: 4, children: [
-            copyIcon && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: copiedAddress === w.address ? "Copied!" : "Copy address", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ActionIcon,
-              {
-                variant: "subtle",
-                size: "sm",
-                onClick: () => copyAddress(w.address),
-                "aria-label": "Copy wallet address",
-                children: copiedAddress === w.address ? copiedIcon ?? copyIcon : copyIcon
-              }
-            ) }),
-            canRemove && removeIcon && removableTypes.includes(w.type) && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: "Remove wallet", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ActionIcon,
-              {
-                variant: "subtle",
-                size: "sm",
-                color: colors.error,
-                onClick: () => setWalletToRemove(w.address),
-                disabled: removeLoading,
-                "aria-label": "Remove wallet",
-                children: removeIcon
-              }
-            ) })
-          ] })
-        ]
-      },
-      w.address
-    )),
+        variant: "light",
+        size: "xs",
+        leftSection: connectIcon,
+        onClick: onConnect,
+        loading: connectLoading,
+        mt: "xs",
+        children: "Connect Wallet"
+      }
+    ),
     canAdd && (showAddForm ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", mt: "xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         TextInput,
@@ -30702,7 +31075,7 @@ function WalletList({
           children: "Cancel"
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    ] }) : hasWallets ? /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         variant: "light",
@@ -30712,14 +31085,15 @@ function WalletList({
         mt: "xs",
         children: "Add Wallet"
       }
-    )),
+    ) : null),
+    children,
     /* @__PURE__ */ jsxRuntime.jsx(
       ConfirmDialog,
       {
         title: "Remove Wallet",
         message: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", children: "Are you sure you want to remove this wallet address? This action cannot be undone." }),
-          walletToRemove && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", ff: "monospace", c: `${colors.neutral}.5`, children: walletToRemove }),
+          walletToRemove && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", ff: "monospace", c: fairmintVars.colorTextSecondary, children: walletToRemove }),
           removeError && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: colors.error, children: removeError })
         ] }),
         opened: walletToRemove !== null,
@@ -30797,6 +31171,7 @@ exports.EmailField = EmailField;
 exports.EmptyState = EmptyState;
 exports.EquityGrantCard = EquityGrantCard;
 exports.ErrorFallback = ErrorFallback;
+exports.ErrorPage = ErrorPage;
 exports.EthereumAddressField = EthereumAddressField;
 exports.FairmintLogo = FairmintLogo;
 exports.FairmintProvider = FairmintProvider;
@@ -30855,9 +31230,12 @@ exports.ZERO_ETHEREUM_ADDRESS = ZERO_ETHEREUM_ADDRESS;
 exports.ZipField = ZipField;
 exports.brandColors = brandColors;
 exports.colors = colors;
+exports.createFairmintMantineProviderProps = createFairmintMantineProviderProps;
 exports.createZipSchema = createZipSchema;
 exports.emailSchema = emailSchema;
 exports.ethereumAddressSchema = ethereumAddressSchema;
+exports.fairmintCssVariables = fairmintCssVariables;
+exports.fairmintVars = fairmintVars;
 exports.formatCurrency = formatCurrency;
 exports.formatCurrencyPrecise = formatCurrencyPrecise;
 exports.formatDate = formatDate;
@@ -30867,9 +31245,14 @@ exports.formatPhone = formatPhone;
 exports.formatPhoneDisplay = formatPhoneDisplay;
 exports.formatPreciseWithCurrency = formatPreciseWithCurrency;
 exports.getAvatarColor = getAvatarColor;
+exports.getWalletDisplayName = getWalletDisplayName;
+exports.getWalletLabel = getWalletLabel;
 exports.isEthereumAddress = isEthereumAddress;
+exports.isRemovableWalletType = isRemovableWalletType;
+exports.isSystemWalletType = isSystemWalletType;
 exports.neutralColors = neutralColors;
 exports.normalizePhone = normalizePhone;
+exports.normalizeWalletType = normalizeWalletType;
 exports.notify = notify;
 exports.passwordSchema = passwordSchema;
 exports.phoneSchema = phoneSchema;
@@ -30877,6 +31260,7 @@ exports.radii = radii;
 exports.semanticColors = semanticColors;
 exports.theme = theme;
 exports.truncateAddress = truncateAddress;
+exports.typography = typography;
 exports.useClickOutside = useClickOutside;
 exports.useClipboard = useClipboard;
 exports.useDebouncedCallback = useDebouncedCallback;
@@ -30891,6 +31275,7 @@ exports.useMediaQuery = useMediaQuery;
 exports.useScrollIntoView = useScrollIntoView;
 exports.useViewportSize = useViewportSize;
 exports.validateEthereumAddress = validateEthereumAddress;
+exports.walletKey = walletKey;
 exports.z = z;
 exports.zipSchema = zipSchema;
 //# sourceMappingURL=fairmint-ui.cjs.map