@fairmint/ui 0.2.12 → 0.2.14

package/dist/fairmint-ui.js

@@ -26802,110 +26802,6 @@ const AVATAR_PALETTE = [
   colors.accent2,
   colors.accent3
 ];
-const ActionIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(ActionIcon$1, { color: colors.primary, variant: "subtle", ...props, ref }));
-ActionIcon.displayName = "ActionIcon";
-function Alert(props) {
-  return /* @__PURE__ */ jsx(Alert$1, { ...props });
-}
-const Avatar = forwardRef((props, ref) => /* @__PURE__ */ jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
-Avatar.displayName = "Avatar";
-const Badge = forwardRef((props, ref) => /* @__PURE__ */ jsx(Badge$1, { variant: "light", ...props, ref }));
-Badge.displayName = "Badge";
-const Button = forwardRef((props, ref) => /* @__PURE__ */ jsx(Button$1, { color: colors.primary, ...props, ref }));
-Button.displayName = "Button";
-const Card = forwardRef((props, ref) => /* @__PURE__ */ jsx(Card$1, { padding: "lg", radius: "xl", withBorder: true, ...props, ref }));
-Card.displayName = "Card";
-const Checkbox = forwardRef((props, ref) => /* @__PURE__ */ jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
-Checkbox.displayName = "Checkbox";
-function Drawer(props) {
-  return /* @__PURE__ */ jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
-}
-function Loader(props) {
-  return /* @__PURE__ */ jsx(Loader$1, { ...props });
-}
-function MenuBase(props) {
-  return /* @__PURE__ */ 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__ */ jsx(Modal$1, { centered: true, radius: "lg", ...props });
-}
-const PasswordInput = forwardRef((props, ref) => /* @__PURE__ */ jsx(PasswordInput$1, { size: "md", ...props, ref }));
-PasswordInput.displayName = "PasswordInput";
-const Select = forwardRef((props, ref) => /* @__PURE__ */ jsx(Select$1, { size: "md", ...props, ref }));
-Select.displayName = "Select";
-function Skeleton(props) {
-  return /* @__PURE__ */ jsx(Skeleton$1, { ...props });
-}
-const Switch = forwardRef((props, ref) => /* @__PURE__ */ jsx(Switch$1, { color: colors.primary, ...props, ref }));
-Switch.displayName = "Switch";
-function TableBase(props) {
-  return /* @__PURE__ */ 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__ */ 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 = forwardRef((props, ref) => /* @__PURE__ */ jsx(TextInput$1, { size: "md", ...props, ref }));
-TextInput.displayName = "TextInput";
-function Tooltip(props) {
-  return /* @__PURE__ */ jsx(Tooltip$1, { ...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__ */ jsx(Container, { size: "sm", py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "md", children: [
-    /* @__PURE__ */ jsx(Title, { order: 2, children: title }),
-    /* @__PURE__ */ jsx(Text, { c: "dimmed", children: description }),
-    /* @__PURE__ */ 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__ */ jsx(
-    "img",
-    {
-      src,
-      alt,
-      width,
-      height,
-      className,
-      style: { objectFit: "contain" }
-    }
-  );
-}
 const radii = {
   xs: "0.25rem",
   sm: "0.375rem",
@@ -27009,12 +26905,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,
@@ -27064,6 +26964,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",
@@ -27088,15 +27031,127 @@ const semanticColors = {
   error: "#F04438",
   info: "#06AED4"
 };
+const ActionIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(ActionIcon$1, { color: colors.primary, variant: "subtle", ...props, ref }));
+ActionIcon.displayName = "ActionIcon";
+function Alert(props) {
+  return /* @__PURE__ */ jsx(Alert$1, { ...props });
+}
+const Avatar = forwardRef((props, ref) => /* @__PURE__ */ jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
+Avatar.displayName = "Avatar";
+const Badge = forwardRef((props, ref) => /* @__PURE__ */ jsx(Badge$1, { variant: "light", ...props, ref }));
+Badge.displayName = "Badge";
+const Button = forwardRef((props, ref) => /* @__PURE__ */ jsx(Button$1, { color: colors.primary, ...props, ref }));
+Button.displayName = "Button";
+const Card = forwardRef((props, ref) => /* @__PURE__ */ jsx(Card$1, { padding: "lg", radius: "xl", withBorder: true, ...props, ref }));
+Card.displayName = "Card";
+const Checkbox = forwardRef((props, ref) => /* @__PURE__ */ jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
+Checkbox.displayName = "Checkbox";
+function Drawer(props) {
+  return /* @__PURE__ */ jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
+}
+function Loader(props) {
+  return /* @__PURE__ */ jsx(Loader$1, { ...props });
+}
+function MenuBase(props) {
+  return /* @__PURE__ */ 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__ */ jsx(Modal$1, { centered: true, radius: "lg", ...props });
+}
+const PasswordInput = forwardRef((props, ref) => /* @__PURE__ */ jsx(PasswordInput$1, { size: "md", ...props, ref }));
+PasswordInput.displayName = "PasswordInput";
+const Select = forwardRef((props, ref) => /* @__PURE__ */ jsx(Select$1, { size: "md", ...props, ref }));
+Select.displayName = "Select";
+function Skeleton(props) {
+  return /* @__PURE__ */ jsx(Skeleton$1, { ...props });
+}
+const Switch = forwardRef((props, ref) => /* @__PURE__ */ jsx(Switch$1, { color: colors.primary, ...props, ref }));
+Switch.displayName = "Switch";
+function TableBase(props) {
+  return /* @__PURE__ */ 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__ */ 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 = forwardRef((props, ref) => /* @__PURE__ */ jsx(TextInput$1, { size: "md", ...props, ref }));
+TextInput.displayName = "TextInput";
+function Tooltip(props) {
+  return /* @__PURE__ */ 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__ */ jsx(Container, { size: "sm", py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "md", children: [
+    /* @__PURE__ */ jsx(Title, { order: 2, children: title }),
+    /* @__PURE__ */ jsx(Text, { c: fairmintVars.colorTextSecondary, children: description }),
+    /* @__PURE__ */ 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__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      width,
+      height,
+      className,
+      style: { objectFit: "contain" }
+    }
+  );
+}
 function FairmintProvider({
   children,
   colorScheme = "light",
   notificationPosition = "top-right"
 }) {
-  return /* @__PURE__ */ jsxs(MantineProvider, { theme, defaultColorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx(Notifications, { position: notificationPosition }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    MantineProvider,
+    {
+      theme,
+      defaultColorScheme: colorScheme,
+      cssVariablesResolver: fairmintCssVariables,
+      children: [
+        /* @__PURE__ */ jsx(Notifications, { position: notificationPosition }),
+        children
+      ]
+    }
+  );
 }
 const emailSchema = stringType().email("Please enter a valid email address");
 function EmailField({ error: error2, ...rest }) {
@@ -28211,7 +28266,7 @@ function FormField({
       }
     ),
     children && inputProps.error && /* @__PURE__ */ jsx(Text, { size: "xs", c: "error", role: "alert", children: inputProps.error }),
-    children && description && !inputProps.error && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: description })
+    children && description && !inputProps.error && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: description })
   ] });
 }
 const passwordSchema = stringType().min(8, "Password must be at least 8 characters");
@@ -28227,17 +28282,77 @@ function PasswordField({ error: error2, ...rest }) {
     }
   );
 }
-const phoneSchema = stringType().regex(/^\+?[\d\s\-().]{7,20}$/, "Please enter a valid phone number");
-function PhoneField({ error: error2, ...rest }) {
+const phoneSchema = stringType().refine((value) => {
+  if (!/^\+?[\d\s\-().]*$/.test(value)) return false;
+  const digits = value.replace(/\D/g, "");
+  if (value.startsWith("+")) {
+    if (digits.startsWith("1")) return digits.length === 11;
+    return digits.length >= 8 && digits.length <= 15;
+  }
+  return digits.length === 10 || digits.length === 11 && digits.startsWith("1");
+}, "Please enter a valid phone number");
+function formatPhone(raw) {
+  const hasPlus = raw.startsWith("+");
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return hasPlus ? "+" : "";
+  if (!hasPlus && digits.length === 11 && digits.startsWith("1")) {
+    return formatPhone(`+${digits}`);
+  }
+  if (hasPlus && digits.startsWith("1")) {
+    const local = digits.slice(1);
+    if (!local.length) return "+1";
+    if (local.length <= 3) return `+1 (${local}`;
+    if (local.length <= 6) return `+1 (${local.slice(0, 3)}) ${local.slice(3)}`;
+    return `+1 (${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6, 10)}`;
+  }
+  if (hasPlus) return `+${digits}`;
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+}
+function normalizePhone(formatted) {
+  const hasPlus = formatted.startsWith("+");
+  const digits = formatted.replace(/\D/g, "");
+  if (!digits) return "";
+  if (hasPlus) return `+${digits}`;
+  if (digits.length === 10) return `+1${digits}`;
+  return `+${digits}`;
+}
+const formatPhoneDisplay = formatPhone;
+function PhoneField({ error: error2, onChange, value, ...rest }) {
+  const inputRef = React__default.useRef(null);
+  const handleChange = (e) => {
+    const raw = e.target.value;
+    const hasPlus = raw.startsWith("+");
+    let digits = raw.replace(/\D/g, "");
+    const shouldFormatAsUsCountryCode = digits.startsWith("1") && (hasPlus || !hasPlus && digits.length > 10);
+    if (shouldFormatAsUsCountryCode) {
+      digits = digits.slice(0, 11);
+    } else {
+      digits = digits.slice(0, hasPlus ? 15 : 10);
+    }
+    const formatted = formatPhone(hasPlus || shouldFormatAsUsCountryCode ? `+${digits}` : digits);
+    e.target.value = formatted;
+    onChange?.(e);
+  };
+  const displayValue = typeof value === "string" ? formatPhone(value) : value;
+  React__default.useEffect(() => {
+    if (inputRef.current && displayValue != null && inputRef.current.value !== String(displayValue)) {
+      inputRef.current.value = String(displayValue);
+    }
+  }, [displayValue]);
   return /* @__PURE__ */ jsx(
     TextInput,
     {
+      ref: inputRef,
       type: "tel",
       label: rest.label ?? "Phone",
-      placeholder: rest.placeholder ?? "+1 (555) 000-0000",
+      placeholder: rest.placeholder ?? "(555) 000-0000",
       autoComplete: "tel",
+      ...rest,
       error: error2,
-      ...rest
+      value: displayValue,
+      onChange: handleChange
     }
   );
 }
@@ -28441,9 +28556,9 @@ function EmptyState({
   actionColor = colors.primary
 }) {
   return /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "md", py: "xl", role: "status", children: [
-    icon && /* @__PURE__ */ jsx(Box, { c: `${colors.neutral}.5`, fz: "2.5rem", children: icon }),
+    icon && /* @__PURE__ */ jsx(Box, { c: fairmintVars.colorTextSecondary, fz: "2.5rem", children: icon }),
     /* @__PURE__ */ jsx(Title, { order: 4, ta: "center", children: title }),
-    description && /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", ta: "center", maw: 360, children: description }),
+    description && /* @__PURE__ */ jsx(Text, { c: fairmintVars.colorTextSecondary, size: "sm", ta: "center", maw: 360, children: description }),
     actionLabel && onAction && /* @__PURE__ */ jsx(Button, { variant: "light", color: actionColor, onClick: onAction, children: actionLabel })
   ] });
 }
@@ -28631,6 +28746,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__ */ jsxs(
+    Flex,
+    {
+      pos: "relative",
+      align: "center",
+      justify: "center",
+      style: { minHeight: "100dvh", overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ 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__ */ jsx(Container, { size: "sm", pos: "relative", style: { zIndex: 1 }, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "lg", children: [
+          /* @__PURE__ */ jsx(Title, { order: 2, ta: "center", children: resolvedTitle }),
+          /* @__PURE__ */ jsx(Text, { c: fairmintVars.colorTextSecondary, ta: "center", maw: 500, size: "lg", children: resolvedDescription }),
+          /* @__PURE__ */ jsx(Button, { color: colors.primary, onClick: handleAction, children: resolvedActionLabel })
+        ] }) })
+      ]
+    }
+  );
+}
 const DefaultChevronIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -28669,14 +28880,22 @@ function ListRow({
     /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: title, radius: "md", size: 40, color: avatarColor, children: avatarFallback ?? title.charAt(0).toUpperCase() }),
     /* @__PURE__ */ jsxs(Box, { flex: 1, miw: 0, children: [
       /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", truncate: true, children: title }),
-      subtitle && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lh: 1.3, children: subtitle })
+      subtitle && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, lh: 1.3, children: subtitle })
     ] }),
     /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
       rightSection ?? (value !== void 0 && /* @__PURE__ */ jsxs(Stack, { gap: 2, align: "flex-end", children: [
         /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", style: { whiteSpace: "nowrap" }, children: value }),
-        valueSubtitle && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: "nowrap" }, children: valueSubtitle })
+        valueSubtitle && /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            c: fairmintVars.colorTextSecondary,
+            style: { whiteSpace: "nowrap" },
+            children: valueSubtitle
+          }
+        )
       ] })),
-      displayChevron && (chevronIcon ?? /* @__PURE__ */ jsx(Box, { c: `${colors.neutral}.4`, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(DefaultChevronIcon, {}) }))
+      displayChevron && (chevronIcon ?? /* @__PURE__ */ jsx(Box, { c: fairmintVars.colorTextTertiary, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(DefaultChevronIcon, {}) }))
     ] })
   ] });
   const animationStyle = animate ? {
@@ -28688,7 +28907,7 @@ function ListRow({
     return /* @__PURE__ */ jsx(
       Box,
       {
-        bg: isSelected ? `${colors.primary}.0` : void 0,
+        bg: isSelected ? fairmintVars.colorSurfaceSelected : void 0,
         py: "sm",
         px: "md",
         style: animationStyle,
@@ -28699,7 +28918,7 @@ function ListRow({
   return /* @__PURE__ */ jsx(
     UnstyledButton,
     {
-      bg: isSelected ? `${colors.primary}.0` : void 0,
+      bg: isSelected ? fairmintVars.colorSurfaceSelected : void 0,
       onClick,
       w: "100%",
       py: "sm",
@@ -29969,9 +30188,9 @@ function PhotoCropModal({
         )
       }
     ),
-    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: "Drag to reposition · Scroll or pinch to zoom" }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, ta: "center", children: "Drag to reposition · Scroll or pinch to zoom" }),
     /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "xs", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", onClick: onClose, disabled: isConfirming, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "subtle", color: colors.neutral, onClick: onClose, disabled: isConfirming, children: "Cancel" }),
       /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: isConfirming, disabled: !croppedAreaPixels, children: "Apply" })
     ] })
   ] }) });
@@ -30070,7 +30289,7 @@ function StatCard({
         }
       ),
       /* @__PURE__ */ jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
-      trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: trend })
+      trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: trend })
     ] }),
     icon && /* @__PURE__ */ jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
   ] }) });
@@ -30165,7 +30384,7 @@ function PageHeader({ title, subtitle, action }) {
   return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", mb: "lg", children: [
     /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
       /* @__PURE__ */ jsx(Title, { order: 2, children: title }),
-      subtitle && /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: subtitle })
+      subtitle && /* @__PURE__ */ jsx(Text, { c: fairmintVars.colorTextSecondary, size: "sm", children: subtitle })
     ] }),
     action
   ] });
@@ -30355,6 +30574,8 @@ function InvestorProfileCard({
   subtitle,
   children,
   onEditName,
+  editNameDisabled,
+  editNameTooltip,
   onUploadPhoto,
   photoUploading,
   editNameIcon,
@@ -30443,11 +30664,25 @@ function InvestorProfileCard({
         /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
           /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", children: displayName }),
           verificationStatus && /* @__PURE__ */ jsx(StatusBadge, { status: verificationStatus, size: "xs" }),
-          onEditName && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsx(DefaultPencilIcon, {}) })
+          onEditName && (editNameDisabled ? /* @__PURE__ */ jsx(Tooltip, { label: editNameTooltip ?? "Coming soon", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "sm",
+              "aria-label": "Edit name",
+              "aria-disabled": "true",
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              },
+              style: { opacity: 0.5, cursor: "not-allowed" },
+              children: editNameIcon ?? /* @__PURE__ */ jsx(DefaultPencilIcon, {})
+            }
+          ) }) : /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsx(DefaultPencilIcon, {}) }))
         ] }),
-        email && /* @__PURE__ */ jsx(Text, { size: "sm", c: `${colors.neutral}.5`, children: email }),
-        memberSinceText && /* @__PURE__ */ jsx(Text, { size: "xs", c: `${colors.neutral}.4`, children: memberSinceText }),
-        subtitle && /* @__PURE__ */ jsx(Text, { size: "xs", c: `${colors.neutral}.5`, children: subtitle })
+        email && /* @__PURE__ */ jsx(Text, { size: "sm", c: fairmintVars.colorTextSecondary, children: email }),
+        memberSinceText && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextTertiary, children: memberSinceText }),
+        subtitle && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: subtitle })
       ] })
     ] }),
     children
@@ -30547,7 +30782,7 @@ function WalletList({
         children: [
           /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
             /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: getTypeLabel(w.type, typeLabels) }),
-            w.label && /* @__PURE__ */ jsx(Text, { size: "xs", c: `${colors.neutral}.5`, children: w.label }),
+            w.label && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: w.label }),
             /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: truncateAddress(w.address) })
           ] }),
           /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
@@ -30625,7 +30860,7 @@ function WalletList({
         title: "Remove Wallet",
         message: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Text, { size: "sm", children: "Are you sure you want to remove this wallet address? This action cannot be undone." }),
-          walletToRemove && /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: `${colors.neutral}.5`, children: walletToRemove }),
+          walletToRemove && /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: fairmintVars.colorTextSecondary, children: walletToRemove }),
           removeError && /* @__PURE__ */ jsx(Text, { size: "sm", c: colors.error, children: removeError })
         ] }),
         opened: walletToRemove !== null,
@@ -30704,6 +30939,7 @@ export {
   EmptyState,
   EquityGrantCard,
   ErrorFallback,
+  ErrorPage,
   EthereumAddressField,
   FairmintLogo,
   FairmintProvider,
@@ -30762,18 +30998,24 @@ export {
   ZipField,
   brandColors,
   colors,
+  createFairmintMantineProviderProps,
   createZipSchema,
   emailSchema,
   ethereumAddressSchema,
+  fairmintCssVariables,
+  fairmintVars,
   formatCurrency,
   formatCurrencyPrecise,
   formatDate,
   formatNumber,
   formatPercent,
+  formatPhone,
+  formatPhoneDisplay,
   formatPreciseWithCurrency,
   getAvatarColor,
   isEthereumAddress,
   neutralColors,
+  normalizePhone,
   notify,
   passwordSchema,
   phoneSchema,
@@ -30781,6 +31023,7 @@ export {
   semanticColors,
   theme,
   truncateAddress,
+  typography,
   useClickOutside,
   useClipboard,
   useDebouncedCallback,