@fairmint/ui 0.3.10 → 0.3.12

package/dist/components/primitives/sx.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const index = require("../../theme/index.cjs");
-const colors = require("../../theme/colors.cjs");
 const breakpointKeys = ["xs", "sm", "md", "lg", "xl"];
 const fallbackBreakpoints = {
   xs: "30em",
@@ -12,10 +11,6 @@ const fallbackBreakpoints = {
   xl: "90em"
 };
 const serverMediaSnapshot = "__fairmint_sx_server__";
-const themeColor = (name, shade) => {
-  const palette = index.theme.colors?.[name];
-  return Array.isArray(palette) ? palette[shade] : void 0;
-};
 const getBreakpointWidth = (key) => index.theme.breakpoints?.[key] || fallbackBreakpoints[key];
 const getBreakpointQueryWidth = (key) => breakpointKeys.includes(key) ? getBreakpointWidth(key) : key;
 const breakpointHelpers = {
@@ -26,36 +21,36 @@ const emptyTheme = {
   breakpoints: breakpointHelpers,
   palette: {
     action: {
-      active: index.neutralColors[700],
-      hover: index.neutralColors[100],
-      selected: index.neutralColors[200]
+      active: index.fairmintVars.colorIconPrimary,
+      hover: index.fairmintVars.colorBgHover,
+      selected: index.fairmintVars.colorBgSelected
     },
-    background: { default: index.neutralColors[50], paper: index.commonColors.white },
+    background: { default: index.fairmintVars.colorBgCanvas, paper: index.fairmintVars.colorBgSurface },
     common: { black: index.commonColors.black, white: index.commonColors.white },
-    divider: index.neutralColors[200],
-    error: { main: index.semanticColors.error },
+    divider: index.fairmintVars.colorBorderDefault,
+    error: { main: index.fairmintVars.colorErrorText },
     grey: {
-      50: index.neutralColors[50],
-      100: index.neutralColors[100],
-      500: index.neutralColors[500],
-      900: index.neutralColors[900]
+      50: index.fairmintVars.colorBgSurfaceSecondary,
+      100: index.fairmintVars.colorBgHover,
+      500: index.fairmintVars.colorTextSecondary,
+      900: index.fairmintVars.colorTextPrimary
     },
-    info: { main: index.semanticColors.info },
+    info: { main: index.fairmintVars.colorInfoText },
     mode: "light",
     primary: {
       contrastText: index.commonColors.white,
-      dark: themeColor(colors.colors.primary, 8) || index.brandColors.indigo,
-      light: themeColor(colors.colors.primary, 3) || index.brandColors.indigo,
-      main: index.brandColors.indigo
+      dark: index.fairmintVars.colorBrandPrimaryHover,
+      light: index.fairmintVars.colorBrandPrimaryActive,
+      main: index.fairmintVars.colorBrandPrimary
     },
-    secondary: { main: index.neutralColors[500] },
-    success: { main: index.semanticColors.success },
+    secondary: { main: index.fairmintVars.colorTextSecondary },
+    success: { main: index.fairmintVars.colorSuccessText },
     text: {
-      disabled: index.neutralColors[500],
-      primary: index.neutralColors[900],
-      secondary: index.neutralColors[600]
+      disabled: index.fairmintVars.colorTextDisabled,
+      primary: index.fairmintVars.colorTextPrimary,
+      secondary: index.fairmintVars.colorTextSecondary
     },
-    warning: { main: index.semanticColors.warning }
+    warning: { main: index.fairmintVars.colorWarningText }
   },
   spacing: (...values) => values.map((value) => typeof value === "number" ? `${value * 8}px` : value).join(" ")
 };
@@ -107,6 +102,7 @@ const resolveResponsiveValue = (value, options = {}) => {
 };
 const resolvePaletteValue = (value) => {
   if (typeof value !== "string") return value;
+  if (value.startsWith("var(")) return value;
   if (value === "divider") return emptyTheme.palette.divider;
   const [color, shade] = value.split(".");
   const paletteColor = emptyTheme.palette[color];

package/dist/components/primitives/sx.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sx.cjs","sources":["../../../src/components/primitives/sx.ts"],"sourcesContent":["import { type CSSProperties, useMemo, useSyncExternalStore } from \"react\";\nimport { brandColors, commonColors, neutralColors, semanticColors, theme } from \"../../theme\";\nimport { colors } from \"../../theme/colors\";\n\nconst breakpointKeys = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst fallbackBreakpoints: Record<(typeof breakpointKeys)[number], string> = {\n  xs: \"30em\",\n  sm: \"48em\",\n  md: \"64em\",\n  lg: \"74em\",\n  xl: \"90em\",\n};\n\ntype BreakpointKey = (typeof breakpointKeys)[number];\ntype PaletteColor = Record<string, string | undefined>;\ntype BreakpointHelpers = {\n  down: (key: BreakpointKey | string) => string;\n  up: (key: BreakpointKey | string) => string;\n} & Record<string, unknown>;\n\nexport type SxTheme = {\n  breakpoints?: BreakpointHelpers;\n  palette: {\n    action: PaletteColor;\n    background: PaletteColor;\n    common: PaletteColor;\n    divider: string;\n    error: PaletteColor;\n    grey: PaletteColor;\n    info: PaletteColor;\n    mode: string;\n    primary: PaletteColor;\n    secondary: PaletteColor;\n    success: PaletteColor;\n    text: PaletteColor;\n    warning: PaletteColor;\n  } & Record<string, PaletteColor | string | undefined>;\n  spacing?: (...values: Array<number | string>) => string | number;\n} & Record<string, unknown>;\n\nexport type SxObject = Record<string, unknown>;\nexport type SxArray = Array<SxObject | false | null | undefined>;\nexport type Sx = SxObject | SxArray | ((theme: SxTheme) => SxObject | SxArray);\ntype ResolvedStyle = CSSProperties & Record<string, string | number>;\ntype ResolveOptions = {\n  resolveResponsive?: boolean;\n};\n\nconst serverMediaSnapshot = \"__fairmint_sx_server__\";\n\nconst themeColor = (name: string, shade: number) => {\n  const palette = theme.colors?.[name];\n  return Array.isArray(palette) ? palette[shade] : undefined;\n};\n\nconst getBreakpointWidth = (key: BreakpointKey) =>\n  theme.breakpoints?.[key] || fallbackBreakpoints[key];\n\nconst getBreakpointQueryWidth = (key: BreakpointKey | string) =>\n  breakpointKeys.includes(key as BreakpointKey) ? getBreakpointWidth(key as BreakpointKey) : key;\n\nconst breakpointHelpers: BreakpointHelpers = {\n  down: (key) => `@media (max-width: ${getBreakpointQueryWidth(key)})`,\n  up: (key) => `@media (min-width: ${getBreakpointQueryWidth(key)})`,\n};\n\nconst emptyTheme: SxTheme = {\n  breakpoints: breakpointHelpers,\n  palette: {\n    action: {\n      active: neutralColors[700],\n      hover: neutralColors[100],\n      selected: neutralColors[200],\n    },\n    background: { default: neutralColors[50], paper: commonColors.white },\n    common: { black: commonColors.black, white: commonColors.white },\n    divider: neutralColors[200],\n    error: { main: semanticColors.error },\n    grey: {\n      50: neutralColors[50],\n      100: neutralColors[100],\n      500: neutralColors[500],\n      900: neutralColors[900],\n    },\n    info: { main: semanticColors.info },\n    mode: \"light\",\n    primary: {\n      contrastText: commonColors.white,\n      dark: themeColor(colors.primary, 8) || brandColors.indigo,\n      light: themeColor(colors.primary, 3) || brandColors.indigo,\n      main: brandColors.indigo,\n    },\n    secondary: { main: neutralColors[500] },\n    success: { main: semanticColors.success },\n    text: {\n      disabled: neutralColors[500],\n      primary: neutralColors[900],\n      secondary: neutralColors[600],\n    },\n    warning: { main: semanticColors.warning },\n  },\n  spacing: (...values: Array<number | string>) =>\n    values.map((value) => (typeof value === \"number\" ? `${value * 8}px` : value)).join(\" \"),\n};\n\nconst spacingProps = new Set([\n  \"gap\",\n  \"margin\",\n  \"marginBottom\",\n  \"marginLeft\",\n  \"marginRight\",\n  \"marginTop\",\n  \"padding\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n]);\n\nconst sxAliases: Record<string, string[]> = {\n  bgcolor: [\"backgroundColor\"],\n  m: [\"margin\"],\n  mb: [\"marginBottom\"],\n  ml: [\"marginLeft\"],\n  mr: [\"marginRight\"],\n  mt: [\"marginTop\"],\n  mx: [\"marginLeft\", \"marginRight\"],\n  my: [\"marginTop\", \"marginBottom\"],\n  p: [\"padding\"],\n  pb: [\"paddingBottom\"],\n  pl: [\"paddingLeft\"],\n  pr: [\"paddingRight\"],\n  pt: [\"paddingTop\"],\n  px: [\"paddingLeft\", \"paddingRight\"],\n  py: [\"paddingTop\", \"paddingBottom\"],\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  Boolean(value) && typeof value === \"object\" && !Array.isArray(value);\n\nconst normalizeSxEntries = (sx: SxObject | SxArray): SxObject[] =>\n  Array.isArray(sx) ? sx.filter(isRecord) : [sx];\n\nconst breakpointMatches = (key: BreakpointKey, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (key === \"xs\") return true;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  return window.matchMedia(`(min-width: ${getBreakpointWidth(key)})`).matches;\n};\n\nexport const resolveResponsiveValue = (value: unknown, options: ResolveOptions = {}) => {\n  if (!isRecord(value) || !breakpointKeys.some((key) => key in value)) return value;\n  if (options.resolveResponsive === false) return value.base;\n\n  for (const key of [...breakpointKeys].reverse()) {\n    if (value[key] !== undefined && breakpointMatches(key, options)) return value[key];\n  }\n\n  return value.base;\n};\n\nconst resolvePaletteValue = (value: unknown) => {\n  if (typeof value !== \"string\") return value;\n  if (value === \"divider\") return emptyTheme.palette.divider;\n\n  const [color, shade] = value.split(\".\");\n  const paletteColor = emptyTheme.palette[color];\n  if (!paletteColor || typeof paletteColor === \"string\") return value;\n\n  return paletteColor[shade] || value;\n};\n\nconst resolveSpacingValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 8}px` : value;\n\nconst resolveBorderValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value}px solid` : value;\n\nconst resolveBorderRadiusValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 4}px` : value;\n\nconst resolveStyleValue = (property: string, rawValue: unknown, options: ResolveOptions = {}) => {\n  const value = resolveResponsiveValue(rawValue, options);\n  if (value === undefined || value === null) return undefined;\n\n  if (spacingProps.has(property)) return resolveSpacingValue(value);\n  if (property.endsWith(\"Width\")) return typeof value === \"number\" ? `${value}px` : value;\n  if (property.startsWith(\"border\") && property !== \"borderColor\" && property !== \"borderRadius\") {\n    return resolveBorderValue(value);\n  }\n  if (property === \"borderRadius\") return resolveBorderRadiusValue(value);\n  if (property === \"backgroundColor\" || property === \"borderColor\" || property === \"color\") {\n    return resolvePaletteValue(value);\n  }\n\n  return value;\n};\n\nconst mediaQueryMatches = (key: string, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (!key.startsWith(\"@media\")) return false;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  const query = key.slice(\"@media\".length).trim();\n  return Boolean(query) && window.matchMedia(query).matches;\n};\n\nconst collectMediaQueries = (value: unknown, queries: Set<string>) => {\n  if (!isRecord(value)) return;\n\n  Object.entries(value).forEach(([key, entryValue]) => {\n    if (key.startsWith(\"@media\")) {\n      const query = key.slice(\"@media\".length).trim();\n      if (query) queries.add(query);\n    }\n\n    if (key !== \"xs\" && breakpointKeys.includes(key as BreakpointKey)) {\n      queries.add(`(min-width: ${getBreakpointWidth(key as BreakpointKey)})`);\n    }\n\n    collectMediaQueries(entryValue, queries);\n  });\n};\n\nconst getSxMediaQueries = (sx?: Sx) => {\n  if (!sx) return [];\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const queries = new Set<string>();\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    collectMediaQueries(entry, queries);\n  });\n\n  return [...queries];\n};\n\nexport const sxToStyle = (sx?: Sx, options: ResolveOptions = {}): CSSProperties | undefined => {\n  if (!sx) return undefined;\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const style: ResolvedStyle = {};\n  const mediaEntries: Array<[string, unknown]> = [];\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    Object.entries(entry).forEach(([key, value]) => {\n      if (key.startsWith(\"&\")) return;\n      if (key.startsWith(\"@\")) {\n        mediaEntries.push([key, value]);\n        return;\n      }\n\n      const properties = sxAliases[key] || [key];\n      properties.forEach((property) => {\n        const resolvedValue = resolveStyleValue(property, value, options);\n        if (typeof resolvedValue === \"string\" || typeof resolvedValue === \"number\") {\n          style[property] = resolvedValue;\n        }\n      });\n    });\n  });\n\n  mediaEntries.forEach(([key, value]) => {\n    if (isRecord(value) && mediaQueryMatches(key, options)) {\n      Object.assign(style, sxToStyle(value, options));\n    }\n  });\n\n  return style;\n};\n\nconst getMediaSnapshot = (queries: string[]) => {\n  if (!queries.length) return \"\";\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return \"\";\n\n  return queries\n    .map((query) => `${query}:${window.matchMedia(query).matches ? \"1\" : \"0\"}`)\n    .join(\"\\n\");\n};\n\nconst subscribeToMediaQueries = (queries: string[], onChange: () => void) => {\n  if (!queries.length) return () => undefined;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\")\n    return () => undefined;\n\n  const cleanups = queries.map((query) => {\n    const mediaQueryList = window.matchMedia(query);\n\n    if (typeof mediaQueryList.addEventListener === \"function\") {\n      mediaQueryList.addEventListener(\"change\", onChange);\n      return () => mediaQueryList.removeEventListener(\"change\", onChange);\n    }\n\n    mediaQueryList.addListener?.(onChange);\n    return () => mediaQueryList.removeListener?.(onChange);\n  });\n\n  return () => {\n    cleanups.forEach((cleanup) => {\n      cleanup();\n    });\n  };\n};\n\nexport const useSxStyle = (sx?: Sx): CSSProperties | undefined => {\n  const mediaQueries = useMemo(() => getSxMediaQueries(sx), [sx]);\n  const mediaQueryKey = mediaQueries.join(\"\\n\");\n  const queries = useMemo(() => (mediaQueryKey ? mediaQueryKey.split(\"\\n\") : []), [mediaQueryKey]);\n  const mediaSnapshot = useSyncExternalStore(\n    (onChange) => subscribeToMediaQueries(queries, onChange),\n    () => getMediaSnapshot(queries),\n    () => serverMediaSnapshot,\n  );\n\n  return sxToStyle(sx, { resolveResponsive: mediaSnapshot !== serverMediaSnapshot });\n};\n"],"names":["theme","neutralColors","commonColors","semanticColors","colors","brandColors","useMemo","useSyncExternalStore"],"mappings":"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"}
+{"version":3,"file":"sx.cjs","sources":["../../../src/components/primitives/sx.ts"],"sourcesContent":["import { type CSSProperties, useMemo, useSyncExternalStore } from \"react\";\nimport { commonColors, fairmintVars, theme } from \"../../theme\";\n\nconst breakpointKeys = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst fallbackBreakpoints: Record<(typeof breakpointKeys)[number], string> = {\n  xs: \"30em\",\n  sm: \"48em\",\n  md: \"64em\",\n  lg: \"74em\",\n  xl: \"90em\",\n};\n\ntype BreakpointKey = (typeof breakpointKeys)[number];\ntype PaletteColor = Record<string, string | undefined>;\ntype BreakpointHelpers = {\n  down: (key: BreakpointKey | string) => string;\n  up: (key: BreakpointKey | string) => string;\n} & Record<string, unknown>;\n\nexport type SxTheme = {\n  breakpoints?: BreakpointHelpers;\n  palette: {\n    action: PaletteColor;\n    background: PaletteColor;\n    common: PaletteColor;\n    divider: string;\n    error: PaletteColor;\n    grey: PaletteColor;\n    info: PaletteColor;\n    mode: string;\n    primary: PaletteColor;\n    secondary: PaletteColor;\n    success: PaletteColor;\n    text: PaletteColor;\n    warning: PaletteColor;\n  } & Record<string, PaletteColor | string | undefined>;\n  spacing?: (...values: Array<number | string>) => string | number;\n} & Record<string, unknown>;\n\nexport type SxObject = Record<string, unknown>;\nexport type SxArray = Array<SxObject | false | null | undefined>;\nexport type Sx = SxObject | SxArray | ((theme: SxTheme) => SxObject | SxArray);\ntype ResolvedStyle = CSSProperties & Record<string, string | number>;\ntype ResolveOptions = {\n  resolveResponsive?: boolean;\n};\n\nconst serverMediaSnapshot = \"__fairmint_sx_server__\";\n\nconst getBreakpointWidth = (key: BreakpointKey) =>\n  theme.breakpoints?.[key] || fallbackBreakpoints[key];\n\nconst getBreakpointQueryWidth = (key: BreakpointKey | string) =>\n  breakpointKeys.includes(key as BreakpointKey) ? getBreakpointWidth(key as BreakpointKey) : key;\n\nconst breakpointHelpers: BreakpointHelpers = {\n  down: (key) => `@media (max-width: ${getBreakpointQueryWidth(key)})`,\n  up: (key) => `@media (min-width: ${getBreakpointQueryWidth(key)})`,\n};\n\nconst emptyTheme: SxTheme = {\n  breakpoints: breakpointHelpers,\n  palette: {\n    action: {\n      active: fairmintVars.colorIconPrimary,\n      hover: fairmintVars.colorBgHover,\n      selected: fairmintVars.colorBgSelected,\n    },\n    background: { default: fairmintVars.colorBgCanvas, paper: fairmintVars.colorBgSurface },\n    common: { black: commonColors.black, white: commonColors.white },\n    divider: fairmintVars.colorBorderDefault,\n    error: { main: fairmintVars.colorErrorText },\n    grey: {\n      50: fairmintVars.colorBgSurfaceSecondary,\n      100: fairmintVars.colorBgHover,\n      500: fairmintVars.colorTextSecondary,\n      900: fairmintVars.colorTextPrimary,\n    },\n    info: { main: fairmintVars.colorInfoText },\n    mode: \"light\",\n    primary: {\n      contrastText: commonColors.white,\n      dark: fairmintVars.colorBrandPrimaryHover,\n      light: fairmintVars.colorBrandPrimaryActive,\n      main: fairmintVars.colorBrandPrimary,\n    },\n    secondary: { main: fairmintVars.colorTextSecondary },\n    success: { main: fairmintVars.colorSuccessText },\n    text: {\n      disabled: fairmintVars.colorTextDisabled,\n      primary: fairmintVars.colorTextPrimary,\n      secondary: fairmintVars.colorTextSecondary,\n    },\n    warning: { main: fairmintVars.colorWarningText },\n  },\n  spacing: (...values: Array<number | string>) =>\n    values.map((value) => (typeof value === \"number\" ? `${value * 8}px` : value)).join(\" \"),\n};\n\nconst spacingProps = new Set([\n  \"gap\",\n  \"margin\",\n  \"marginBottom\",\n  \"marginLeft\",\n  \"marginRight\",\n  \"marginTop\",\n  \"padding\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n]);\n\nconst sxAliases: Record<string, string[]> = {\n  bgcolor: [\"backgroundColor\"],\n  m: [\"margin\"],\n  mb: [\"marginBottom\"],\n  ml: [\"marginLeft\"],\n  mr: [\"marginRight\"],\n  mt: [\"marginTop\"],\n  mx: [\"marginLeft\", \"marginRight\"],\n  my: [\"marginTop\", \"marginBottom\"],\n  p: [\"padding\"],\n  pb: [\"paddingBottom\"],\n  pl: [\"paddingLeft\"],\n  pr: [\"paddingRight\"],\n  pt: [\"paddingTop\"],\n  px: [\"paddingLeft\", \"paddingRight\"],\n  py: [\"paddingTop\", \"paddingBottom\"],\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  Boolean(value) && typeof value === \"object\" && !Array.isArray(value);\n\nconst normalizeSxEntries = (sx: SxObject | SxArray): SxObject[] =>\n  Array.isArray(sx) ? sx.filter(isRecord) : [sx];\n\nconst breakpointMatches = (key: BreakpointKey, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (key === \"xs\") return true;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  return window.matchMedia(`(min-width: ${getBreakpointWidth(key)})`).matches;\n};\n\nexport const resolveResponsiveValue = (value: unknown, options: ResolveOptions = {}) => {\n  if (!isRecord(value) || !breakpointKeys.some((key) => key in value)) return value;\n  if (options.resolveResponsive === false) return value.base;\n\n  for (const key of [...breakpointKeys].reverse()) {\n    if (value[key] !== undefined && breakpointMatches(key, options)) return value[key];\n  }\n\n  return value.base;\n};\n\nconst resolvePaletteValue = (value: unknown) => {\n  if (typeof value !== \"string\") return value;\n  if (value.startsWith(\"var(\")) return value;\n  if (value === \"divider\") return emptyTheme.palette.divider;\n\n  const [color, shade] = value.split(\".\");\n  const paletteColor = emptyTheme.palette[color];\n  if (!paletteColor || typeof paletteColor === \"string\") return value;\n\n  return paletteColor[shade] || value;\n};\n\nconst resolveSpacingValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 8}px` : value;\n\nconst resolveBorderValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value}px solid` : value;\n\nconst resolveBorderRadiusValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 4}px` : value;\n\nconst resolveStyleValue = (property: string, rawValue: unknown, options: ResolveOptions = {}) => {\n  const value = resolveResponsiveValue(rawValue, options);\n  if (value === undefined || value === null) return undefined;\n\n  if (spacingProps.has(property)) return resolveSpacingValue(value);\n  if (property.endsWith(\"Width\")) return typeof value === \"number\" ? `${value}px` : value;\n  if (property.startsWith(\"border\") && property !== \"borderColor\" && property !== \"borderRadius\") {\n    return resolveBorderValue(value);\n  }\n  if (property === \"borderRadius\") return resolveBorderRadiusValue(value);\n  if (property === \"backgroundColor\" || property === \"borderColor\" || property === \"color\") {\n    return resolvePaletteValue(value);\n  }\n\n  return value;\n};\n\nconst mediaQueryMatches = (key: string, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (!key.startsWith(\"@media\")) return false;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  const query = key.slice(\"@media\".length).trim();\n  return Boolean(query) && window.matchMedia(query).matches;\n};\n\nconst collectMediaQueries = (value: unknown, queries: Set<string>) => {\n  if (!isRecord(value)) return;\n\n  Object.entries(value).forEach(([key, entryValue]) => {\n    if (key.startsWith(\"@media\")) {\n      const query = key.slice(\"@media\".length).trim();\n      if (query) queries.add(query);\n    }\n\n    if (key !== \"xs\" && breakpointKeys.includes(key as BreakpointKey)) {\n      queries.add(`(min-width: ${getBreakpointWidth(key as BreakpointKey)})`);\n    }\n\n    collectMediaQueries(entryValue, queries);\n  });\n};\n\nconst getSxMediaQueries = (sx?: Sx) => {\n  if (!sx) return [];\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const queries = new Set<string>();\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    collectMediaQueries(entry, queries);\n  });\n\n  return [...queries];\n};\n\nexport const sxToStyle = (sx?: Sx, options: ResolveOptions = {}): CSSProperties | undefined => {\n  if (!sx) return undefined;\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const style: ResolvedStyle = {};\n  const mediaEntries: Array<[string, unknown]> = [];\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    Object.entries(entry).forEach(([key, value]) => {\n      if (key.startsWith(\"&\")) return;\n      if (key.startsWith(\"@\")) {\n        mediaEntries.push([key, value]);\n        return;\n      }\n\n      const properties = sxAliases[key] || [key];\n      properties.forEach((property) => {\n        const resolvedValue = resolveStyleValue(property, value, options);\n        if (typeof resolvedValue === \"string\" || typeof resolvedValue === \"number\") {\n          style[property] = resolvedValue;\n        }\n      });\n    });\n  });\n\n  mediaEntries.forEach(([key, value]) => {\n    if (isRecord(value) && mediaQueryMatches(key, options)) {\n      Object.assign(style, sxToStyle(value, options));\n    }\n  });\n\n  return style;\n};\n\nconst getMediaSnapshot = (queries: string[]) => {\n  if (!queries.length) return \"\";\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return \"\";\n\n  return queries\n    .map((query) => `${query}:${window.matchMedia(query).matches ? \"1\" : \"0\"}`)\n    .join(\"\\n\");\n};\n\nconst subscribeToMediaQueries = (queries: string[], onChange: () => void) => {\n  if (!queries.length) return () => undefined;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\")\n    return () => undefined;\n\n  const cleanups = queries.map((query) => {\n    const mediaQueryList = window.matchMedia(query);\n\n    if (typeof mediaQueryList.addEventListener === \"function\") {\n      mediaQueryList.addEventListener(\"change\", onChange);\n      return () => mediaQueryList.removeEventListener(\"change\", onChange);\n    }\n\n    mediaQueryList.addListener?.(onChange);\n    return () => mediaQueryList.removeListener?.(onChange);\n  });\n\n  return () => {\n    cleanups.forEach((cleanup) => {\n      cleanup();\n    });\n  };\n};\n\nexport const useSxStyle = (sx?: Sx): CSSProperties | undefined => {\n  const mediaQueries = useMemo(() => getSxMediaQueries(sx), [sx]);\n  const mediaQueryKey = mediaQueries.join(\"\\n\");\n  const queries = useMemo(() => (mediaQueryKey ? mediaQueryKey.split(\"\\n\") : []), [mediaQueryKey]);\n  const mediaSnapshot = useSyncExternalStore(\n    (onChange) => subscribeToMediaQueries(queries, onChange),\n    () => getMediaSnapshot(queries),\n    () => serverMediaSnapshot,\n  );\n\n  return sxToStyle(sx, { resolveResponsive: mediaSnapshot !== serverMediaSnapshot });\n};\n"],"names":["theme","fairmintVars","commonColors","useMemo","useSyncExternalStore"],"mappings":"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"}

package/dist/components/primitives/sx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/sx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,MAAM,OAAO,CAAC;AAI1E,QAAA,MAAM,cAAc,yCAA0C,CAAC;AAS/D,KAAK,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACvD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,KAAK,MAAM,CAAC;IAC9C,EAAE,EAAE,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,KAAK,MAAM,CAAC;CAC7C,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,OAAO,GAAG;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC;QACrB,UAAU,EAAE,YAAY,CAAC;QACzB,MAAM,EAAE,YAAY,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,YAAY,CAAC;QACpB,IAAI,EAAE,YAAY,CAAC;QACnB,IAAI,EAAE,YAAY,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,YAAY,CAAC;QACtB,SAAS,EAAE,YAAY,CAAC;QACxB,OAAO,EAAE,YAAY,CAAC;QACtB,IAAI,EAAE,YAAY,CAAC;QACnB,OAAO,EAAE,YAAY,CAAC;KACvB,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;CAClE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AACjE,MAAM,MAAM,EAAE,GAAG,QAAQ,GAAG,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,QAAQ,GAAG,OAAO,CAAC,CAAC;AAE/E,KAAK,cAAc,GAAG;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAyGF,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,EAAE,UAAS,cAAmB,YASlF,CAAC;AA6EF,eAAO,MAAM,SAAS,GAAI,KAAK,EAAE,EAAE,UAAS,cAAmB,KAAG,aAAa,GAAG,SA+BjF,CAAC;AAmCF,eAAO,MAAM,UAAU,GAAI,KAAK,EAAE,KAAG,aAAa,GAAG,SAWpD,CAAC"}
+{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/sx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,MAAM,OAAO,CAAC;AAG1E,QAAA,MAAM,cAAc,yCAA0C,CAAC;AAS/D,KAAK,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACvD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,KAAK,MAAM,CAAC;IAC9C,EAAE,EAAE,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,KAAK,MAAM,CAAC;CAC7C,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,OAAO,GAAG;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC;QACrB,UAAU,EAAE,YAAY,CAAC;QACzB,MAAM,EAAE,YAAY,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,YAAY,CAAC;QACpB,IAAI,EAAE,YAAY,CAAC;QACnB,IAAI,EAAE,YAAY,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,YAAY,CAAC;QACtB,SAAS,EAAE,YAAY,CAAC;QACxB,OAAO,EAAE,YAAY,CAAC;QACtB,IAAI,EAAE,YAAY,CAAC;QACnB,OAAO,EAAE,YAAY,CAAC;KACvB,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;CAClE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AACjE,MAAM,MAAM,EAAE,GAAG,QAAQ,GAAG,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,QAAQ,GAAG,OAAO,CAAC,CAAC;AAE/E,KAAK,cAAc,GAAG;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAoGF,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,EAAE,UAAS,cAAmB,YASlF,CAAC;AA8EF,eAAO,MAAM,SAAS,GAAI,KAAK,EAAE,EAAE,UAAS,cAAmB,KAAG,aAAa,GAAG,SA+BjF,CAAC;AAmCF,eAAO,MAAM,UAAU,GAAI,KAAK,EAAE,KAAG,aAAa,GAAG,SAWpD,CAAC"}

package/dist/components/primitives/sx.js

@@ -1,6 +1,5 @@
 import { useMemo, useSyncExternalStore } from "react";
-import { semanticColors, neutralColors, brandColors, commonColors, theme } from "../../theme/index.js";
-import { colors } from "../../theme/colors.js";
+import { fairmintVars, commonColors, theme } from "../../theme/index.js";
 const breakpointKeys = ["xs", "sm", "md", "lg", "xl"];
 const fallbackBreakpoints = {
   xs: "30em",
@@ -10,10 +9,6 @@ const fallbackBreakpoints = {
   xl: "90em"
 };
 const serverMediaSnapshot = "__fairmint_sx_server__";
-const themeColor = (name, shade) => {
-  const palette = theme.colors?.[name];
-  return Array.isArray(palette) ? palette[shade] : void 0;
-};
 const getBreakpointWidth = (key) => theme.breakpoints?.[key] || fallbackBreakpoints[key];
 const getBreakpointQueryWidth = (key) => breakpointKeys.includes(key) ? getBreakpointWidth(key) : key;
 const breakpointHelpers = {
@@ -24,36 +19,36 @@ const emptyTheme = {
   breakpoints: breakpointHelpers,
   palette: {
     action: {
-      active: neutralColors[700],
-      hover: neutralColors[100],
-      selected: neutralColors[200]
+      active: fairmintVars.colorIconPrimary,
+      hover: fairmintVars.colorBgHover,
+      selected: fairmintVars.colorBgSelected
     },
-    background: { default: neutralColors[50], paper: commonColors.white },
+    background: { default: fairmintVars.colorBgCanvas, paper: fairmintVars.colorBgSurface },
     common: { black: commonColors.black, white: commonColors.white },
-    divider: neutralColors[200],
-    error: { main: semanticColors.error },
+    divider: fairmintVars.colorBorderDefault,
+    error: { main: fairmintVars.colorErrorText },
     grey: {
-      50: neutralColors[50],
-      100: neutralColors[100],
-      500: neutralColors[500],
-      900: neutralColors[900]
+      50: fairmintVars.colorBgSurfaceSecondary,
+      100: fairmintVars.colorBgHover,
+      500: fairmintVars.colorTextSecondary,
+      900: fairmintVars.colorTextPrimary
     },
-    info: { main: semanticColors.info },
+    info: { main: fairmintVars.colorInfoText },
     mode: "light",
     primary: {
       contrastText: commonColors.white,
-      dark: themeColor(colors.primary, 8) || brandColors.indigo,
-      light: themeColor(colors.primary, 3) || brandColors.indigo,
-      main: brandColors.indigo
+      dark: fairmintVars.colorBrandPrimaryHover,
+      light: fairmintVars.colorBrandPrimaryActive,
+      main: fairmintVars.colorBrandPrimary
     },
-    secondary: { main: neutralColors[500] },
-    success: { main: semanticColors.success },
+    secondary: { main: fairmintVars.colorTextSecondary },
+    success: { main: fairmintVars.colorSuccessText },
     text: {
-      disabled: neutralColors[500],
-      primary: neutralColors[900],
-      secondary: neutralColors[600]
+      disabled: fairmintVars.colorTextDisabled,
+      primary: fairmintVars.colorTextPrimary,
+      secondary: fairmintVars.colorTextSecondary
     },
-    warning: { main: semanticColors.warning }
+    warning: { main: fairmintVars.colorWarningText }
   },
   spacing: (...values) => values.map((value) => typeof value === "number" ? `${value * 8}px` : value).join(" ")
 };
@@ -105,6 +100,7 @@ const resolveResponsiveValue = (value, options = {}) => {
 };
 const resolvePaletteValue = (value) => {
   if (typeof value !== "string") return value;
+  if (value.startsWith("var(")) return value;
   if (value === "divider") return emptyTheme.palette.divider;
   const [color, shade] = value.split(".");
   const paletteColor = emptyTheme.palette[color];

package/dist/components/primitives/sx.js.map

@@ -1 +1 @@
-{"version":3,"file":"sx.js","sources":["../../../src/components/primitives/sx.ts"],"sourcesContent":["import { type CSSProperties, useMemo, useSyncExternalStore } from \"react\";\nimport { brandColors, commonColors, neutralColors, semanticColors, theme } from \"../../theme\";\nimport { colors } from \"../../theme/colors\";\n\nconst breakpointKeys = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst fallbackBreakpoints: Record<(typeof breakpointKeys)[number], string> = {\n  xs: \"30em\",\n  sm: \"48em\",\n  md: \"64em\",\n  lg: \"74em\",\n  xl: \"90em\",\n};\n\ntype BreakpointKey = (typeof breakpointKeys)[number];\ntype PaletteColor = Record<string, string | undefined>;\ntype BreakpointHelpers = {\n  down: (key: BreakpointKey | string) => string;\n  up: (key: BreakpointKey | string) => string;\n} & Record<string, unknown>;\n\nexport type SxTheme = {\n  breakpoints?: BreakpointHelpers;\n  palette: {\n    action: PaletteColor;\n    background: PaletteColor;\n    common: PaletteColor;\n    divider: string;\n    error: PaletteColor;\n    grey: PaletteColor;\n    info: PaletteColor;\n    mode: string;\n    primary: PaletteColor;\n    secondary: PaletteColor;\n    success: PaletteColor;\n    text: PaletteColor;\n    warning: PaletteColor;\n  } & Record<string, PaletteColor | string | undefined>;\n  spacing?: (...values: Array<number | string>) => string | number;\n} & Record<string, unknown>;\n\nexport type SxObject = Record<string, unknown>;\nexport type SxArray = Array<SxObject | false | null | undefined>;\nexport type Sx = SxObject | SxArray | ((theme: SxTheme) => SxObject | SxArray);\ntype ResolvedStyle = CSSProperties & Record<string, string | number>;\ntype ResolveOptions = {\n  resolveResponsive?: boolean;\n};\n\nconst serverMediaSnapshot = \"__fairmint_sx_server__\";\n\nconst themeColor = (name: string, shade: number) => {\n  const palette = theme.colors?.[name];\n  return Array.isArray(palette) ? palette[shade] : undefined;\n};\n\nconst getBreakpointWidth = (key: BreakpointKey) =>\n  theme.breakpoints?.[key] || fallbackBreakpoints[key];\n\nconst getBreakpointQueryWidth = (key: BreakpointKey | string) =>\n  breakpointKeys.includes(key as BreakpointKey) ? getBreakpointWidth(key as BreakpointKey) : key;\n\nconst breakpointHelpers: BreakpointHelpers = {\n  down: (key) => `@media (max-width: ${getBreakpointQueryWidth(key)})`,\n  up: (key) => `@media (min-width: ${getBreakpointQueryWidth(key)})`,\n};\n\nconst emptyTheme: SxTheme = {\n  breakpoints: breakpointHelpers,\n  palette: {\n    action: {\n      active: neutralColors[700],\n      hover: neutralColors[100],\n      selected: neutralColors[200],\n    },\n    background: { default: neutralColors[50], paper: commonColors.white },\n    common: { black: commonColors.black, white: commonColors.white },\n    divider: neutralColors[200],\n    error: { main: semanticColors.error },\n    grey: {\n      50: neutralColors[50],\n      100: neutralColors[100],\n      500: neutralColors[500],\n      900: neutralColors[900],\n    },\n    info: { main: semanticColors.info },\n    mode: \"light\",\n    primary: {\n      contrastText: commonColors.white,\n      dark: themeColor(colors.primary, 8) || brandColors.indigo,\n      light: themeColor(colors.primary, 3) || brandColors.indigo,\n      main: brandColors.indigo,\n    },\n    secondary: { main: neutralColors[500] },\n    success: { main: semanticColors.success },\n    text: {\n      disabled: neutralColors[500],\n      primary: neutralColors[900],\n      secondary: neutralColors[600],\n    },\n    warning: { main: semanticColors.warning },\n  },\n  spacing: (...values: Array<number | string>) =>\n    values.map((value) => (typeof value === \"number\" ? `${value * 8}px` : value)).join(\" \"),\n};\n\nconst spacingProps = new Set([\n  \"gap\",\n  \"margin\",\n  \"marginBottom\",\n  \"marginLeft\",\n  \"marginRight\",\n  \"marginTop\",\n  \"padding\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n]);\n\nconst sxAliases: Record<string, string[]> = {\n  bgcolor: [\"backgroundColor\"],\n  m: [\"margin\"],\n  mb: [\"marginBottom\"],\n  ml: [\"marginLeft\"],\n  mr: [\"marginRight\"],\n  mt: [\"marginTop\"],\n  mx: [\"marginLeft\", \"marginRight\"],\n  my: [\"marginTop\", \"marginBottom\"],\n  p: [\"padding\"],\n  pb: [\"paddingBottom\"],\n  pl: [\"paddingLeft\"],\n  pr: [\"paddingRight\"],\n  pt: [\"paddingTop\"],\n  px: [\"paddingLeft\", \"paddingRight\"],\n  py: [\"paddingTop\", \"paddingBottom\"],\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  Boolean(value) && typeof value === \"object\" && !Array.isArray(value);\n\nconst normalizeSxEntries = (sx: SxObject | SxArray): SxObject[] =>\n  Array.isArray(sx) ? sx.filter(isRecord) : [sx];\n\nconst breakpointMatches = (key: BreakpointKey, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (key === \"xs\") return true;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  return window.matchMedia(`(min-width: ${getBreakpointWidth(key)})`).matches;\n};\n\nexport const resolveResponsiveValue = (value: unknown, options: ResolveOptions = {}) => {\n  if (!isRecord(value) || !breakpointKeys.some((key) => key in value)) return value;\n  if (options.resolveResponsive === false) return value.base;\n\n  for (const key of [...breakpointKeys].reverse()) {\n    if (value[key] !== undefined && breakpointMatches(key, options)) return value[key];\n  }\n\n  return value.base;\n};\n\nconst resolvePaletteValue = (value: unknown) => {\n  if (typeof value !== \"string\") return value;\n  if (value === \"divider\") return emptyTheme.palette.divider;\n\n  const [color, shade] = value.split(\".\");\n  const paletteColor = emptyTheme.palette[color];\n  if (!paletteColor || typeof paletteColor === \"string\") return value;\n\n  return paletteColor[shade] || value;\n};\n\nconst resolveSpacingValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 8}px` : value;\n\nconst resolveBorderValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value}px solid` : value;\n\nconst resolveBorderRadiusValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 4}px` : value;\n\nconst resolveStyleValue = (property: string, rawValue: unknown, options: ResolveOptions = {}) => {\n  const value = resolveResponsiveValue(rawValue, options);\n  if (value === undefined || value === null) return undefined;\n\n  if (spacingProps.has(property)) return resolveSpacingValue(value);\n  if (property.endsWith(\"Width\")) return typeof value === \"number\" ? `${value}px` : value;\n  if (property.startsWith(\"border\") && property !== \"borderColor\" && property !== \"borderRadius\") {\n    return resolveBorderValue(value);\n  }\n  if (property === \"borderRadius\") return resolveBorderRadiusValue(value);\n  if (property === \"backgroundColor\" || property === \"borderColor\" || property === \"color\") {\n    return resolvePaletteValue(value);\n  }\n\n  return value;\n};\n\nconst mediaQueryMatches = (key: string, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (!key.startsWith(\"@media\")) return false;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  const query = key.slice(\"@media\".length).trim();\n  return Boolean(query) && window.matchMedia(query).matches;\n};\n\nconst collectMediaQueries = (value: unknown, queries: Set<string>) => {\n  if (!isRecord(value)) return;\n\n  Object.entries(value).forEach(([key, entryValue]) => {\n    if (key.startsWith(\"@media\")) {\n      const query = key.slice(\"@media\".length).trim();\n      if (query) queries.add(query);\n    }\n\n    if (key !== \"xs\" && breakpointKeys.includes(key as BreakpointKey)) {\n      queries.add(`(min-width: ${getBreakpointWidth(key as BreakpointKey)})`);\n    }\n\n    collectMediaQueries(entryValue, queries);\n  });\n};\n\nconst getSxMediaQueries = (sx?: Sx) => {\n  if (!sx) return [];\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const queries = new Set<string>();\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    collectMediaQueries(entry, queries);\n  });\n\n  return [...queries];\n};\n\nexport const sxToStyle = (sx?: Sx, options: ResolveOptions = {}): CSSProperties | undefined => {\n  if (!sx) return undefined;\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const style: ResolvedStyle = {};\n  const mediaEntries: Array<[string, unknown]> = [];\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    Object.entries(entry).forEach(([key, value]) => {\n      if (key.startsWith(\"&\")) return;\n      if (key.startsWith(\"@\")) {\n        mediaEntries.push([key, value]);\n        return;\n      }\n\n      const properties = sxAliases[key] || [key];\n      properties.forEach((property) => {\n        const resolvedValue = resolveStyleValue(property, value, options);\n        if (typeof resolvedValue === \"string\" || typeof resolvedValue === \"number\") {\n          style[property] = resolvedValue;\n        }\n      });\n    });\n  });\n\n  mediaEntries.forEach(([key, value]) => {\n    if (isRecord(value) && mediaQueryMatches(key, options)) {\n      Object.assign(style, sxToStyle(value, options));\n    }\n  });\n\n  return style;\n};\n\nconst getMediaSnapshot = (queries: string[]) => {\n  if (!queries.length) return \"\";\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return \"\";\n\n  return queries\n    .map((query) => `${query}:${window.matchMedia(query).matches ? \"1\" : \"0\"}`)\n    .join(\"\\n\");\n};\n\nconst subscribeToMediaQueries = (queries: string[], onChange: () => void) => {\n  if (!queries.length) return () => undefined;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\")\n    return () => undefined;\n\n  const cleanups = queries.map((query) => {\n    const mediaQueryList = window.matchMedia(query);\n\n    if (typeof mediaQueryList.addEventListener === \"function\") {\n      mediaQueryList.addEventListener(\"change\", onChange);\n      return () => mediaQueryList.removeEventListener(\"change\", onChange);\n    }\n\n    mediaQueryList.addListener?.(onChange);\n    return () => mediaQueryList.removeListener?.(onChange);\n  });\n\n  return () => {\n    cleanups.forEach((cleanup) => {\n      cleanup();\n    });\n  };\n};\n\nexport const useSxStyle = (sx?: Sx): CSSProperties | undefined => {\n  const mediaQueries = useMemo(() => getSxMediaQueries(sx), [sx]);\n  const mediaQueryKey = mediaQueries.join(\"\\n\");\n  const queries = useMemo(() => (mediaQueryKey ? mediaQueryKey.split(\"\\n\") : []), [mediaQueryKey]);\n  const mediaSnapshot = useSyncExternalStore(\n    (onChange) => subscribeToMediaQueries(queries, onChange),\n    () => getMediaSnapshot(queries),\n    () => serverMediaSnapshot,\n  );\n\n  return sxToStyle(sx, { resolveResponsive: mediaSnapshot !== serverMediaSnapshot });\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sx.js","sources":["../../../src/components/primitives/sx.ts"],"sourcesContent":["import { type CSSProperties, useMemo, useSyncExternalStore } from \"react\";\nimport { commonColors, fairmintVars, theme } from \"../../theme\";\n\nconst breakpointKeys = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst fallbackBreakpoints: Record<(typeof breakpointKeys)[number], string> = {\n  xs: \"30em\",\n  sm: \"48em\",\n  md: \"64em\",\n  lg: \"74em\",\n  xl: \"90em\",\n};\n\ntype BreakpointKey = (typeof breakpointKeys)[number];\ntype PaletteColor = Record<string, string | undefined>;\ntype BreakpointHelpers = {\n  down: (key: BreakpointKey | string) => string;\n  up: (key: BreakpointKey | string) => string;\n} & Record<string, unknown>;\n\nexport type SxTheme = {\n  breakpoints?: BreakpointHelpers;\n  palette: {\n    action: PaletteColor;\n    background: PaletteColor;\n    common: PaletteColor;\n    divider: string;\n    error: PaletteColor;\n    grey: PaletteColor;\n    info: PaletteColor;\n    mode: string;\n    primary: PaletteColor;\n    secondary: PaletteColor;\n    success: PaletteColor;\n    text: PaletteColor;\n    warning: PaletteColor;\n  } & Record<string, PaletteColor | string | undefined>;\n  spacing?: (...values: Array<number | string>) => string | number;\n} & Record<string, unknown>;\n\nexport type SxObject = Record<string, unknown>;\nexport type SxArray = Array<SxObject | false | null | undefined>;\nexport type Sx = SxObject | SxArray | ((theme: SxTheme) => SxObject | SxArray);\ntype ResolvedStyle = CSSProperties & Record<string, string | number>;\ntype ResolveOptions = {\n  resolveResponsive?: boolean;\n};\n\nconst serverMediaSnapshot = \"__fairmint_sx_server__\";\n\nconst getBreakpointWidth = (key: BreakpointKey) =>\n  theme.breakpoints?.[key] || fallbackBreakpoints[key];\n\nconst getBreakpointQueryWidth = (key: BreakpointKey | string) =>\n  breakpointKeys.includes(key as BreakpointKey) ? getBreakpointWidth(key as BreakpointKey) : key;\n\nconst breakpointHelpers: BreakpointHelpers = {\n  down: (key) => `@media (max-width: ${getBreakpointQueryWidth(key)})`,\n  up: (key) => `@media (min-width: ${getBreakpointQueryWidth(key)})`,\n};\n\nconst emptyTheme: SxTheme = {\n  breakpoints: breakpointHelpers,\n  palette: {\n    action: {\n      active: fairmintVars.colorIconPrimary,\n      hover: fairmintVars.colorBgHover,\n      selected: fairmintVars.colorBgSelected,\n    },\n    background: { default: fairmintVars.colorBgCanvas, paper: fairmintVars.colorBgSurface },\n    common: { black: commonColors.black, white: commonColors.white },\n    divider: fairmintVars.colorBorderDefault,\n    error: { main: fairmintVars.colorErrorText },\n    grey: {\n      50: fairmintVars.colorBgSurfaceSecondary,\n      100: fairmintVars.colorBgHover,\n      500: fairmintVars.colorTextSecondary,\n      900: fairmintVars.colorTextPrimary,\n    },\n    info: { main: fairmintVars.colorInfoText },\n    mode: \"light\",\n    primary: {\n      contrastText: commonColors.white,\n      dark: fairmintVars.colorBrandPrimaryHover,\n      light: fairmintVars.colorBrandPrimaryActive,\n      main: fairmintVars.colorBrandPrimary,\n    },\n    secondary: { main: fairmintVars.colorTextSecondary },\n    success: { main: fairmintVars.colorSuccessText },\n    text: {\n      disabled: fairmintVars.colorTextDisabled,\n      primary: fairmintVars.colorTextPrimary,\n      secondary: fairmintVars.colorTextSecondary,\n    },\n    warning: { main: fairmintVars.colorWarningText },\n  },\n  spacing: (...values: Array<number | string>) =>\n    values.map((value) => (typeof value === \"number\" ? `${value * 8}px` : value)).join(\" \"),\n};\n\nconst spacingProps = new Set([\n  \"gap\",\n  \"margin\",\n  \"marginBottom\",\n  \"marginLeft\",\n  \"marginRight\",\n  \"marginTop\",\n  \"padding\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n]);\n\nconst sxAliases: Record<string, string[]> = {\n  bgcolor: [\"backgroundColor\"],\n  m: [\"margin\"],\n  mb: [\"marginBottom\"],\n  ml: [\"marginLeft\"],\n  mr: [\"marginRight\"],\n  mt: [\"marginTop\"],\n  mx: [\"marginLeft\", \"marginRight\"],\n  my: [\"marginTop\", \"marginBottom\"],\n  p: [\"padding\"],\n  pb: [\"paddingBottom\"],\n  pl: [\"paddingLeft\"],\n  pr: [\"paddingRight\"],\n  pt: [\"paddingTop\"],\n  px: [\"paddingLeft\", \"paddingRight\"],\n  py: [\"paddingTop\", \"paddingBottom\"],\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  Boolean(value) && typeof value === \"object\" && !Array.isArray(value);\n\nconst normalizeSxEntries = (sx: SxObject | SxArray): SxObject[] =>\n  Array.isArray(sx) ? sx.filter(isRecord) : [sx];\n\nconst breakpointMatches = (key: BreakpointKey, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (key === \"xs\") return true;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  return window.matchMedia(`(min-width: ${getBreakpointWidth(key)})`).matches;\n};\n\nexport const resolveResponsiveValue = (value: unknown, options: ResolveOptions = {}) => {\n  if (!isRecord(value) || !breakpointKeys.some((key) => key in value)) return value;\n  if (options.resolveResponsive === false) return value.base;\n\n  for (const key of [...breakpointKeys].reverse()) {\n    if (value[key] !== undefined && breakpointMatches(key, options)) return value[key];\n  }\n\n  return value.base;\n};\n\nconst resolvePaletteValue = (value: unknown) => {\n  if (typeof value !== \"string\") return value;\n  if (value.startsWith(\"var(\")) return value;\n  if (value === \"divider\") return emptyTheme.palette.divider;\n\n  const [color, shade] = value.split(\".\");\n  const paletteColor = emptyTheme.palette[color];\n  if (!paletteColor || typeof paletteColor === \"string\") return value;\n\n  return paletteColor[shade] || value;\n};\n\nconst resolveSpacingValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 8}px` : value;\n\nconst resolveBorderValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value}px solid` : value;\n\nconst resolveBorderRadiusValue = (value: unknown) =>\n  typeof value === \"number\" ? `${value * 4}px` : value;\n\nconst resolveStyleValue = (property: string, rawValue: unknown, options: ResolveOptions = {}) => {\n  const value = resolveResponsiveValue(rawValue, options);\n  if (value === undefined || value === null) return undefined;\n\n  if (spacingProps.has(property)) return resolveSpacingValue(value);\n  if (property.endsWith(\"Width\")) return typeof value === \"number\" ? `${value}px` : value;\n  if (property.startsWith(\"border\") && property !== \"borderColor\" && property !== \"borderRadius\") {\n    return resolveBorderValue(value);\n  }\n  if (property === \"borderRadius\") return resolveBorderRadiusValue(value);\n  if (property === \"backgroundColor\" || property === \"borderColor\" || property === \"color\") {\n    return resolvePaletteValue(value);\n  }\n\n  return value;\n};\n\nconst mediaQueryMatches = (key: string, options: ResolveOptions = {}) => {\n  if (options.resolveResponsive === false) return false;\n  if (!key.startsWith(\"@media\")) return false;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n\n  const query = key.slice(\"@media\".length).trim();\n  return Boolean(query) && window.matchMedia(query).matches;\n};\n\nconst collectMediaQueries = (value: unknown, queries: Set<string>) => {\n  if (!isRecord(value)) return;\n\n  Object.entries(value).forEach(([key, entryValue]) => {\n    if (key.startsWith(\"@media\")) {\n      const query = key.slice(\"@media\".length).trim();\n      if (query) queries.add(query);\n    }\n\n    if (key !== \"xs\" && breakpointKeys.includes(key as BreakpointKey)) {\n      queries.add(`(min-width: ${getBreakpointWidth(key as BreakpointKey)})`);\n    }\n\n    collectMediaQueries(entryValue, queries);\n  });\n};\n\nconst getSxMediaQueries = (sx?: Sx) => {\n  if (!sx) return [];\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const queries = new Set<string>();\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    collectMediaQueries(entry, queries);\n  });\n\n  return [...queries];\n};\n\nexport const sxToStyle = (sx?: Sx, options: ResolveOptions = {}): CSSProperties | undefined => {\n  if (!sx) return undefined;\n  const resolved = typeof sx === \"function\" ? sx(emptyTheme) : sx;\n  const style: ResolvedStyle = {};\n  const mediaEntries: Array<[string, unknown]> = [];\n\n  normalizeSxEntries(resolved).forEach((entry) => {\n    Object.entries(entry).forEach(([key, value]) => {\n      if (key.startsWith(\"&\")) return;\n      if (key.startsWith(\"@\")) {\n        mediaEntries.push([key, value]);\n        return;\n      }\n\n      const properties = sxAliases[key] || [key];\n      properties.forEach((property) => {\n        const resolvedValue = resolveStyleValue(property, value, options);\n        if (typeof resolvedValue === \"string\" || typeof resolvedValue === \"number\") {\n          style[property] = resolvedValue;\n        }\n      });\n    });\n  });\n\n  mediaEntries.forEach(([key, value]) => {\n    if (isRecord(value) && mediaQueryMatches(key, options)) {\n      Object.assign(style, sxToStyle(value, options));\n    }\n  });\n\n  return style;\n};\n\nconst getMediaSnapshot = (queries: string[]) => {\n  if (!queries.length) return \"\";\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return \"\";\n\n  return queries\n    .map((query) => `${query}:${window.matchMedia(query).matches ? \"1\" : \"0\"}`)\n    .join(\"\\n\");\n};\n\nconst subscribeToMediaQueries = (queries: string[], onChange: () => void) => {\n  if (!queries.length) return () => undefined;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\")\n    return () => undefined;\n\n  const cleanups = queries.map((query) => {\n    const mediaQueryList = window.matchMedia(query);\n\n    if (typeof mediaQueryList.addEventListener === \"function\") {\n      mediaQueryList.addEventListener(\"change\", onChange);\n      return () => mediaQueryList.removeEventListener(\"change\", onChange);\n    }\n\n    mediaQueryList.addListener?.(onChange);\n    return () => mediaQueryList.removeListener?.(onChange);\n  });\n\n  return () => {\n    cleanups.forEach((cleanup) => {\n      cleanup();\n    });\n  };\n};\n\nexport const useSxStyle = (sx?: Sx): CSSProperties | undefined => {\n  const mediaQueries = useMemo(() => getSxMediaQueries(sx), [sx]);\n  const mediaQueryKey = mediaQueries.join(\"\\n\");\n  const queries = useMemo(() => (mediaQueryKey ? mediaQueryKey.split(\"\\n\") : []), [mediaQueryKey]);\n  const mediaSnapshot = useSyncExternalStore(\n    (onChange) => subscribeToMediaQueries(queries, onChange),\n    () => getMediaSnapshot(queries),\n    () => serverMediaSnapshot,\n  );\n\n  return sxToStyle(sx, { resolveResponsive: mediaSnapshot !== serverMediaSnapshot });\n};\n"],"names":[],"mappings":"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"}

package/dist/components/specific/DocumentRow/DocumentRow.cjs

@@ -60,7 +60,20 @@ function DocumentRow({
   const isClickable = Boolean(onClick);
   const animate = animationDelay !== void 0;
   const resolvedCaption = caption ?? (type || date ? [type, date ? format.formatDate(date) : void 0].filter(Boolean).join(" · ") : void 0);
-  const leadingNode = icon ?? /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon.ThemeIcon, { size: 36, radius: "md", variant: "light", color: colors.colors.primary, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultDocumentIcon, {}) });
+  const leadingNode = icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeIcon.ThemeIcon,
+    {
+      size: 36,
+      radius: "md",
+      variant: "light",
+      color: colors.colors.primary,
+      style: {
+        backgroundColor: index.fairmintVars.colorBgBrandSubtle,
+        color: index.fairmintVars.colorBrandPrimary
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(DefaultDocumentIcon, {})
+    }
+  );
   const content = /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "md", wrap: "nowrap", align: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { style: { flexShrink: 0 }, children: leadingNode }),
     /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [

package/dist/components/specific/DocumentRow/DocumentRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentRow.cjs","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { formatDate } from \"../../../utils/format\";\nimport { Box, Group, Stack, Text, ThemeIcon, UnstyledButton } from \"../../primitives/layout\";\n\n/**\n * Default file-glyph SVG. Inlined so the library doesn't depend on\n * `@tabler/icons-react` (per the icon-injection rule). Consumers can\n * override the leading slot via the `icon` prop when a different glyph\n * (or a stacked badge) is more appropriate.\n */\nconst DefaultDocumentIcon = () => (\n  <svg\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n    <polyline points=\"14 2 14 8 20 8\" />\n    <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n    <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n    <polyline points=\"10 9 9 9 8 9\" />\n  </svg>\n);\n\nconst DefaultChevronIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n);\n\nexport interface DocumentRowProps {\n  /** Primary title — usually the file or agreement name. */\n  name: string;\n  /**\n   * Description below the title. Accepts a `ReactNode` so consumers can mix\n   * Badges, Text, dates, and inline metadata (companyName, seriesName, etc.)\n   * without working around a single-string subtitle slot.\n   */\n  caption?: ReactNode;\n  /**\n   * @deprecated Use `caption` directly. When `caption` is omitted and\n   * `type` and/or `date` is supplied, they are joined with \" · \" to\n   * produce a string caption. Preserved for backwards compatibility\n   * with the previous, ListRow-backed API.\n   */\n  type?: string;\n  /**\n   * @deprecated Use `caption` directly. The date is now consumer-\n   * formatted; pass a formatted string via `caption` instead. Preserved\n   * for backwards compatibility.\n   */\n  date?: string;\n  /**\n   * Leading visual — defaults to a tinted file-icon `ThemeIcon`. Pass a\n   * custom node (an icon, a badge, a small Avatar, etc.) when you want\n   * a different leading affordance.\n   */\n  icon?: ReactNode;\n  /** Right-side content — download button, lock badge, preview link, etc. */\n  rightSection?: ReactNode;\n  /**\n   * Drill-in chevron. Defaults to `false` — the right-side glyph (a\n   * download icon, a preview link, a status badge) usually conveys the\n   * affordance and the chevron is visual noise. Set to `true` for \"row\n   * that opens a detail view\" patterns.\n   */\n  showChevron?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n  /** Entrance animation delay in seconds. Omit to skip animation. */\n  animationDelay?: number;\n  /** aria-label for the clickable wrapper. Defaults to `name`. */\n  ariaLabel?: string;\n}\n\n/**\n * Document list item — title, free-form caption, optional leading icon,\n * optional right-side affordance, optional drill-in chevron.\n *\n * Designed against three real consumers (investorv2's `OpportunityDocuments`,\n * `SignSection` legal-doc list, and the mobile card view on `/documents`)\n * so the shape covers the actual patterns rather than an imagined one.\n *\n * Backwards-compat note: the previous `type` + `date` API still works.\n * When `caption` is omitted, the legacy props are joined with \" · \" into\n * a string caption.\n */\nexport function DocumentRow({\n  name,\n  caption,\n  type,\n  date,\n  icon,\n  rightSection,\n  onClick,\n  showChevron = false,\n  animationDelay,\n  ariaLabel,\n}: DocumentRowProps) {\n  const isClickable = Boolean(onClick);\n  const animate = animationDelay !== undefined;\n\n  const resolvedCaption: ReactNode =\n    caption ??\n    (type || date\n      ? [type, date ? formatDate(date) : undefined].filter(Boolean).join(\" · \")\n      : undefined);\n\n  const leadingNode = icon ?? (\n    <ThemeIcon size={36} radius=\"md\" variant=\"light\" color={colors.primary}>\n      <DefaultDocumentIcon />\n    </ThemeIcon>\n  );\n\n  const content = (\n    <Group gap=\"md\" wrap=\"nowrap\" align=\"center\">\n      <Box style={{ flexShrink: 0 }}>{leadingNode}</Box>\n      <Stack gap={2} style={{ minWidth: 0, flex: 1 }}>\n        <Text fw={500} size=\"sm\" lineClamp={1}>\n          {name}\n        </Text>\n        {resolvedCaption !== undefined && resolvedCaption !== null && resolvedCaption !== \"\" ? (\n          typeof resolvedCaption === \"string\" ? (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary} lineClamp={1}>\n              {resolvedCaption}\n            </Text>\n          ) : (\n            resolvedCaption\n          )\n        ) : null}\n      </Stack>\n      <Group gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n        {rightSection}\n        {showChevron && (\n          <Box c={fairmintVars.colorTextTertiary} style={{ display: \"inline-flex\" }}>\n            <DefaultChevronIcon />\n          </Box>\n        )}\n      </Group>\n    </Group>\n  );\n\n  const animationStyle = animate\n    ? ({\n        opacity: 0 as const,\n        animation: \"rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards\",\n        animationDelay: `${animationDelay}s`,\n      } as const)\n    : undefined;\n\n  if (!isClickable) {\n    return (\n      <Box py=\"sm\" px=\"md\" style={animationStyle}>\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <UnstyledButton\n      onClick={onClick}\n      className=\"fairmint-list-row\"\n      w=\"100%\"\n      py=\"sm\"\n      px=\"md\"\n      style={animationStyle}\n      aria-label={ariaLabel ?? name}\n    >\n      {content}\n    </UnstyledButton>\n  );\n}\n"],"names":["jsxs","jsx","formatDate","ThemeIcon","colors","Group","Box","Stack","Text","fairmintVars","UnstyledButton"],"mappings":"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"}
+{"version":3,"file":"DocumentRow.cjs","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { formatDate } from \"../../../utils/format\";\nimport { Box, Group, Stack, Text, ThemeIcon, UnstyledButton } from \"../../primitives/layout\";\n\n/**\n * Default file-glyph SVG. Inlined so the library doesn't depend on\n * `@tabler/icons-react` (per the icon-injection rule). Consumers can\n * override the leading slot via the `icon` prop when a different glyph\n * (or a stacked badge) is more appropriate.\n */\nconst DefaultDocumentIcon = () => (\n  <svg\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n    <polyline points=\"14 2 14 8 20 8\" />\n    <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n    <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n    <polyline points=\"10 9 9 9 8 9\" />\n  </svg>\n);\n\nconst DefaultChevronIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n);\n\nexport interface DocumentRowProps {\n  /** Primary title — usually the file or agreement name. */\n  name: string;\n  /**\n   * Description below the title. Accepts a `ReactNode` so consumers can mix\n   * Badges, Text, dates, and inline metadata (companyName, seriesName, etc.)\n   * without working around a single-string subtitle slot.\n   */\n  caption?: ReactNode;\n  /**\n   * @deprecated Use `caption` directly. When `caption` is omitted and\n   * `type` and/or `date` is supplied, they are joined with \" · \" to\n   * produce a string caption. Preserved for backwards compatibility\n   * with the previous, ListRow-backed API.\n   */\n  type?: string;\n  /**\n   * @deprecated Use `caption` directly. The date is now consumer-\n   * formatted; pass a formatted string via `caption` instead. Preserved\n   * for backwards compatibility.\n   */\n  date?: string;\n  /**\n   * Leading visual — defaults to a tinted file-icon `ThemeIcon`. Pass a\n   * custom node (an icon, a badge, a small Avatar, etc.) when you want\n   * a different leading affordance.\n   */\n  icon?: ReactNode;\n  /** Right-side content — download button, lock badge, preview link, etc. */\n  rightSection?: ReactNode;\n  /**\n   * Drill-in chevron. Defaults to `false` — the right-side glyph (a\n   * download icon, a preview link, a status badge) usually conveys the\n   * affordance and the chevron is visual noise. Set to `true` for \"row\n   * that opens a detail view\" patterns.\n   */\n  showChevron?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n  /** Entrance animation delay in seconds. Omit to skip animation. */\n  animationDelay?: number;\n  /** aria-label for the clickable wrapper. Defaults to `name`. */\n  ariaLabel?: string;\n}\n\n/**\n * Document list item — title, free-form caption, optional leading icon,\n * optional right-side affordance, optional drill-in chevron.\n *\n * Designed against three real consumers (investorv2's `OpportunityDocuments`,\n * `SignSection` legal-doc list, and the mobile card view on `/documents`)\n * so the shape covers the actual patterns rather than an imagined one.\n *\n * Backwards-compat note: the previous `type` + `date` API still works.\n * When `caption` is omitted, the legacy props are joined with \" · \" into\n * a string caption.\n */\nexport function DocumentRow({\n  name,\n  caption,\n  type,\n  date,\n  icon,\n  rightSection,\n  onClick,\n  showChevron = false,\n  animationDelay,\n  ariaLabel,\n}: DocumentRowProps) {\n  const isClickable = Boolean(onClick);\n  const animate = animationDelay !== undefined;\n\n  const resolvedCaption: ReactNode =\n    caption ??\n    (type || date\n      ? [type, date ? formatDate(date) : undefined].filter(Boolean).join(\" · \")\n      : undefined);\n\n  const leadingNode = icon ?? (\n    <ThemeIcon\n      size={36}\n      radius=\"md\"\n      variant=\"light\"\n      color={colors.primary}\n      style={{\n        backgroundColor: fairmintVars.colorBgBrandSubtle,\n        color: fairmintVars.colorBrandPrimary,\n      }}\n    >\n      <DefaultDocumentIcon />\n    </ThemeIcon>\n  );\n\n  const content = (\n    <Group gap=\"md\" wrap=\"nowrap\" align=\"center\">\n      <Box style={{ flexShrink: 0 }}>{leadingNode}</Box>\n      <Stack gap={2} style={{ minWidth: 0, flex: 1 }}>\n        <Text fw={500} size=\"sm\" lineClamp={1}>\n          {name}\n        </Text>\n        {resolvedCaption !== undefined && resolvedCaption !== null && resolvedCaption !== \"\" ? (\n          typeof resolvedCaption === \"string\" ? (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary} lineClamp={1}>\n              {resolvedCaption}\n            </Text>\n          ) : (\n            resolvedCaption\n          )\n        ) : null}\n      </Stack>\n      <Group gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n        {rightSection}\n        {showChevron && (\n          <Box c={fairmintVars.colorTextTertiary} style={{ display: \"inline-flex\" }}>\n            <DefaultChevronIcon />\n          </Box>\n        )}\n      </Group>\n    </Group>\n  );\n\n  const animationStyle = animate\n    ? ({\n        opacity: 0 as const,\n        animation: \"rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards\",\n        animationDelay: `${animationDelay}s`,\n      } as const)\n    : undefined;\n\n  if (!isClickable) {\n    return (\n      <Box py=\"sm\" px=\"md\" style={animationStyle}>\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <UnstyledButton\n      onClick={onClick}\n      className=\"fairmint-list-row\"\n      w=\"100%\"\n      py=\"sm\"\n      px=\"md\"\n      style={animationStyle}\n      aria-label={ariaLabel ?? name}\n    >\n      {content}\n    </UnstyledButton>\n  );\n}\n"],"names":["jsxs","jsx","formatDate","ThemeIcon","colors","fairmintVars","Group","Box","Stack","Text","UnstyledButton"],"mappings":"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"}

package/dist/components/specific/DocumentRow/DocumentRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentRow.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgDvC,MAAM,WAAW,gBAAgB;IAC/B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,WAAmB,EACnB,cAAc,EACd,SAAS,GACV,EAAE,gBAAgB,2CAyElB"}
+{"version":3,"file":"DocumentRow.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgDvC,MAAM,WAAW,gBAAgB;IAC/B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,WAAmB,EACnB,cAAc,EACd,SAAS,GACV,EAAE,gBAAgB,2CAkFlB"}

package/dist/components/specific/DocumentRow/DocumentRow.js

@@ -58,7 +58,20 @@ function DocumentRow({
   const isClickable = Boolean(onClick);
   const animate = animationDelay !== void 0;
   const resolvedCaption = caption ?? (type || date ? [type, date ? formatDate(date) : void 0].filter(Boolean).join(" · ") : void 0);
-  const leadingNode = icon ?? /* @__PURE__ */ jsx(ThemeIcon, { size: 36, radius: "md", variant: "light", color: colors.primary, children: /* @__PURE__ */ jsx(DefaultDocumentIcon, {}) });
+  const leadingNode = icon ?? /* @__PURE__ */ jsx(
+    ThemeIcon,
+    {
+      size: 36,
+      radius: "md",
+      variant: "light",
+      color: colors.primary,
+      style: {
+        backgroundColor: fairmintVars.colorBgBrandSubtle,
+        color: fairmintVars.colorBrandPrimary
+      },
+      children: /* @__PURE__ */ jsx(DefaultDocumentIcon, {})
+    }
+  );
   const content = /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", align: "center", children: [
     /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: leadingNode }),
     /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [

package/dist/components/specific/DocumentRow/DocumentRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentRow.js","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { formatDate } from \"../../../utils/format\";\nimport { Box, Group, Stack, Text, ThemeIcon, UnstyledButton } from \"../../primitives/layout\";\n\n/**\n * Default file-glyph SVG. Inlined so the library doesn't depend on\n * `@tabler/icons-react` (per the icon-injection rule). Consumers can\n * override the leading slot via the `icon` prop when a different glyph\n * (or a stacked badge) is more appropriate.\n */\nconst DefaultDocumentIcon = () => (\n  <svg\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n    <polyline points=\"14 2 14 8 20 8\" />\n    <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n    <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n    <polyline points=\"10 9 9 9 8 9\" />\n  </svg>\n);\n\nconst DefaultChevronIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n);\n\nexport interface DocumentRowProps {\n  /** Primary title — usually the file or agreement name. */\n  name: string;\n  /**\n   * Description below the title. Accepts a `ReactNode` so consumers can mix\n   * Badges, Text, dates, and inline metadata (companyName, seriesName, etc.)\n   * without working around a single-string subtitle slot.\n   */\n  caption?: ReactNode;\n  /**\n   * @deprecated Use `caption` directly. When `caption` is omitted and\n   * `type` and/or `date` is supplied, they are joined with \" · \" to\n   * produce a string caption. Preserved for backwards compatibility\n   * with the previous, ListRow-backed API.\n   */\n  type?: string;\n  /**\n   * @deprecated Use `caption` directly. The date is now consumer-\n   * formatted; pass a formatted string via `caption` instead. Preserved\n   * for backwards compatibility.\n   */\n  date?: string;\n  /**\n   * Leading visual — defaults to a tinted file-icon `ThemeIcon`. Pass a\n   * custom node (an icon, a badge, a small Avatar, etc.) when you want\n   * a different leading affordance.\n   */\n  icon?: ReactNode;\n  /** Right-side content — download button, lock badge, preview link, etc. */\n  rightSection?: ReactNode;\n  /**\n   * Drill-in chevron. Defaults to `false` — the right-side glyph (a\n   * download icon, a preview link, a status badge) usually conveys the\n   * affordance and the chevron is visual noise. Set to `true` for \"row\n   * that opens a detail view\" patterns.\n   */\n  showChevron?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n  /** Entrance animation delay in seconds. Omit to skip animation. */\n  animationDelay?: number;\n  /** aria-label for the clickable wrapper. Defaults to `name`. */\n  ariaLabel?: string;\n}\n\n/**\n * Document list item — title, free-form caption, optional leading icon,\n * optional right-side affordance, optional drill-in chevron.\n *\n * Designed against three real consumers (investorv2's `OpportunityDocuments`,\n * `SignSection` legal-doc list, and the mobile card view on `/documents`)\n * so the shape covers the actual patterns rather than an imagined one.\n *\n * Backwards-compat note: the previous `type` + `date` API still works.\n * When `caption` is omitted, the legacy props are joined with \" · \" into\n * a string caption.\n */\nexport function DocumentRow({\n  name,\n  caption,\n  type,\n  date,\n  icon,\n  rightSection,\n  onClick,\n  showChevron = false,\n  animationDelay,\n  ariaLabel,\n}: DocumentRowProps) {\n  const isClickable = Boolean(onClick);\n  const animate = animationDelay !== undefined;\n\n  const resolvedCaption: ReactNode =\n    caption ??\n    (type || date\n      ? [type, date ? formatDate(date) : undefined].filter(Boolean).join(\" · \")\n      : undefined);\n\n  const leadingNode = icon ?? (\n    <ThemeIcon size={36} radius=\"md\" variant=\"light\" color={colors.primary}>\n      <DefaultDocumentIcon />\n    </ThemeIcon>\n  );\n\n  const content = (\n    <Group gap=\"md\" wrap=\"nowrap\" align=\"center\">\n      <Box style={{ flexShrink: 0 }}>{leadingNode}</Box>\n      <Stack gap={2} style={{ minWidth: 0, flex: 1 }}>\n        <Text fw={500} size=\"sm\" lineClamp={1}>\n          {name}\n        </Text>\n        {resolvedCaption !== undefined && resolvedCaption !== null && resolvedCaption !== \"\" ? (\n          typeof resolvedCaption === \"string\" ? (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary} lineClamp={1}>\n              {resolvedCaption}\n            </Text>\n          ) : (\n            resolvedCaption\n          )\n        ) : null}\n      </Stack>\n      <Group gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n        {rightSection}\n        {showChevron && (\n          <Box c={fairmintVars.colorTextTertiary} style={{ display: \"inline-flex\" }}>\n            <DefaultChevronIcon />\n          </Box>\n        )}\n      </Group>\n    </Group>\n  );\n\n  const animationStyle = animate\n    ? ({\n        opacity: 0 as const,\n        animation: \"rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards\",\n        animationDelay: `${animationDelay}s`,\n      } as const)\n    : undefined;\n\n  if (!isClickable) {\n    return (\n      <Box py=\"sm\" px=\"md\" style={animationStyle}>\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <UnstyledButton\n      onClick={onClick}\n      className=\"fairmint-list-row\"\n      w=\"100%\"\n      py=\"sm\"\n      px=\"md\"\n      style={animationStyle}\n      aria-label={ariaLabel ?? name}\n    >\n      {content}\n    </UnstyledButton>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DocumentRow.js","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { formatDate } from \"../../../utils/format\";\nimport { Box, Group, Stack, Text, ThemeIcon, UnstyledButton } from \"../../primitives/layout\";\n\n/**\n * Default file-glyph SVG. Inlined so the library doesn't depend on\n * `@tabler/icons-react` (per the icon-injection rule). Consumers can\n * override the leading slot via the `icon` prop when a different glyph\n * (or a stacked badge) is more appropriate.\n */\nconst DefaultDocumentIcon = () => (\n  <svg\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n    <polyline points=\"14 2 14 8 20 8\" />\n    <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n    <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n    <polyline points=\"10 9 9 9 8 9\" />\n  </svg>\n);\n\nconst DefaultChevronIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n);\n\nexport interface DocumentRowProps {\n  /** Primary title — usually the file or agreement name. */\n  name: string;\n  /**\n   * Description below the title. Accepts a `ReactNode` so consumers can mix\n   * Badges, Text, dates, and inline metadata (companyName, seriesName, etc.)\n   * without working around a single-string subtitle slot.\n   */\n  caption?: ReactNode;\n  /**\n   * @deprecated Use `caption` directly. When `caption` is omitted and\n   * `type` and/or `date` is supplied, they are joined with \" · \" to\n   * produce a string caption. Preserved for backwards compatibility\n   * with the previous, ListRow-backed API.\n   */\n  type?: string;\n  /**\n   * @deprecated Use `caption` directly. The date is now consumer-\n   * formatted; pass a formatted string via `caption` instead. Preserved\n   * for backwards compatibility.\n   */\n  date?: string;\n  /**\n   * Leading visual — defaults to a tinted file-icon `ThemeIcon`. Pass a\n   * custom node (an icon, a badge, a small Avatar, etc.) when you want\n   * a different leading affordance.\n   */\n  icon?: ReactNode;\n  /** Right-side content — download button, lock badge, preview link, etc. */\n  rightSection?: ReactNode;\n  /**\n   * Drill-in chevron. Defaults to `false` — the right-side glyph (a\n   * download icon, a preview link, a status badge) usually conveys the\n   * affordance and the chevron is visual noise. Set to `true` for \"row\n   * that opens a detail view\" patterns.\n   */\n  showChevron?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n  /** Entrance animation delay in seconds. Omit to skip animation. */\n  animationDelay?: number;\n  /** aria-label for the clickable wrapper. Defaults to `name`. */\n  ariaLabel?: string;\n}\n\n/**\n * Document list item — title, free-form caption, optional leading icon,\n * optional right-side affordance, optional drill-in chevron.\n *\n * Designed against three real consumers (investorv2's `OpportunityDocuments`,\n * `SignSection` legal-doc list, and the mobile card view on `/documents`)\n * so the shape covers the actual patterns rather than an imagined one.\n *\n * Backwards-compat note: the previous `type` + `date` API still works.\n * When `caption` is omitted, the legacy props are joined with \" · \" into\n * a string caption.\n */\nexport function DocumentRow({\n  name,\n  caption,\n  type,\n  date,\n  icon,\n  rightSection,\n  onClick,\n  showChevron = false,\n  animationDelay,\n  ariaLabel,\n}: DocumentRowProps) {\n  const isClickable = Boolean(onClick);\n  const animate = animationDelay !== undefined;\n\n  const resolvedCaption: ReactNode =\n    caption ??\n    (type || date\n      ? [type, date ? formatDate(date) : undefined].filter(Boolean).join(\" · \")\n      : undefined);\n\n  const leadingNode = icon ?? (\n    <ThemeIcon\n      size={36}\n      radius=\"md\"\n      variant=\"light\"\n      color={colors.primary}\n      style={{\n        backgroundColor: fairmintVars.colorBgBrandSubtle,\n        color: fairmintVars.colorBrandPrimary,\n      }}\n    >\n      <DefaultDocumentIcon />\n    </ThemeIcon>\n  );\n\n  const content = (\n    <Group gap=\"md\" wrap=\"nowrap\" align=\"center\">\n      <Box style={{ flexShrink: 0 }}>{leadingNode}</Box>\n      <Stack gap={2} style={{ minWidth: 0, flex: 1 }}>\n        <Text fw={500} size=\"sm\" lineClamp={1}>\n          {name}\n        </Text>\n        {resolvedCaption !== undefined && resolvedCaption !== null && resolvedCaption !== \"\" ? (\n          typeof resolvedCaption === \"string\" ? (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary} lineClamp={1}>\n              {resolvedCaption}\n            </Text>\n          ) : (\n            resolvedCaption\n          )\n        ) : null}\n      </Stack>\n      <Group gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n        {rightSection}\n        {showChevron && (\n          <Box c={fairmintVars.colorTextTertiary} style={{ display: \"inline-flex\" }}>\n            <DefaultChevronIcon />\n          </Box>\n        )}\n      </Group>\n    </Group>\n  );\n\n  const animationStyle = animate\n    ? ({\n        opacity: 0 as const,\n        animation: \"rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards\",\n        animationDelay: `${animationDelay}s`,\n      } as const)\n    : undefined;\n\n  if (!isClickable) {\n    return (\n      <Box py=\"sm\" px=\"md\" style={animationStyle}>\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <UnstyledButton\n      onClick={onClick}\n      className=\"fairmint-list-row\"\n      w=\"100%\"\n      py=\"sm\"\n      px=\"md\"\n      style={animationStyle}\n      aria-label={ariaLabel ?? name}\n    >\n      {content}\n    </UnstyledButton>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/specific/InvestorProfileCard/InvestorProfileCard.cjs

@@ -111,7 +111,7 @@ function InvestorProfileCard({
                   position: "absolute",
                   inset: 0,
                   borderRadius: index.radii.md,
-                  backgroundColor: `${index.neutralColors[900]}80`,
+                  backgroundColor: `color-mix(in srgb, ${index.fairmintVars.colorBgCanvas} 80%, transparent)`,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center"
@@ -125,7 +125,7 @@ function InvestorProfileCard({
                   position: "absolute",
                   inset: 0,
                   borderRadius: index.radii.md,
-                  backgroundColor: `${index.neutralColors[900]}73`,
+                  backgroundColor: `color-mix(in srgb, ${index.fairmintVars.colorBgCanvas} 73%, transparent)`,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",

package/dist/components/specific/InvestorProfileCard/InvestorProfileCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InvestorProfileCard.cjs","sources":["../../../../src/components/specific/InvestorProfileCard/InvestorProfileCard.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\nimport { fairmintVars, neutralColors, radii } from \"../../../theme\";\nimport { StatusBadge } from \"../../generic/StatusBadge/StatusBadge\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Loader } from \"../../primitives/Loader/Loader\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\nimport { Tooltip } from \"../../primitives/Tooltip/Tooltip\";\n\nexport interface InvestorProfileCardProps {\n  /** Investor's full name. */\n  name: string;\n  /** Investor's email address. */\n  email?: string;\n  /** Optional inline action rendered next to the email, like \"Change\". */\n  emailAction?: ReactNode;\n  /** Profile image URL. */\n  avatarUrl?: string;\n  /** Verification status (e.g., \"verified\", \"pending\", \"unverified\"). */\n  verificationStatus?: string;\n  /** ISO date string in UTC (e.g. \"2024-01-15T00:00:00.000Z\"). Rendered as \"Member since Jan 2024\". Formatted in UTC to avoid timezone-shifted months. */\n  memberSince?: string;\n  /** Secondary line below email (e.g. equity snapshot). */\n  subtitle?: string;\n  /** Additional content below the profile info. */\n  children?: ReactNode;\n\n  /** If undefined, no pencil icon is shown. */\n  onEditName?: () => void;\n  /** When true, the pencil icon is shown but disabled. Requires `onEditName` to be provided. */\n  editNameDisabled?: boolean;\n  /** Tooltip label shown on the disabled pencil icon. Only used when `editNameDisabled` is true. */\n  editNameTooltip?: string;\n  /** If undefined, no camera overlay is shown. */\n  onUploadPhoto?: () => void;\n  /** Shows a centered Loader over the avatar during upload. */\n  photoUploading?: boolean;\n  /**\n   * Icon rendered inside the pencil ActionIcon (e.g. `<IconPencil size={14} />`).\n   * Defaults to a built-in pencil SVG when not provided.\n   */\n  editNameIcon?: ReactNode;\n  /**\n   * Icon rendered inside the camera overlay (e.g. `<IconCamera size={20} color=\"white\" />`).\n   * Defaults to a built-in camera SVG when not provided.\n   */\n  uploadPhotoIcon?: ReactNode;\n}\n\nfunction DefaultPencilIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n}\n\nfunction DefaultCameraIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"white\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" />\n      <circle cx=\"12\" cy=\"13\" r=\"4\" />\n    </svg>\n  );\n}\n\nfunction formatMemberSince(iso: string): string | null {\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return null;\n  return `Member since ${date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\", timeZone: \"UTC\" })}`;\n}\n\nexport function InvestorProfileCard({\n  name,\n  email,\n  emailAction,\n  avatarUrl,\n  verificationStatus,\n  memberSince,\n  subtitle,\n  children,\n  onEditName,\n  editNameDisabled,\n  editNameTooltip,\n  onUploadPhoto,\n  photoUploading,\n  editNameIcon,\n  uploadPhotoIcon,\n}: InvestorProfileCardProps) {\n  const memberSinceText = memberSince ? formatMemberSince(memberSince) : null;\n  const [isAvatarHovered, setIsAvatarHovered] = useState(false);\n  const [isAvatarFocused, setIsAvatarFocused] = useState(false);\n\n  // Fall back to a placeholder so avatar and heading are never blank\n  const displayName = name?.trim() || \"Add your name\";\n\n  const avatarEl = (\n    <Avatar name={displayName} src={avatarUrl} alt={displayName} radius=\"md\" size={56} />\n  );\n\n  return (\n    <Stack gap=\"md\">\n      <Group gap=\"md\" wrap=\"nowrap\">\n        {onUploadPhoto ? (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={onUploadPhoto}\n            onMouseEnter={() => setIsAvatarHovered(true)}\n            onMouseLeave={() => setIsAvatarHovered(false)}\n            onFocus={() => setIsAvatarFocused(true)}\n            onBlur={() => setIsAvatarFocused(false)}\n            aria-label=\"Upload profile photo\"\n            disabled={!!photoUploading}\n            style={{\n              position: \"relative\",\n              display: \"inline-block\",\n              cursor: photoUploading ? \"not-allowed\" : \"pointer\",\n              background: \"none\",\n              border: \"none\",\n              padding: 0,\n              borderRadius: radii.md,\n              flexShrink: 0,\n            }}\n          >\n            {avatarEl}\n            {photoUploading ? (\n              <Box\n                data-testid=\"photo-uploading-overlay\"\n                aria-label=\"Uploading photo\"\n                role=\"status\"\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  borderRadius: radii.md,\n                  backgroundColor: `${neutralColors[900]}80`,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                }}\n              >\n                <Loader size=\"xs\" color=\"white\" />\n              </Box>\n            ) : (\n              <Box\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  borderRadius: radii.md,\n                  backgroundColor: `${neutralColors[900]}73`,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  opacity: isAvatarHovered || isAvatarFocused ? 1 : 0,\n                  transition: \"opacity 150ms ease\",\n                  pointerEvents: \"none\",\n                }}\n              >\n                {uploadPhotoIcon ?? <DefaultCameraIcon />}\n              </Box>\n            )}\n          </Box>\n        ) : (\n          avatarEl\n        )}\n\n        <Stack gap={2}>\n          <Group gap=\"xs\" wrap=\"nowrap\" align=\"center\">\n            <Text fw={600} size=\"md\">\n              {displayName}\n            </Text>\n            {verificationStatus && <StatusBadge status={verificationStatus} size=\"xs\" />}\n            {onEditName &&\n              (editNameDisabled ? (\n                <Tooltip label={editNameTooltip ?? \"Coming soon\"}>\n                  <ActionIcon\n                    variant=\"subtle\"\n                    size=\"sm\"\n                    aria-label=\"Edit name\"\n                    aria-disabled=\"true\"\n                    onClick={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                    }}\n                    style={{ opacity: 0.5, cursor: \"not-allowed\" }}\n                  >\n                    {editNameIcon ?? <DefaultPencilIcon />}\n                  </ActionIcon>\n                </Tooltip>\n              ) : (\n                <ActionIcon variant=\"subtle\" size=\"sm\" onClick={onEditName} aria-label=\"Edit name\">\n                  {editNameIcon ?? <DefaultPencilIcon />}\n                </ActionIcon>\n              ))}\n          </Group>\n          {email &&\n            (emailAction ? (\n              <Group gap={6} wrap=\"wrap\" align=\"center\">\n                <Text size=\"sm\" c={fairmintVars.colorTextSecondary}>\n                  {email}\n                </Text>\n                {emailAction}\n              </Group>\n            ) : (\n              <Text size=\"sm\" c={fairmintVars.colorTextSecondary}>\n                {email}\n              </Text>\n            ))}\n          {memberSinceText && (\n            <Text size=\"xs\" c={fairmintVars.colorTextTertiary}>\n              {memberSinceText}\n            </Text>\n          )}\n          {subtitle && (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n      </Group>\n      {children}\n    </Stack>\n  );\n}\n"],"names":["jsx","jsxs","useState","Avatar","Stack","Group","Box","radii","neutralColors","Loader","Text","StatusBadge","Tooltip","ActionIcon","fairmintVars"],"mappings":"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"}
+{"version":3,"file":"InvestorProfileCard.cjs","sources":["../../../../src/components/specific/InvestorProfileCard/InvestorProfileCard.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\nimport { StatusBadge } from \"../../generic/StatusBadge/StatusBadge\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Loader } from \"../../primitives/Loader/Loader\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\nimport { Tooltip } from \"../../primitives/Tooltip/Tooltip\";\n\nexport interface InvestorProfileCardProps {\n  /** Investor's full name. */\n  name: string;\n  /** Investor's email address. */\n  email?: string;\n  /** Optional inline action rendered next to the email, like \"Change\". */\n  emailAction?: ReactNode;\n  /** Profile image URL. */\n  avatarUrl?: string;\n  /** Verification status (e.g., \"verified\", \"pending\", \"unverified\"). */\n  verificationStatus?: string;\n  /** ISO date string in UTC (e.g. \"2024-01-15T00:00:00.000Z\"). Rendered as \"Member since Jan 2024\". Formatted in UTC to avoid timezone-shifted months. */\n  memberSince?: string;\n  /** Secondary line below email (e.g. equity snapshot). */\n  subtitle?: string;\n  /** Additional content below the profile info. */\n  children?: ReactNode;\n\n  /** If undefined, no pencil icon is shown. */\n  onEditName?: () => void;\n  /** When true, the pencil icon is shown but disabled. Requires `onEditName` to be provided. */\n  editNameDisabled?: boolean;\n  /** Tooltip label shown on the disabled pencil icon. Only used when `editNameDisabled` is true. */\n  editNameTooltip?: string;\n  /** If undefined, no camera overlay is shown. */\n  onUploadPhoto?: () => void;\n  /** Shows a centered Loader over the avatar during upload. */\n  photoUploading?: boolean;\n  /**\n   * Icon rendered inside the pencil ActionIcon (e.g. `<IconPencil size={14} />`).\n   * Defaults to a built-in pencil SVG when not provided.\n   */\n  editNameIcon?: ReactNode;\n  /**\n   * Icon rendered inside the camera overlay (e.g. `<IconCamera size={20} color=\"white\" />`).\n   * Defaults to a built-in camera SVG when not provided.\n   */\n  uploadPhotoIcon?: ReactNode;\n}\n\nfunction DefaultPencilIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n}\n\nfunction DefaultCameraIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"white\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" />\n      <circle cx=\"12\" cy=\"13\" r=\"4\" />\n    </svg>\n  );\n}\n\nfunction formatMemberSince(iso: string): string | null {\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return null;\n  return `Member since ${date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\", timeZone: \"UTC\" })}`;\n}\n\nexport function InvestorProfileCard({\n  name,\n  email,\n  emailAction,\n  avatarUrl,\n  verificationStatus,\n  memberSince,\n  subtitle,\n  children,\n  onEditName,\n  editNameDisabled,\n  editNameTooltip,\n  onUploadPhoto,\n  photoUploading,\n  editNameIcon,\n  uploadPhotoIcon,\n}: InvestorProfileCardProps) {\n  const memberSinceText = memberSince ? formatMemberSince(memberSince) : null;\n  const [isAvatarHovered, setIsAvatarHovered] = useState(false);\n  const [isAvatarFocused, setIsAvatarFocused] = useState(false);\n\n  // Fall back to a placeholder so avatar and heading are never blank\n  const displayName = name?.trim() || \"Add your name\";\n\n  const avatarEl = (\n    <Avatar name={displayName} src={avatarUrl} alt={displayName} radius=\"md\" size={56} />\n  );\n\n  return (\n    <Stack gap=\"md\">\n      <Group gap=\"md\" wrap=\"nowrap\">\n        {onUploadPhoto ? (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={onUploadPhoto}\n            onMouseEnter={() => setIsAvatarHovered(true)}\n            onMouseLeave={() => setIsAvatarHovered(false)}\n            onFocus={() => setIsAvatarFocused(true)}\n            onBlur={() => setIsAvatarFocused(false)}\n            aria-label=\"Upload profile photo\"\n            disabled={!!photoUploading}\n            style={{\n              position: \"relative\",\n              display: \"inline-block\",\n              cursor: photoUploading ? \"not-allowed\" : \"pointer\",\n              background: \"none\",\n              border: \"none\",\n              padding: 0,\n              borderRadius: radii.md,\n              flexShrink: 0,\n            }}\n          >\n            {avatarEl}\n            {photoUploading ? (\n              <Box\n                data-testid=\"photo-uploading-overlay\"\n                aria-label=\"Uploading photo\"\n                role=\"status\"\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  borderRadius: radii.md,\n                  backgroundColor: `color-mix(in srgb, ${fairmintVars.colorBgCanvas} 80%, transparent)`,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                }}\n              >\n                <Loader size=\"xs\" color=\"white\" />\n              </Box>\n            ) : (\n              <Box\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  borderRadius: radii.md,\n                  backgroundColor: `color-mix(in srgb, ${fairmintVars.colorBgCanvas} 73%, transparent)`,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  opacity: isAvatarHovered || isAvatarFocused ? 1 : 0,\n                  transition: \"opacity 150ms ease\",\n                  pointerEvents: \"none\",\n                }}\n              >\n                {uploadPhotoIcon ?? <DefaultCameraIcon />}\n              </Box>\n            )}\n          </Box>\n        ) : (\n          avatarEl\n        )}\n\n        <Stack gap={2}>\n          <Group gap=\"xs\" wrap=\"nowrap\" align=\"center\">\n            <Text fw={600} size=\"md\">\n              {displayName}\n            </Text>\n            {verificationStatus && <StatusBadge status={verificationStatus} size=\"xs\" />}\n            {onEditName &&\n              (editNameDisabled ? (\n                <Tooltip label={editNameTooltip ?? \"Coming soon\"}>\n                  <ActionIcon\n                    variant=\"subtle\"\n                    size=\"sm\"\n                    aria-label=\"Edit name\"\n                    aria-disabled=\"true\"\n                    onClick={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                    }}\n                    style={{ opacity: 0.5, cursor: \"not-allowed\" }}\n                  >\n                    {editNameIcon ?? <DefaultPencilIcon />}\n                  </ActionIcon>\n                </Tooltip>\n              ) : (\n                <ActionIcon variant=\"subtle\" size=\"sm\" onClick={onEditName} aria-label=\"Edit name\">\n                  {editNameIcon ?? <DefaultPencilIcon />}\n                </ActionIcon>\n              ))}\n          </Group>\n          {email &&\n            (emailAction ? (\n              <Group gap={6} wrap=\"wrap\" align=\"center\">\n                <Text size=\"sm\" c={fairmintVars.colorTextSecondary}>\n                  {email}\n                </Text>\n                {emailAction}\n              </Group>\n            ) : (\n              <Text size=\"sm\" c={fairmintVars.colorTextSecondary}>\n                {email}\n              </Text>\n            ))}\n          {memberSinceText && (\n            <Text size=\"xs\" c={fairmintVars.colorTextTertiary}>\n              {memberSinceText}\n            </Text>\n          )}\n          {subtitle && (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n      </Group>\n      {children}\n    </Stack>\n  );\n}\n"],"names":["jsx","jsxs","useState","Avatar","Stack","Group","Box","radii","fairmintVars","Loader","Text","StatusBadge","Tooltip","ActionIcon"],"mappings":"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"}