@fairmint/ui 0.3.10 → 0.3.12

package/dist/components/generic/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fontSizes, neutralColors, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n  /** Visible action label. */\n  label: ReactNode;\n}\n\nexport type BannerActions =\n  | readonly [BannerActionProps]\n  | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n  /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n  title?: ReactNode;\n  /** Supporting context. Omit for a title-only banner. */\n  description?: ReactNode;\n  /** Semantic meaning and visual treatment. @default \"brand\" */\n  tone?: BannerTone;\n  /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n  presentation?: BannerPresentation;\n  /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */\n  icon?: ReactNode | null;\n  /** Optional badge label displayed beside the title. */\n  badgeLabel?: ReactNode;\n  /** Optional standardized CTA. */\n  action?: BannerActionProps;\n  /** Up to two CTAs in visual order: secondary first, primary last. */\n  actions?: BannerActions;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  /** Accessible label for the banner region. Defaults to the string title when possible. */\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n  brand: colors.primary,\n  neutral: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  warning: colors.warning,\n  error: colors.error,\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n  const commonProps = {\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true,\n  };\n\n  if (tone === \"success\") {\n    return (\n      <svg {...commonProps}>\n        <title>Success</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"warning\") {\n    return (\n      <svg {...commonProps}>\n        <title>Warning</title>\n        <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"error\") {\n    return (\n      <svg {...commonProps}>\n        <title>Error</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m9 9 6 6\" />\n        <path d=\"m15 9-6 6\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg {...commonProps}>\n      <title>Information</title>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 11v5\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n  const color = TONE_COLORS[tone];\n\n  if (presentation === \"page-level\") {\n    return {\n      bg: `${color}.1`,\n      style: {\n        borderRadius: 0,\n      } satisfies CSSProperties,\n    };\n  }\n\n  // Chip Banner: tinted surface + semantic border (error border = error.2)\n  const borderShade = tone === \"brand\" ? 1 : tone === \"neutral\" ? 3 : 2;\n\n  return {\n    bg: `${color}.0`,\n    bd: `1px solid ${color}.${borderShade}`,\n    style: {\n      borderRadius: radii.lg,\n    } satisfies CSSProperties,\n  };\n};\n\n/** Titles always use dark primary text for WCAG AA contrast, inline or page-level. */\nconst titleColor = () => neutralColors[900];\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n  if (isSecondary) return \"outline\";\n  if (tone === \"brand\") return \"light\";\n  if (tone === \"neutral\") return \"outline\";\n  return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n  hasIcon: boolean;\n  hasTitle: boolean;\n  hasDescription: boolean;\n  hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n  hasActions,\n  hasDescription,\n  hasIcon,\n  hasTitle,\n}: BannerLayoutOptions) => {\n  const mobileColumns = hasIcon ? \"40px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n  const desktopContentColumns = hasIcon ? [\"40px\"] : [];\n\n  if (hasTitle || hasDescription) {\n    desktopContentColumns.push(\"minmax(0, 1fr)\");\n  }\n\n  if (hasActions) {\n    desktopContentColumns.push(\"auto\");\n  }\n\n  const mobileRows: string[] = [];\n  if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n  else if (hasIcon) mobileRows.push('\"icon icon\"');\n  else if (hasTitle) mobileRows.push('\"title\"');\n\n  if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n  if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n  const desktopRows: string[] = [];\n  const actionCell = hasActions ? \" actions\" : \"\";\n  if (hasIcon && hasTitle && hasDescription) {\n    desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n  } else if (hasIcon && hasTitle) {\n    desktopRows.push(`\"icon title${actionCell}\"`);\n  } else if (hasIcon && hasDescription) {\n    desktopRows.push(`\"icon description${actionCell}\"`);\n  } else if (hasIcon) {\n    desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n  } else if (hasTitle && hasDescription) {\n    desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n  } else if (hasTitle) {\n    desktopRows.push(`\"title${actionCell}\"`);\n  } else if (hasDescription) {\n    desktopRows.push(`\"description${actionCell}\"`);\n  } else if (hasActions) {\n    desktopRows.push('\"actions\"');\n  }\n\n  return {\n    gridTemplateAreas: {\n      base: mobileRows.join(\" \"),\n      sm: desktopRows.join(\" \"),\n    },\n    gridTemplateColumns: {\n      base: mobileColumns,\n      sm: desktopContentColumns.join(\" \") || \"auto\",\n    },\n  };\n};\n\nconst descriptionTextProps = {\n  size: \"sm\" as const,\n  c: neutralColors[500],\n  style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return <Text {...descriptionTextProps}>{children}</Text>;\n  }\n\n  return (\n    <Box\n      c={neutralColors[500]}\n      style={{\n        fontSize: fontSizes.sm,\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n  action,\n  ariaLabel,\n  badgeLabel,\n  className,\n  description,\n  icon,\n  actions,\n  presentation = \"inline\",\n  role,\n  style,\n  title,\n  tone = \"brand\",\n}: BannerProps) {\n  const color = TONE_COLORS[tone];\n  const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n  const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n  const surface = surfaceProps(tone, presentation);\n  const layout = getBannerLayout({\n    hasActions: resolvedActions.length > 0,\n    hasDescription: description !== undefined,\n    hasIcon: iconNode !== null,\n    hasTitle: title !== undefined || badgeLabel !== undefined,\n  });\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      className={className}\n      data-presentation={presentation}\n      data-tone={tone}\n      role={resolvedRole}\n      px=\"md\"\n      py=\"md\"\n      bg={surface.bg}\n      bd={\"bd\" in surface ? surface.bd : undefined}\n      style={{\n        boxSizing: \"border-box\",\n        width: \"100%\",\n        ...surface.style,\n        ...style,\n      }}\n      sx={{\n        display: \"grid\",\n        columnGap: spacing.sm,\n        rowGap: spacing.xs,\n        ...layout,\n      }}\n    >\n      {iconNode !== null && (\n        <ThemeIcon\n          aria-hidden\n          color={color}\n          radius=\"sm\"\n          size={40}\n          variant=\"light\"\n          style={{ gridArea: \"icon\", alignSelf: \"center\" }}\n        >\n          {iconNode}\n        </ThemeIcon>\n      )}\n\n      {(title !== undefined || badgeLabel !== undefined) && (\n        <Group\n          align=\"center\"\n          gap=\"xs\"\n          wrap=\"wrap\"\n          style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n        >\n          {title !== undefined && (\n            <Text\n              fw={600}\n              size=\"md\"\n              c={titleColor()}\n              style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n            >\n              {title}\n            </Text>\n          )}\n          {badgeLabel !== undefined && (\n            <Badge color={color} size=\"sm\" variant=\"light\">\n              {badgeLabel}\n            </Badge>\n          )}\n        </Group>\n      )}\n\n      {description !== undefined && (\n        <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n          <BannerDescription>{description}</BannerDescription>\n        </Box>\n      )}\n\n      {resolvedActions.length > 0 && (\n        <Box\n          sx={{\n            display: \"flex\",\n            flexDirection: { base: \"column\", sm: \"row\" },\n            alignItems: \"stretch\",\n            justifyContent: \"flex-end\",\n            gap: spacing.xs,\n            minWidth: 0,\n            width: { base: \"100%\", sm: \"max-content\" },\n            maxWidth: \"100%\",\n          }}\n          style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n        >\n          {resolvedActions.map(({ label, ...buttonProps }, index) => (\n            <Button\n              key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n              {...buttonProps}\n              color={color}\n              variant={actionVariant(tone, index < resolvedActions.length - 1)}\n              style={{\n                ...buttonProps.style,\n                boxSizing: \"border-box\",\n                flex: \"0 1 auto\",\n                minHeight: 44,\n                maxWidth: \"100%\",\n                overflowWrap: \"anywhere\",\n                whiteSpace: \"normal\",\n                width: \"100%\",\n              }}\n            >\n              {label}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n  /** Visible action label. */\n  label: ReactNode;\n}\n\nexport type BannerActions =\n  | readonly [BannerActionProps]\n  | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n  /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n  title?: ReactNode;\n  /** Supporting context. Omit for a title-only banner. */\n  description?: ReactNode;\n  /** Semantic meaning and visual treatment. @default \"brand\" */\n  tone?: BannerTone;\n  /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n  presentation?: BannerPresentation;\n  /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */\n  icon?: ReactNode | null;\n  /** Optional badge label displayed beside the title. */\n  badgeLabel?: ReactNode;\n  /** Optional standardized CTA. */\n  action?: BannerActionProps;\n  /** Up to two CTAs in visual order: secondary first, primary last. */\n  actions?: BannerActions;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  /** Accessible label for the banner region. Defaults to the string title when possible. */\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n  brand: colors.primary,\n  neutral: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  warning: colors.warning,\n  error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n  brand: {\n    background: fairmintVars.colorBgBrandSubtle,\n    border: fairmintVars.colorBorderFocus,\n    icon: fairmintVars.colorBrandPrimary,\n  },\n  neutral: {\n    background: fairmintVars.colorBgSurfaceSecondary,\n    border: fairmintVars.colorBorderDefault,\n    icon: fairmintVars.colorIconSecondary,\n  },\n  info: {\n    background: fairmintVars.colorInfoBg,\n    border: fairmintVars.colorInfoBorder,\n    icon: fairmintVars.colorInfoText,\n  },\n  success: {\n    background: fairmintVars.colorSuccessBg,\n    border: fairmintVars.colorSuccessBorder,\n    icon: fairmintVars.colorSuccessText,\n  },\n  warning: {\n    background: fairmintVars.colorWarningBg,\n    border: fairmintVars.colorWarningBorder,\n    icon: fairmintVars.colorWarningText,\n  },\n  error: {\n    background: fairmintVars.colorErrorBg,\n    border: fairmintVars.colorErrorBorder,\n    icon: fairmintVars.colorErrorText,\n  },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n  const commonProps = {\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true,\n  };\n\n  if (tone === \"success\") {\n    return (\n      <svg {...commonProps}>\n        <title>Success</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"warning\") {\n    return (\n      <svg {...commonProps}>\n        <title>Warning</title>\n        <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"error\") {\n    return (\n      <svg {...commonProps}>\n        <title>Error</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m9 9 6 6\" />\n        <path d=\"m15 9-6 6\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg {...commonProps}>\n      <title>Information</title>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 11v5\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n  const tokens = TONE_TOKENS[tone];\n\n  if (presentation === \"page-level\") {\n    return {\n      style: {\n        backgroundColor: tokens.background,\n        borderRadius: 0,\n      } satisfies CSSProperties,\n    };\n  }\n\n  return {\n    style: {\n      backgroundColor: tokens.background,\n      border: `1px solid ${tokens.border}`,\n      borderRadius: radii.lg,\n    } satisfies CSSProperties,\n  };\n};\n\n/**\n * Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n */\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n  if (isSecondary) return \"outline\";\n  if (tone === \"brand\") return \"light\";\n  if (tone === \"neutral\") return \"outline\";\n  return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n  hasIcon: boolean;\n  hasTitle: boolean;\n  hasDescription: boolean;\n  hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n  hasActions,\n  hasDescription,\n  hasIcon,\n  hasTitle,\n}: BannerLayoutOptions) => {\n  const mobileColumns = hasIcon ? \"40px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n  const desktopContentColumns = hasIcon ? [\"40px\"] : [];\n\n  if (hasTitle || hasDescription) {\n    desktopContentColumns.push(\"minmax(0, 1fr)\");\n  }\n\n  if (hasActions) {\n    desktopContentColumns.push(\"auto\");\n  }\n\n  const mobileRows: string[] = [];\n  if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n  else if (hasIcon) mobileRows.push('\"icon icon\"');\n  else if (hasTitle) mobileRows.push('\"title\"');\n\n  if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n  if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n  const desktopRows: string[] = [];\n  const actionCell = hasActions ? \" actions\" : \"\";\n  if (hasIcon && hasTitle && hasDescription) {\n    desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n  } else if (hasIcon && hasTitle) {\n    desktopRows.push(`\"icon title${actionCell}\"`);\n  } else if (hasIcon && hasDescription) {\n    desktopRows.push(`\"icon description${actionCell}\"`);\n  } else if (hasIcon) {\n    desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n  } else if (hasTitle && hasDescription) {\n    desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n  } else if (hasTitle) {\n    desktopRows.push(`\"title${actionCell}\"`);\n  } else if (hasDescription) {\n    desktopRows.push(`\"description${actionCell}\"`);\n  } else if (hasActions) {\n    desktopRows.push('\"actions\"');\n  }\n\n  return {\n    gridTemplateAreas: {\n      base: mobileRows.join(\" \"),\n      sm: desktopRows.join(\" \"),\n    },\n    gridTemplateColumns: {\n      base: mobileColumns,\n      sm: desktopContentColumns.join(\" \") || \"auto\",\n    },\n  };\n};\n\nconst descriptionTextProps = {\n  size: \"sm\" as const,\n  c: fairmintVars.colorTextSecondary,\n  style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return <Text {...descriptionTextProps}>{children}</Text>;\n  }\n\n  return (\n    <Box\n      c={fairmintVars.colorTextSecondary}\n      style={{\n        fontSize: fontSizes.sm,\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n  action,\n  ariaLabel,\n  badgeLabel,\n  className,\n  description,\n  icon,\n  actions,\n  presentation = \"inline\",\n  role,\n  style,\n  title,\n  tone = \"brand\",\n}: BannerProps) {\n  const color = TONE_COLORS[tone];\n  const tokens = TONE_TOKENS[tone];\n  const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n  const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n  const surface = surfaceProps(tone, presentation);\n  const layout = getBannerLayout({\n    hasActions: resolvedActions.length > 0,\n    hasDescription: description !== undefined,\n    hasIcon: iconNode !== null,\n    hasTitle: title !== undefined || badgeLabel !== undefined,\n  });\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      className={className}\n      data-presentation={presentation}\n      data-tone={tone}\n      role={resolvedRole}\n      px=\"md\"\n      py=\"md\"\n      style={{\n        boxSizing: \"border-box\",\n        width: \"100%\",\n        ...surface.style,\n        ...style,\n      }}\n      sx={{\n        display: \"grid\",\n        columnGap: spacing.sm,\n        rowGap: spacing.xs,\n        ...layout,\n      }}\n    >\n      {iconNode !== null && (\n        <ThemeIcon\n          aria-hidden\n          color={color}\n          radius=\"sm\"\n          size={40}\n          variant=\"light\"\n          style={{\n            backgroundColor: tokens.background,\n            color: tokens.icon,\n            gridArea: \"icon\",\n            alignSelf: \"center\",\n          }}\n        >\n          {iconNode}\n        </ThemeIcon>\n      )}\n\n      {(title !== undefined || badgeLabel !== undefined) && (\n        <Group\n          align=\"center\"\n          gap=\"xs\"\n          wrap=\"wrap\"\n          style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n        >\n          {title !== undefined && (\n            <Text\n              fw={600}\n              size=\"md\"\n              c={titleColor()}\n              style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n            >\n              {title}\n            </Text>\n          )}\n          {badgeLabel !== undefined && (\n            <Badge color={color} size=\"sm\" variant=\"light\">\n              {badgeLabel}\n            </Badge>\n          )}\n        </Group>\n      )}\n\n      {description !== undefined && (\n        <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n          <BannerDescription>{description}</BannerDescription>\n        </Box>\n      )}\n\n      {resolvedActions.length > 0 && (\n        <Box\n          sx={{\n            display: \"flex\",\n            flexDirection: { base: \"column\", sm: \"row\" },\n            alignItems: \"stretch\",\n            justifyContent: \"flex-end\",\n            gap: spacing.xs,\n            minWidth: 0,\n            width: { base: \"100%\", sm: \"max-content\" },\n            maxWidth: \"100%\",\n          }}\n          style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n        >\n          {resolvedActions.map(({ label, ...buttonProps }, index) => (\n            <Button\n              key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n              {...buttonProps}\n              color={color}\n              variant={actionVariant(tone, index < resolvedActions.length - 1)}\n              style={{\n                ...buttonProps.style,\n                boxSizing: \"border-box\",\n                flex: \"0 1 auto\",\n                minHeight: 44,\n                maxWidth: \"100%\",\n                overflowWrap: \"anywhere\",\n                whiteSpace: \"normal\",\n                width: \"100%\",\n              }}\n            >\n              {label}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/generic/CompanyBanner/CompanyBanner.cjs

@@ -66,7 +66,7 @@ function CompanyBanner({
             alignItems: "center",
             justifyContent: "center",
             paddingRight: 16,
-            borderRight: `1px solid ${index.neutralColors[200]}`
+            borderRight: `1px solid ${index.fairmintVars.colorBorderDefault}`
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(
             Avatar.Avatar,

package/dist/components/generic/CompanyBanner/CompanyBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CompanyBanner.cjs","sources":["../../../../src/components/generic/CompanyBanner/CompanyBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars, neutralColors } from \"../../../theme\";\nimport { getAvatarColor, getInitials } from \"../../../utils/avatar\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Box, Stack, Text } from \"../../primitives/layout\";\n\n/**\n * Three-stop brand gradient (blue → indigo → purple) composed from theme tokens.\n * Kept local to this file — the two-stop `brandColors.gradient` is visually\n * different and used elsewhere (e.g. FairmintLogo).\n */\nconst BRAND_GRADIENT = `linear-gradient(90deg, ${brandColors.blue} 0%, ${brandColors.indigo} 50%, ${brandColors.purple} 100%)`;\n\nexport interface CompanyBannerProps {\n  /** Company name — displayed as gradient text. */\n  companyName: string;\n  /**\n   * Logo URL. When present, renders a side-by-side layout (avatar | text).\n   * When absent, renders a centered text-only layout.\n   */\n  companyLogoUrl?: string | null;\n  /** Optional eyebrow label rendered above the company name (e.g. \"Invited by\"). */\n  label?: string;\n  /**\n   * Optional secondary content rendered below the company name (e.g. share count).\n   *\n   * Rendered values: non-boolean ReactNodes (including numeric `0` and strings).\n   * Hidden values: `null`, `undefined`, `true`, and `false` — matches React's\n   * rendering rules so `condition && \"text\"` patterns do not leave an empty\n   * row when `condition` is falsy.\n   */\n  detail?: ReactNode;\n  /** Avatar size in px. @default 52 */\n  avatarSize?: number;\n}\n\n/**\n * Renders a branded company banner — used on invitation flows and welcome\n * screens to anchor the user in the context of a specific company.\n *\n * Two visual modes:\n * - **With logo**: side-by-side layout (avatar | label / name / detail) with a\n *   vertical divider.\n * - **Without logo**: centered text-only layout with the gradient company name\n *   as the visual focal point.\n */\nexport function CompanyBanner({\n  companyName,\n  companyLogoUrl,\n  label,\n  detail,\n  avatarSize = 52,\n}: CompanyBannerProps) {\n  const trimmedName = companyName.trim();\n  const initials = getInitials(companyName);\n  const avatarColor = getAvatarColor(companyName);\n\n  const labelEl = label ? (\n    <Text\n      size=\"xs\"\n      fw={600}\n      tt=\"uppercase\"\n      c={fairmintVars.colorTextTertiary}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        letterSpacing: \"0.08em\",\n        lineHeight: 1,\n      }}\n    >\n      {label}\n    </Text>\n  ) : null;\n\n  const gradientNameEl = (\n    <Text\n      fw={700}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        fontSize: \"1.375rem\",\n        lineHeight: 1.3,\n        letterSpacing: \"-0.025em\",\n        background: BRAND_GRADIENT,\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        // Firefox ignores -webkit-text-fill-color; `color: transparent`\n        // is required for `background-clip: text` to show the gradient there.\n        // Chrome/Safari still pick up WebkitTextFillColor (kept for historical safety).\n        color: \"transparent\",\n        WebkitTextFillColor: \"transparent\",\n        wordBreak: \"break-word\",\n      }}\n    >\n      {companyName}\n    </Text>\n  );\n\n  // Skip the wrapper entirely for values React itself would not render,\n  // otherwise the empty <Text> row contributes Stack gap spacing below the name.\n  const hasDetail = detail != null && typeof detail !== \"boolean\";\n  const detailEl = hasDetail ? (\n    <Text size=\"sm\" c={fairmintVars.colorTextSecondary} style={{ lineHeight: 1.4 }}>\n      {detail}\n    </Text>\n  ) : null;\n\n  if (companyLogoUrl) {\n    return (\n      <Box style={{ display: \"flex\", alignItems: \"stretch\", gap: 16 }}>\n        <Box\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            paddingRight: 16,\n            borderRight: `1px solid ${neutralColors[200]}`,\n          }}\n        >\n          <Avatar\n            src={companyLogoUrl}\n            alt={trimmedName ? `${trimmedName} logo` : \"Company logo\"}\n            radius=\"xl\"\n            size={avatarSize}\n            color={avatarColor}\n          >\n            {initials}\n          </Avatar>\n        </Box>\n        {/* minWidth: 0 lets this flex item shrink below its intrinsic width\n            so long company names wrap instead of pushing the container wider. */}\n        <Stack gap={2} justify=\"center\" style={{ minWidth: 0 }}>\n          {labelEl}\n          {gradientNameEl}\n          {detailEl}\n        </Stack>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack align=\"center\" gap={4}>\n      {labelEl}\n      {gradientNameEl}\n      {detailEl}\n    </Stack>\n  );\n}\n"],"names":["brandColors","getInitials","getAvatarColor","jsx","Text","fairmintVars","jsxs","Box","neutralColors","Avatar","Stack"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB,0BAA0BA,MAAAA,YAAY,IAAI,QAAQA,kBAAY,MAAM,SAASA,kBAAY,MAAM;AAmC/G,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAuB;AACrB,QAAM,cAAc,YAAY,KAAA;AAChC,QAAM,WAAWC,OAAAA,YAAY,WAAW;AACxC,QAAM,cAAcC,OAAAA,eAAe,WAAW;AAE9C,QAAM,UAAU,QACdC,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,GAAGC,MAAAA,aAAa;AAAA,MAChB,OAAO;AAAA,QACL,YAAYA,MAAAA,aAAa;AAAA,QACzB,eAAe;AAAA,QACf,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA;AAAA,IAAA;AAAA,EAAA,IAED;AAEJ,QAAM,iBACJF,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,QACL,YAAYC,MAAAA,aAAa;AAAA,QACzB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,sBAAsB;AAAA;AAAA;AAAA;AAAA,QAItB,OAAO;AAAA,QACP,qBAAqB;AAAA,QACrB,WAAW;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,IAAA;AAAA,EAAA;AAML,QAAM,YAAY,UAAU,QAAQ,OAAO,WAAW;AACtD,QAAM,WAAW,YACfF,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGC,MAAAA,aAAa,oBAAoB,OAAO,EAAE,YAAY,IAAA,GACtE,kBACH,IACE;AAEJ,MAAI,gBAAgB;AAClB,WACEC,gCAACC,OAAAA,KAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,WAAW,KAAK,GAAA,GACzD,UAAA;AAAA,MAAAJ,2BAAAA;AAAAA,QAACI,OAAAA;AAAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,cAAc;AAAA,YACd,aAAa,aAAaC,MAAAA,cAAc,GAAG,CAAC;AAAA,UAAA;AAAA,UAG9C,UAAAL,2BAAAA;AAAAA,YAACM,OAAAA;AAAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,cAAc,GAAG,WAAW,UAAU;AAAA,cAC3C,QAAO;AAAA,cACP,MAAM;AAAA,cACN,OAAO;AAAA,cAEN,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAIFH,2BAAAA,KAACI,OAAAA,OAAA,EAAM,KAAK,GAAG,SAAQ,UAAS,OAAO,EAAE,UAAU,EAAA,GAChD,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACEJ,2BAAAA,KAACI,OAAAA,OAAA,EAAM,OAAM,UAAS,KAAK,GACxB,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GACH;AAEJ;;"}
+{"version":3,"file":"CompanyBanner.cjs","sources":["../../../../src/components/generic/CompanyBanner/CompanyBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars } from \"../../../theme\";\nimport { getAvatarColor, getInitials } from \"../../../utils/avatar\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Box, Stack, Text } from \"../../primitives/layout\";\n\n/**\n * Three-stop brand gradient (blue → indigo → purple) composed from theme tokens.\n * Kept local to this file — the two-stop `brandColors.gradient` is visually\n * different and used elsewhere (e.g. FairmintLogo).\n */\nconst BRAND_GRADIENT = `linear-gradient(90deg, ${brandColors.blue} 0%, ${brandColors.indigo} 50%, ${brandColors.purple} 100%)`;\n\nexport interface CompanyBannerProps {\n  /** Company name — displayed as gradient text. */\n  companyName: string;\n  /**\n   * Logo URL. When present, renders a side-by-side layout (avatar | text).\n   * When absent, renders a centered text-only layout.\n   */\n  companyLogoUrl?: string | null;\n  /** Optional eyebrow label rendered above the company name (e.g. \"Invited by\"). */\n  label?: string;\n  /**\n   * Optional secondary content rendered below the company name (e.g. share count).\n   *\n   * Rendered values: non-boolean ReactNodes (including numeric `0` and strings).\n   * Hidden values: `null`, `undefined`, `true`, and `false` — matches React's\n   * rendering rules so `condition && \"text\"` patterns do not leave an empty\n   * row when `condition` is falsy.\n   */\n  detail?: ReactNode;\n  /** Avatar size in px. @default 52 */\n  avatarSize?: number;\n}\n\n/**\n * Renders a branded company banner — used on invitation flows and welcome\n * screens to anchor the user in the context of a specific company.\n *\n * Two visual modes:\n * - **With logo**: side-by-side layout (avatar | label / name / detail) with a\n *   vertical divider.\n * - **Without logo**: centered text-only layout with the gradient company name\n *   as the visual focal point.\n */\nexport function CompanyBanner({\n  companyName,\n  companyLogoUrl,\n  label,\n  detail,\n  avatarSize = 52,\n}: CompanyBannerProps) {\n  const trimmedName = companyName.trim();\n  const initials = getInitials(companyName);\n  const avatarColor = getAvatarColor(companyName);\n\n  const labelEl = label ? (\n    <Text\n      size=\"xs\"\n      fw={600}\n      tt=\"uppercase\"\n      c={fairmintVars.colorTextTertiary}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        letterSpacing: \"0.08em\",\n        lineHeight: 1,\n      }}\n    >\n      {label}\n    </Text>\n  ) : null;\n\n  const gradientNameEl = (\n    <Text\n      fw={700}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        fontSize: \"1.375rem\",\n        lineHeight: 1.3,\n        letterSpacing: \"-0.025em\",\n        background: BRAND_GRADIENT,\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        // Firefox ignores -webkit-text-fill-color; `color: transparent`\n        // is required for `background-clip: text` to show the gradient there.\n        // Chrome/Safari still pick up WebkitTextFillColor (kept for historical safety).\n        color: \"transparent\",\n        WebkitTextFillColor: \"transparent\",\n        wordBreak: \"break-word\",\n      }}\n    >\n      {companyName}\n    </Text>\n  );\n\n  // Skip the wrapper entirely for values React itself would not render,\n  // otherwise the empty <Text> row contributes Stack gap spacing below the name.\n  const hasDetail = detail != null && typeof detail !== \"boolean\";\n  const detailEl = hasDetail ? (\n    <Text size=\"sm\" c={fairmintVars.colorTextSecondary} style={{ lineHeight: 1.4 }}>\n      {detail}\n    </Text>\n  ) : null;\n\n  if (companyLogoUrl) {\n    return (\n      <Box style={{ display: \"flex\", alignItems: \"stretch\", gap: 16 }}>\n        <Box\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            paddingRight: 16,\n            borderRight: `1px solid ${fairmintVars.colorBorderDefault}`,\n          }}\n        >\n          <Avatar\n            src={companyLogoUrl}\n            alt={trimmedName ? `${trimmedName} logo` : \"Company logo\"}\n            radius=\"xl\"\n            size={avatarSize}\n            color={avatarColor}\n          >\n            {initials}\n          </Avatar>\n        </Box>\n        {/* minWidth: 0 lets this flex item shrink below its intrinsic width\n            so long company names wrap instead of pushing the container wider. */}\n        <Stack gap={2} justify=\"center\" style={{ minWidth: 0 }}>\n          {labelEl}\n          {gradientNameEl}\n          {detailEl}\n        </Stack>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack align=\"center\" gap={4}>\n      {labelEl}\n      {gradientNameEl}\n      {detailEl}\n    </Stack>\n  );\n}\n"],"names":["brandColors","getInitials","getAvatarColor","jsx","Text","fairmintVars","jsxs","Box","Avatar","Stack"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB,0BAA0BA,MAAAA,YAAY,IAAI,QAAQA,kBAAY,MAAM,SAASA,kBAAY,MAAM;AAmC/G,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAuB;AACrB,QAAM,cAAc,YAAY,KAAA;AAChC,QAAM,WAAWC,OAAAA,YAAY,WAAW;AACxC,QAAM,cAAcC,OAAAA,eAAe,WAAW;AAE9C,QAAM,UAAU,QACdC,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,GAAGC,MAAAA,aAAa;AAAA,MAChB,OAAO;AAAA,QACL,YAAYA,MAAAA,aAAa;AAAA,QACzB,eAAe;AAAA,QACf,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA;AAAA,IAAA;AAAA,EAAA,IAED;AAEJ,QAAM,iBACJF,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,QACL,YAAYC,MAAAA,aAAa;AAAA,QACzB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,sBAAsB;AAAA;AAAA;AAAA;AAAA,QAItB,OAAO;AAAA,QACP,qBAAqB;AAAA,QACrB,WAAW;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,IAAA;AAAA,EAAA;AAML,QAAM,YAAY,UAAU,QAAQ,OAAO,WAAW;AACtD,QAAM,WAAW,YACfF,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGC,MAAAA,aAAa,oBAAoB,OAAO,EAAE,YAAY,IAAA,GACtE,kBACH,IACE;AAEJ,MAAI,gBAAgB;AAClB,WACEC,gCAACC,OAAAA,KAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,WAAW,KAAK,GAAA,GACzD,UAAA;AAAA,MAAAJ,2BAAAA;AAAAA,QAACI,OAAAA;AAAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,cAAc;AAAA,YACd,aAAa,aAAaF,MAAAA,aAAa,kBAAkB;AAAA,UAAA;AAAA,UAG3D,UAAAF,2BAAAA;AAAAA,YAACK,OAAAA;AAAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,cAAc,GAAG,WAAW,UAAU;AAAA,cAC3C,QAAO;AAAA,cACP,MAAM;AAAA,cACN,OAAO;AAAA,cAEN,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAIFF,2BAAAA,KAACG,OAAAA,OAAA,EAAM,KAAK,GAAG,SAAQ,UAAS,OAAO,EAAE,UAAU,EAAA,GAChD,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACEH,2BAAAA,KAACG,OAAAA,OAAA,EAAM,OAAM,UAAS,KAAK,GACxB,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GACH;AAEJ;;"}

package/dist/components/generic/CompanyBanner/CompanyBanner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { fairmintVars, brandColors, neutralColors } from "../../../theme/index.js";
+import { fairmintVars, brandColors } from "../../../theme/index.js";
 import { getInitials, getAvatarColor } from "../../../utils/avatar.js";
 import { Avatar } from "../../primitives/Avatar/Avatar.js";
 import { Box, Stack } from "../../primitives/layout.js";
@@ -64,7 +64,7 @@ function CompanyBanner({
             alignItems: "center",
             justifyContent: "center",
             paddingRight: 16,
-            borderRight: `1px solid ${neutralColors[200]}`
+            borderRight: `1px solid ${fairmintVars.colorBorderDefault}`
           },
           children: /* @__PURE__ */ jsx(
             Avatar,

package/dist/components/generic/CompanyBanner/CompanyBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompanyBanner.js","sources":["../../../../src/components/generic/CompanyBanner/CompanyBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars, neutralColors } from \"../../../theme\";\nimport { getAvatarColor, getInitials } from \"../../../utils/avatar\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Box, Stack, Text } from \"../../primitives/layout\";\n\n/**\n * Three-stop brand gradient (blue → indigo → purple) composed from theme tokens.\n * Kept local to this file — the two-stop `brandColors.gradient` is visually\n * different and used elsewhere (e.g. FairmintLogo).\n */\nconst BRAND_GRADIENT = `linear-gradient(90deg, ${brandColors.blue} 0%, ${brandColors.indigo} 50%, ${brandColors.purple} 100%)`;\n\nexport interface CompanyBannerProps {\n  /** Company name — displayed as gradient text. */\n  companyName: string;\n  /**\n   * Logo URL. When present, renders a side-by-side layout (avatar | text).\n   * When absent, renders a centered text-only layout.\n   */\n  companyLogoUrl?: string | null;\n  /** Optional eyebrow label rendered above the company name (e.g. \"Invited by\"). */\n  label?: string;\n  /**\n   * Optional secondary content rendered below the company name (e.g. share count).\n   *\n   * Rendered values: non-boolean ReactNodes (including numeric `0` and strings).\n   * Hidden values: `null`, `undefined`, `true`, and `false` — matches React's\n   * rendering rules so `condition && \"text\"` patterns do not leave an empty\n   * row when `condition` is falsy.\n   */\n  detail?: ReactNode;\n  /** Avatar size in px. @default 52 */\n  avatarSize?: number;\n}\n\n/**\n * Renders a branded company banner — used on invitation flows and welcome\n * screens to anchor the user in the context of a specific company.\n *\n * Two visual modes:\n * - **With logo**: side-by-side layout (avatar | label / name / detail) with a\n *   vertical divider.\n * - **Without logo**: centered text-only layout with the gradient company name\n *   as the visual focal point.\n */\nexport function CompanyBanner({\n  companyName,\n  companyLogoUrl,\n  label,\n  detail,\n  avatarSize = 52,\n}: CompanyBannerProps) {\n  const trimmedName = companyName.trim();\n  const initials = getInitials(companyName);\n  const avatarColor = getAvatarColor(companyName);\n\n  const labelEl = label ? (\n    <Text\n      size=\"xs\"\n      fw={600}\n      tt=\"uppercase\"\n      c={fairmintVars.colorTextTertiary}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        letterSpacing: \"0.08em\",\n        lineHeight: 1,\n      }}\n    >\n      {label}\n    </Text>\n  ) : null;\n\n  const gradientNameEl = (\n    <Text\n      fw={700}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        fontSize: \"1.375rem\",\n        lineHeight: 1.3,\n        letterSpacing: \"-0.025em\",\n        background: BRAND_GRADIENT,\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        // Firefox ignores -webkit-text-fill-color; `color: transparent`\n        // is required for `background-clip: text` to show the gradient there.\n        // Chrome/Safari still pick up WebkitTextFillColor (kept for historical safety).\n        color: \"transparent\",\n        WebkitTextFillColor: \"transparent\",\n        wordBreak: \"break-word\",\n      }}\n    >\n      {companyName}\n    </Text>\n  );\n\n  // Skip the wrapper entirely for values React itself would not render,\n  // otherwise the empty <Text> row contributes Stack gap spacing below the name.\n  const hasDetail = detail != null && typeof detail !== \"boolean\";\n  const detailEl = hasDetail ? (\n    <Text size=\"sm\" c={fairmintVars.colorTextSecondary} style={{ lineHeight: 1.4 }}>\n      {detail}\n    </Text>\n  ) : null;\n\n  if (companyLogoUrl) {\n    return (\n      <Box style={{ display: \"flex\", alignItems: \"stretch\", gap: 16 }}>\n        <Box\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            paddingRight: 16,\n            borderRight: `1px solid ${neutralColors[200]}`,\n          }}\n        >\n          <Avatar\n            src={companyLogoUrl}\n            alt={trimmedName ? `${trimmedName} logo` : \"Company logo\"}\n            radius=\"xl\"\n            size={avatarSize}\n            color={avatarColor}\n          >\n            {initials}\n          </Avatar>\n        </Box>\n        {/* minWidth: 0 lets this flex item shrink below its intrinsic width\n            so long company names wrap instead of pushing the container wider. */}\n        <Stack gap={2} justify=\"center\" style={{ minWidth: 0 }}>\n          {labelEl}\n          {gradientNameEl}\n          {detailEl}\n        </Stack>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack align=\"center\" gap={4}>\n      {labelEl}\n      {gradientNameEl}\n      {detailEl}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,iBAAiB,0BAA0B,YAAY,IAAI,QAAQ,YAAY,MAAM,SAAS,YAAY,MAAM;AAmC/G,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAuB;AACrB,QAAM,cAAc,YAAY,KAAA;AAChC,QAAM,WAAW,YAAY,WAAW;AACxC,QAAM,cAAc,eAAe,WAAW;AAE9C,QAAM,UAAU,QACd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,GAAG,aAAa;AAAA,MAChB,OAAO;AAAA,QACL,YAAY,aAAa;AAAA,QACzB,eAAe;AAAA,QACf,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA;AAAA,IAAA;AAAA,EAAA,IAED;AAEJ,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,QACL,YAAY,aAAa;AAAA,QACzB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,sBAAsB;AAAA;AAAA;AAAA;AAAA,QAItB,OAAO;AAAA,QACP,qBAAqB;AAAA,QACrB,WAAW;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,IAAA;AAAA,EAAA;AAML,QAAM,YAAY,UAAU,QAAQ,OAAO,WAAW;AACtD,QAAM,WAAW,YACf,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAAoB,OAAO,EAAE,YAAY,IAAA,GACtE,kBACH,IACE;AAEJ,MAAI,gBAAgB;AAClB,WACE,qBAAC,KAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,WAAW,KAAK,GAAA,GACzD,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,cAAc;AAAA,YACd,aAAa,aAAa,cAAc,GAAG,CAAC;AAAA,UAAA;AAAA,UAG9C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,cAAc,GAAG,WAAW,UAAU;AAAA,cAC3C,QAAO;AAAA,cACP,MAAM;AAAA,cACN,OAAO;AAAA,cAEN,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAIF,qBAAC,OAAA,EAAM,KAAK,GAAG,SAAQ,UAAS,OAAO,EAAE,UAAU,EAAA,GAChD,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAM,OAAM,UAAS,KAAK,GACxB,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"CompanyBanner.js","sources":["../../../../src/components/generic/CompanyBanner/CompanyBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars } from \"../../../theme\";\nimport { getAvatarColor, getInitials } from \"../../../utils/avatar\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Box, Stack, Text } from \"../../primitives/layout\";\n\n/**\n * Three-stop brand gradient (blue → indigo → purple) composed from theme tokens.\n * Kept local to this file — the two-stop `brandColors.gradient` is visually\n * different and used elsewhere (e.g. FairmintLogo).\n */\nconst BRAND_GRADIENT = `linear-gradient(90deg, ${brandColors.blue} 0%, ${brandColors.indigo} 50%, ${brandColors.purple} 100%)`;\n\nexport interface CompanyBannerProps {\n  /** Company name — displayed as gradient text. */\n  companyName: string;\n  /**\n   * Logo URL. When present, renders a side-by-side layout (avatar | text).\n   * When absent, renders a centered text-only layout.\n   */\n  companyLogoUrl?: string | null;\n  /** Optional eyebrow label rendered above the company name (e.g. \"Invited by\"). */\n  label?: string;\n  /**\n   * Optional secondary content rendered below the company name (e.g. share count).\n   *\n   * Rendered values: non-boolean ReactNodes (including numeric `0` and strings).\n   * Hidden values: `null`, `undefined`, `true`, and `false` — matches React's\n   * rendering rules so `condition && \"text\"` patterns do not leave an empty\n   * row when `condition` is falsy.\n   */\n  detail?: ReactNode;\n  /** Avatar size in px. @default 52 */\n  avatarSize?: number;\n}\n\n/**\n * Renders a branded company banner — used on invitation flows and welcome\n * screens to anchor the user in the context of a specific company.\n *\n * Two visual modes:\n * - **With logo**: side-by-side layout (avatar | label / name / detail) with a\n *   vertical divider.\n * - **Without logo**: centered text-only layout with the gradient company name\n *   as the visual focal point.\n */\nexport function CompanyBanner({\n  companyName,\n  companyLogoUrl,\n  label,\n  detail,\n  avatarSize = 52,\n}: CompanyBannerProps) {\n  const trimmedName = companyName.trim();\n  const initials = getInitials(companyName);\n  const avatarColor = getAvatarColor(companyName);\n\n  const labelEl = label ? (\n    <Text\n      size=\"xs\"\n      fw={600}\n      tt=\"uppercase\"\n      c={fairmintVars.colorTextTertiary}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        letterSpacing: \"0.08em\",\n        lineHeight: 1,\n      }}\n    >\n      {label}\n    </Text>\n  ) : null;\n\n  const gradientNameEl = (\n    <Text\n      fw={700}\n      style={{\n        fontFamily: fairmintVars.fontHeadings,\n        fontSize: \"1.375rem\",\n        lineHeight: 1.3,\n        letterSpacing: \"-0.025em\",\n        background: BRAND_GRADIENT,\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        // Firefox ignores -webkit-text-fill-color; `color: transparent`\n        // is required for `background-clip: text` to show the gradient there.\n        // Chrome/Safari still pick up WebkitTextFillColor (kept for historical safety).\n        color: \"transparent\",\n        WebkitTextFillColor: \"transparent\",\n        wordBreak: \"break-word\",\n      }}\n    >\n      {companyName}\n    </Text>\n  );\n\n  // Skip the wrapper entirely for values React itself would not render,\n  // otherwise the empty <Text> row contributes Stack gap spacing below the name.\n  const hasDetail = detail != null && typeof detail !== \"boolean\";\n  const detailEl = hasDetail ? (\n    <Text size=\"sm\" c={fairmintVars.colorTextSecondary} style={{ lineHeight: 1.4 }}>\n      {detail}\n    </Text>\n  ) : null;\n\n  if (companyLogoUrl) {\n    return (\n      <Box style={{ display: \"flex\", alignItems: \"stretch\", gap: 16 }}>\n        <Box\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            paddingRight: 16,\n            borderRight: `1px solid ${fairmintVars.colorBorderDefault}`,\n          }}\n        >\n          <Avatar\n            src={companyLogoUrl}\n            alt={trimmedName ? `${trimmedName} logo` : \"Company logo\"}\n            radius=\"xl\"\n            size={avatarSize}\n            color={avatarColor}\n          >\n            {initials}\n          </Avatar>\n        </Box>\n        {/* minWidth: 0 lets this flex item shrink below its intrinsic width\n            so long company names wrap instead of pushing the container wider. */}\n        <Stack gap={2} justify=\"center\" style={{ minWidth: 0 }}>\n          {labelEl}\n          {gradientNameEl}\n          {detailEl}\n        </Stack>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack align=\"center\" gap={4}>\n      {labelEl}\n      {gradientNameEl}\n      {detailEl}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,iBAAiB,0BAA0B,YAAY,IAAI,QAAQ,YAAY,MAAM,SAAS,YAAY,MAAM;AAmC/G,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAuB;AACrB,QAAM,cAAc,YAAY,KAAA;AAChC,QAAM,WAAW,YAAY,WAAW;AACxC,QAAM,cAAc,eAAe,WAAW;AAE9C,QAAM,UAAU,QACd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,GAAG,aAAa;AAAA,MAChB,OAAO;AAAA,QACL,YAAY,aAAa;AAAA,QACzB,eAAe;AAAA,QACf,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA;AAAA,IAAA;AAAA,EAAA,IAED;AAEJ,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,QACL,YAAY,aAAa;AAAA,QACzB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,sBAAsB;AAAA;AAAA;AAAA;AAAA,QAItB,OAAO;AAAA,QACP,qBAAqB;AAAA,QACrB,WAAW;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,IAAA;AAAA,EAAA;AAML,QAAM,YAAY,UAAU,QAAQ,OAAO,WAAW;AACtD,QAAM,WAAW,YACf,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAAoB,OAAO,EAAE,YAAY,IAAA,GACtE,kBACH,IACE;AAEJ,MAAI,gBAAgB;AAClB,WACE,qBAAC,KAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,WAAW,KAAK,GAAA,GACzD,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,cAAc;AAAA,YACd,aAAa,aAAa,aAAa,kBAAkB;AAAA,UAAA;AAAA,UAG3D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,cAAc,GAAG,WAAW,UAAU;AAAA,cAC3C,QAAO;AAAA,cACP,MAAM;AAAA,cACN,OAAO;AAAA,cAEN,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAIF,qBAAC,OAAA,EAAM,KAAK,GAAG,SAAQ,UAAS,OAAO,EAAE,UAAU,EAAA,GAChD,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAM,OAAM,UAAS,KAAK,GACxB,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/generic/ConfidentialityBanner/ConfidentialityBanner.cjs

@@ -32,11 +32,11 @@ function ConfidentialityBanner({ children, icon }) {
       px: "md",
       style: {
         background: `linear-gradient(90deg, ${index.brandColors.indigo}14 0%, ${index.brandColors.purple}14 100%)`,
-        borderBottom: `1px solid ${index.neutralColors[200]}`
+        borderBottom: `1px solid ${index.fairmintVars.colorBorderDefault}`
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { justify: "center", gap: 6, wrap: "nowrap", children: [
-        iconNode !== null && /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { c: index.neutralColors[600], style: { display: "inline-flex" }, children: iconNode }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: index.neutralColors[700], fw: 500, ta: "center", children })
+        iconNode !== null && /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { c: index.fairmintVars.colorIconSecondary, style: { display: "inline-flex" }, children: iconNode }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: index.fairmintVars.colorTextSecondary, fw: 500, ta: "center", children })
       ] })
     }
   );

package/dist/components/generic/ConfidentialityBanner/ConfidentialityBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConfidentialityBanner.cjs","sources":["../../../../src/components/generic/ConfidentialityBanner/ConfidentialityBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, neutralColors } from \"../../../theme\";\nimport { Box, Group, Text } from \"../../primitives/layout\";\n\n/** Default lock glyph. Inlined so the library doesn't depend on `@tabler/icons-react`. */\nconst DefaultLockIcon = () => (\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    <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\" />\n    <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n  </svg>\n);\n\nexport interface ConfidentialityBannerProps {\n  /**\n   * Banner message. Typically a one-line legal / policy notice that\n   * the viewer must see before interacting with the page.\n   */\n  children: ReactNode;\n  /**\n   * Icon rendered to the left of the message. Defaults to a lock glyph.\n   * Pass `null` to omit the icon entirely.\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Thin gradient ribbon used at the very top of confidential / gated\n * pages (e.g., offering pages, board-pack distributions). Sits above\n * the page's regular sticky header so the disclaimer is the first\n * thing the viewer sees.\n *\n * Visual treatment is the Fairmint indigo→purple gradient at 8%\n * opacity, with a 1px bottom border and a center-aligned message. The\n * lock glyph signals \"private, do not share\" without leaning on\n * heavy \"WARNING\" framing.\n */\nexport function ConfidentialityBanner({ children, icon }: ConfidentialityBannerProps) {\n  const iconNode = icon === undefined ? <DefaultLockIcon /> : icon;\n  return (\n    <Box\n      py={8}\n      px=\"md\"\n      style={{\n        background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,\n        borderBottom: `1px solid ${neutralColors[200]}`,\n      }}\n    >\n      <Group justify=\"center\" gap={6} wrap=\"nowrap\">\n        {iconNode !== null && (\n          <Box c={neutralColors[600]} style={{ display: \"inline-flex\" }}>\n            {iconNode}\n          </Box>\n        )}\n        <Text size=\"xs\" c={neutralColors[700]} fw={500} ta=\"center\">\n          {children}\n        </Text>\n      </Group>\n    </Box>\n  );\n}\n"],"names":["jsxs","jsx","Box","brandColors","neutralColors","Group","Text"],"mappings":";;;;;;;AAKA,MAAM,kBAAkB,MACtBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACxDA,2BAAAA,IAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AACrC;AA2BK,SAAS,sBAAsB,EAAE,UAAU,QAAoC;AACpF,QAAM,WAAW,SAAS,SAAYA,2BAAAA,IAAC,mBAAgB,IAAK;AAC5D,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,OAAO;AAAA,QACL,YAAY,0BAA0BC,kBAAY,MAAM,UAAUA,MAAAA,YAAY,MAAM;AAAA,QACpF,cAAc,aAAaC,MAAAA,cAAc,GAAG,CAAC;AAAA,MAAA;AAAA,MAG/C,0CAACC,aAAA,EAAM,SAAQ,UAAS,KAAK,GAAG,MAAK,UAClC,UAAA;AAAA,QAAA,aAAa,QACZJ,2BAAAA,IAACC,OAAAA,KAAA,EAAI,GAAGE,MAAAA,cAAc,GAAG,GAAG,OAAO,EAAE,SAAS,cAAA,GAC3C,UAAA,SAAA,CACH;AAAA,QAEFH,2BAAAA,IAACK,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGF,MAAAA,cAAc,GAAG,GAAG,IAAI,KAAK,IAAG,UAChD,SAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"ConfidentialityBanner.cjs","sources":["../../../../src/components/generic/ConfidentialityBanner/ConfidentialityBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars } from \"../../../theme\";\nimport { Box, Group, Text } from \"../../primitives/layout\";\n\n/** Default lock glyph. Inlined so the library doesn't depend on `@tabler/icons-react`. */\nconst DefaultLockIcon = () => (\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    <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\" />\n    <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n  </svg>\n);\n\nexport interface ConfidentialityBannerProps {\n  /**\n   * Banner message. Typically a one-line legal / policy notice that\n   * the viewer must see before interacting with the page.\n   */\n  children: ReactNode;\n  /**\n   * Icon rendered to the left of the message. Defaults to a lock glyph.\n   * Pass `null` to omit the icon entirely.\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Thin gradient ribbon used at the very top of confidential / gated\n * pages (e.g., offering pages, board-pack distributions). Sits above\n * the page's regular sticky header so the disclaimer is the first\n * thing the viewer sees.\n *\n * Visual treatment is the Fairmint indigo→purple gradient at 8%\n * opacity, with a 1px bottom border and a center-aligned message. The\n * lock glyph signals \"private, do not share\" without leaning on\n * heavy \"WARNING\" framing.\n */\nexport function ConfidentialityBanner({ children, icon }: ConfidentialityBannerProps) {\n  const iconNode = icon === undefined ? <DefaultLockIcon /> : icon;\n  return (\n    <Box\n      py={8}\n      px=\"md\"\n      style={{\n        background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,\n        borderBottom: `1px solid ${fairmintVars.colorBorderDefault}`,\n      }}\n    >\n      <Group justify=\"center\" gap={6} wrap=\"nowrap\">\n        {iconNode !== null && (\n          <Box c={fairmintVars.colorIconSecondary} style={{ display: \"inline-flex\" }}>\n            {iconNode}\n          </Box>\n        )}\n        <Text size=\"xs\" c={fairmintVars.colorTextSecondary} fw={500} ta=\"center\">\n          {children}\n        </Text>\n      </Group>\n    </Box>\n  );\n}\n"],"names":["jsxs","jsx","Box","brandColors","fairmintVars","Group","Text"],"mappings":";;;;;;;AAKA,MAAM,kBAAkB,MACtBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACxDA,2BAAAA,IAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AACrC;AA2BK,SAAS,sBAAsB,EAAE,UAAU,QAAoC;AACpF,QAAM,WAAW,SAAS,SAAYA,2BAAAA,IAAC,mBAAgB,IAAK;AAC5D,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,OAAO;AAAA,QACL,YAAY,0BAA0BC,kBAAY,MAAM,UAAUA,MAAAA,YAAY,MAAM;AAAA,QACpF,cAAc,aAAaC,MAAAA,aAAa,kBAAkB;AAAA,MAAA;AAAA,MAG5D,0CAACC,aAAA,EAAM,SAAQ,UAAS,KAAK,GAAG,MAAK,UAClC,UAAA;AAAA,QAAA,aAAa,QACZJ,2BAAAA,IAACC,OAAAA,KAAA,EAAI,GAAGE,MAAAA,aAAa,oBAAoB,OAAO,EAAE,SAAS,cAAA,GACxD,UAAA,SAAA,CACH;AAAA,QAEFH,2BAAAA,IAACK,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGF,MAAAA,aAAa,oBAAoB,IAAI,KAAK,IAAG,UAC7D,SAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/generic/ConfidentialityBanner/ConfidentialityBanner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { neutralColors, brandColors } from "../../../theme/index.js";
+import { fairmintVars, brandColors } from "../../../theme/index.js";
 import { Box } from "../../primitives/layout.js";
 import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
 import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
@@ -30,11 +30,11 @@ function ConfidentialityBanner({ children, icon }) {
       px: "md",
       style: {
         background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,
-        borderBottom: `1px solid ${neutralColors[200]}`
+        borderBottom: `1px solid ${fairmintVars.colorBorderDefault}`
       },
       children: /* @__PURE__ */ jsxs(Group, { justify: "center", gap: 6, wrap: "nowrap", children: [
-        iconNode !== null && /* @__PURE__ */ jsx(Box, { c: neutralColors[600], style: { display: "inline-flex" }, children: iconNode }),
-        /* @__PURE__ */ jsx(Text, { size: "xs", c: neutralColors[700], fw: 500, ta: "center", children })
+        iconNode !== null && /* @__PURE__ */ jsx(Box, { c: fairmintVars.colorIconSecondary, style: { display: "inline-flex" }, children: iconNode }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, fw: 500, ta: "center", children })
       ] })
     }
   );

package/dist/components/generic/ConfidentialityBanner/ConfidentialityBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfidentialityBanner.js","sources":["../../../../src/components/generic/ConfidentialityBanner/ConfidentialityBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, neutralColors } from \"../../../theme\";\nimport { Box, Group, Text } from \"../../primitives/layout\";\n\n/** Default lock glyph. Inlined so the library doesn't depend on `@tabler/icons-react`. */\nconst DefaultLockIcon = () => (\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    <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\" />\n    <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n  </svg>\n);\n\nexport interface ConfidentialityBannerProps {\n  /**\n   * Banner message. Typically a one-line legal / policy notice that\n   * the viewer must see before interacting with the page.\n   */\n  children: ReactNode;\n  /**\n   * Icon rendered to the left of the message. Defaults to a lock glyph.\n   * Pass `null` to omit the icon entirely.\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Thin gradient ribbon used at the very top of confidential / gated\n * pages (e.g., offering pages, board-pack distributions). Sits above\n * the page's regular sticky header so the disclaimer is the first\n * thing the viewer sees.\n *\n * Visual treatment is the Fairmint indigo→purple gradient at 8%\n * opacity, with a 1px bottom border and a center-aligned message. The\n * lock glyph signals \"private, do not share\" without leaning on\n * heavy \"WARNING\" framing.\n */\nexport function ConfidentialityBanner({ children, icon }: ConfidentialityBannerProps) {\n  const iconNode = icon === undefined ? <DefaultLockIcon /> : icon;\n  return (\n    <Box\n      py={8}\n      px=\"md\"\n      style={{\n        background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,\n        borderBottom: `1px solid ${neutralColors[200]}`,\n      }}\n    >\n      <Group justify=\"center\" gap={6} wrap=\"nowrap\">\n        {iconNode !== null && (\n          <Box c={neutralColors[600]} style={{ display: \"inline-flex\" }}>\n            {iconNode}\n          </Box>\n        )}\n        <Text size=\"xs\" c={neutralColors[700]} fw={500} ta=\"center\">\n          {children}\n        </Text>\n      </Group>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,kBAAkB,MACtB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACxD,oBAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AACrC;AA2BK,SAAS,sBAAsB,EAAE,UAAU,QAAoC;AACpF,QAAM,WAAW,SAAS,SAAY,oBAAC,mBAAgB,IAAK;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,OAAO;AAAA,QACL,YAAY,0BAA0B,YAAY,MAAM,UAAU,YAAY,MAAM;AAAA,QACpF,cAAc,aAAa,cAAc,GAAG,CAAC;AAAA,MAAA;AAAA,MAG/C,+BAAC,OAAA,EAAM,SAAQ,UAAS,KAAK,GAAG,MAAK,UAClC,UAAA;AAAA,QAAA,aAAa,QACZ,oBAAC,KAAA,EAAI,GAAG,cAAc,GAAG,GAAG,OAAO,EAAE,SAAS,cAAA,GAC3C,UAAA,SAAA,CACH;AAAA,QAEF,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,cAAc,GAAG,GAAG,IAAI,KAAK,IAAG,UAChD,SAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ConfidentialityBanner.js","sources":["../../../../src/components/generic/ConfidentialityBanner/ConfidentialityBanner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars } from \"../../../theme\";\nimport { Box, Group, Text } from \"../../primitives/layout\";\n\n/** Default lock glyph. Inlined so the library doesn't depend on `@tabler/icons-react`. */\nconst DefaultLockIcon = () => (\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    <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\" />\n    <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n  </svg>\n);\n\nexport interface ConfidentialityBannerProps {\n  /**\n   * Banner message. Typically a one-line legal / policy notice that\n   * the viewer must see before interacting with the page.\n   */\n  children: ReactNode;\n  /**\n   * Icon rendered to the left of the message. Defaults to a lock glyph.\n   * Pass `null` to omit the icon entirely.\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Thin gradient ribbon used at the very top of confidential / gated\n * pages (e.g., offering pages, board-pack distributions). Sits above\n * the page's regular sticky header so the disclaimer is the first\n * thing the viewer sees.\n *\n * Visual treatment is the Fairmint indigo→purple gradient at 8%\n * opacity, with a 1px bottom border and a center-aligned message. The\n * lock glyph signals \"private, do not share\" without leaning on\n * heavy \"WARNING\" framing.\n */\nexport function ConfidentialityBanner({ children, icon }: ConfidentialityBannerProps) {\n  const iconNode = icon === undefined ? <DefaultLockIcon /> : icon;\n  return (\n    <Box\n      py={8}\n      px=\"md\"\n      style={{\n        background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,\n        borderBottom: `1px solid ${fairmintVars.colorBorderDefault}`,\n      }}\n    >\n      <Group justify=\"center\" gap={6} wrap=\"nowrap\">\n        {iconNode !== null && (\n          <Box c={fairmintVars.colorIconSecondary} style={{ display: \"inline-flex\" }}>\n            {iconNode}\n          </Box>\n        )}\n        <Text size=\"xs\" c={fairmintVars.colorTextSecondary} fw={500} ta=\"center\">\n          {children}\n        </Text>\n      </Group>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,kBAAkB,MACtB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACxD,oBAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AACrC;AA2BK,SAAS,sBAAsB,EAAE,UAAU,QAAoC;AACpF,QAAM,WAAW,SAAS,SAAY,oBAAC,mBAAgB,IAAK;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,OAAO;AAAA,QACL,YAAY,0BAA0B,YAAY,MAAM,UAAU,YAAY,MAAM;AAAA,QACpF,cAAc,aAAa,aAAa,kBAAkB;AAAA,MAAA;AAAA,MAG5D,+BAAC,OAAA,EAAM,SAAQ,UAAS,KAAK,GAAG,MAAK,UAClC,UAAA;AAAA,QAAA,aAAa,QACZ,oBAAC,KAAA,EAAI,GAAG,aAAa,oBAAoB,OAAO,EAAE,SAAS,cAAA,GACxD,UAAA,SAAA,CACH;AAAA,QAEF,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAAoB,IAAI,KAAK,IAAG,UAC7D,SAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/generic/DataRow/DataRow.cjs

@@ -2,19 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const index = require("../../../theme/index.cjs");
-const colors = require("../../../theme/colors.cjs");
 const layout = require("../../primitives/layout.cjs");
 const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
 const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
 function DataRow({ label, value, accent = false }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", c: index.neutralColors[600], style: { flexShrink: 0 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", c: index.fairmintVars.colorTextSecondary, style: { flexShrink: 0 }, children: label }),
     value === null ? /* @__PURE__ */ jsxRuntime.jsx(RedactedValue, {}) : typeof value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
       Text.Text,
       {
         size: "sm",
         fw: accent ? 700 : 500,
-        c: accent ? `${colors.colors.success}.8` : index.neutralColors[900],
+        c: accent ? index.fairmintVars.colorSuccessText : index.fairmintVars.colorTextPrimary,
         ta: "right",
         style: { minWidth: 0 },
         children: value
@@ -23,7 +22,7 @@ function DataRow({ label, value, accent = false }) {
   ] });
 }
 function StackedValue({ values }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(layout.Stack, { gap: 2, align: "flex-end", children: values.map((v) => /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", fw: 500, c: index.neutralColors[800], ta: "right", children: v }, v)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(layout.Stack, { gap: 2, align: "flex-end", children: values.map((v) => /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", fw: 500, c: index.fairmintVars.colorTextPrimary, ta: "right", children: v }, v)) });
 }
 function RedactedValue({ width = 80 } = {}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -35,7 +34,7 @@ function RedactedValue({ width = 80 } = {}) {
         height: 14,
         width,
         borderRadius: 4,
-        background: `repeating-linear-gradient(135deg, ${index.neutralColors[200]} 0 4px, ${index.neutralColors[100]} 4px 8px)`
+        background: `repeating-linear-gradient(135deg, ${index.fairmintVars.colorBorderDefault} 0 4px, ${index.fairmintVars.colorBgHover} 4px 8px)`
       }
     }
   );

package/dist/components/generic/DataRow/DataRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataRow.cjs","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { neutralColors } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface DataRowProps {\n  /** Left-aligned label. */\n  label: string;\n  /**\n   * Right-aligned value.\n   *\n   *   - `string`     — rendered as styled `Text` (accent-aware).\n   *   - `ReactNode`  — rendered as-is. Pass `<StackedValue values={...}/>`\n   *     for a vertical list, or any other JSX (badges, icons, links).\n   *   - `null`       — renders a `<RedactedValue>` placeholder. No real\n   *     value lives in the DOM, so a pre-auth dev-tools inspection\n   *     reveals nothing.\n   */\n  value: ReactNode | null;\n  /**\n   * When true, a string `value` renders in success-green bold weight.\n   * Use for highlighted rows like fees, carry, or \"yes\" answers.\n   */\n  accent?: boolean;\n}\n\n/**\n * One label / value row used by terms panels, profile sections, and\n * any \"definition list\" UX.\n *\n * The `null` → redacted placeholder convention is a security primitive:\n * when content is behind a gate, pass `null` and the placeholder shows\n * a dotted strip without leaking the real value into the DOM.\n */\nexport function DataRow({ label, value, accent = false }: DataRowProps) {\n  return (\n    <Group justify=\"space-between\" align=\"flex-start\" gap=\"md\" wrap=\"nowrap\">\n      <Text size=\"sm\" c={neutralColors[600]} style={{ flexShrink: 0 }}>\n        {label}\n      </Text>\n      {value === null ? (\n        <RedactedValue />\n      ) : typeof value === \"string\" ? (\n        <Text\n          size=\"sm\"\n          fw={accent ? 700 : 500}\n          c={accent ? `${colors.success}.8` : neutralColors[900]}\n          ta=\"right\"\n          style={{ minWidth: 0 }}\n        >\n          {value}\n        </Text>\n      ) : (\n        value\n      )}\n    </Group>\n  );\n}\n\nexport interface StackedValueProps {\n  /** List of strings to render as a vertical, right-aligned stack. */\n  values: ReadonlyArray<string>;\n}\n\n/**\n * Right-aligned vertical stack of values. Compose with `DataRow`\n * when a single label has multiple values (e.g., \"Funding: USDC / USDT\n * / Wire\" rendered as three lines stacked under the \"Funding\" label).\n */\nexport function StackedValue({ values }: StackedValueProps) {\n  return (\n    <Stack gap={2} align=\"flex-end\">\n      {values.map((v) => (\n        <Text key={v} size=\"sm\" fw={500} c={neutralColors[800]} ta=\"right\">\n          {v}\n        </Text>\n      ))}\n    </Stack>\n  );\n}\n\nexport interface RedactedValueProps {\n  /** Width of the placeholder strip in pixels. @default 80 */\n  width?: number;\n}\n\n/**\n * Source-safe placeholder — a fixed-width dotted strip rendered when\n * a value is gated. No real value lives in the DOM, so a pre-auth\n * dev-tools inspection reveals nothing.\n */\nexport function RedactedValue({ width = 80 }: RedactedValueProps = {}) {\n  return (\n    <Box\n      role=\"img\"\n      aria-label=\"Redacted — sign in to view\"\n      style={{\n        height: 14,\n        width,\n        borderRadius: 4,\n        background: `repeating-linear-gradient(135deg, ${neutralColors[200]} 0 4px, ${neutralColors[100]} 4px 8px)`,\n      }}\n    />\n  );\n}\n"],"names":["jsxs","Group","jsx","Text","neutralColors","colors","Stack","Box"],"mappings":";;;;;;;;AAkCO,SAAS,QAAQ,EAAE,OAAO,OAAO,SAAS,SAAuB;AACtE,SACEA,gCAACC,MAAAA,SAAM,SAAQ,iBAAgB,OAAM,cAAa,KAAI,MAAK,MAAK,UAC9D,UAAA;AAAA,IAAAC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGC,MAAAA,cAAc,GAAG,GAAG,OAAO,EAAE,YAAY,EAAA,GACzD,UAAA,MAAA,CACH;AAAA,IACC,UAAU,OACTF,2BAAAA,IAAC,iBAAc,IACb,OAAO,UAAU,WACnBA,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,MAAM;AAAA,QACnB,GAAG,SAAS,GAAGE,OAAAA,OAAO,OAAO,OAAOD,MAAAA,cAAc,GAAG;AAAA,QACrD,IAAG;AAAA,QACH,OAAO,EAAE,UAAU,EAAA;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,EAAA,GAEJ;AAEJ;AAYO,SAAS,aAAa,EAAE,UAA6B;AAC1D,SACEF,2BAAAA,IAACI,OAAAA,OAAA,EAAM,KAAK,GAAG,OAAM,YAClB,UAAA,OAAO,IAAI,CAAC,MACXJ,2BAAAA,IAACC,KAAAA,MAAA,EAAa,MAAK,MAAK,IAAI,KAAK,GAAGC,MAAAA,cAAc,GAAG,GAAG,IAAG,SACxD,UAAA,EAAA,GADQ,CAEX,CACD,EAAA,CACH;AAEJ;AAYO,SAAS,cAAc,EAAE,QAAQ,GAAA,IAA2B,CAAA,GAAI;AACrE,SACEF,2BAAAA;AAAAA,IAACK,OAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA,cAAc;AAAA,QACd,YAAY,qCAAqCH,oBAAc,GAAG,CAAC,WAAWA,MAAAA,cAAc,GAAG,CAAC;AAAA,MAAA;AAAA,IAClG;AAAA,EAAA;AAGN;;;;"}
+{"version":3,"file":"DataRow.cjs","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface DataRowProps {\n  /** Left-aligned label. */\n  label: string;\n  /**\n   * Right-aligned value.\n   *\n   *   - `string`     — rendered as styled `Text` (accent-aware).\n   *   - `ReactNode`  — rendered as-is. Pass `<StackedValue values={...}/>`\n   *     for a vertical list, or any other JSX (badges, icons, links).\n   *   - `null`       — renders a `<RedactedValue>` placeholder. No real\n   *     value lives in the DOM, so a pre-auth dev-tools inspection\n   *     reveals nothing.\n   */\n  value: ReactNode | null;\n  /**\n   * When true, a string `value` renders in success-green bold weight.\n   * Use for highlighted rows like fees, carry, or \"yes\" answers.\n   */\n  accent?: boolean;\n}\n\n/**\n * One label / value row used by terms panels, profile sections, and\n * any \"definition list\" UX.\n *\n * The `null` → redacted placeholder convention is a security primitive:\n * when content is behind a gate, pass `null` and the placeholder shows\n * a dotted strip without leaking the real value into the DOM.\n */\nexport function DataRow({ label, value, accent = false }: DataRowProps) {\n  return (\n    <Group justify=\"space-between\" align=\"flex-start\" gap=\"md\" wrap=\"nowrap\">\n      <Text size=\"sm\" c={fairmintVars.colorTextSecondary} style={{ flexShrink: 0 }}>\n        {label}\n      </Text>\n      {value === null ? (\n        <RedactedValue />\n      ) : typeof value === \"string\" ? (\n        <Text\n          size=\"sm\"\n          fw={accent ? 700 : 500}\n          c={accent ? fairmintVars.colorSuccessText : fairmintVars.colorTextPrimary}\n          ta=\"right\"\n          style={{ minWidth: 0 }}\n        >\n          {value}\n        </Text>\n      ) : (\n        value\n      )}\n    </Group>\n  );\n}\n\nexport interface StackedValueProps {\n  /** List of strings to render as a vertical, right-aligned stack. */\n  values: ReadonlyArray<string>;\n}\n\n/**\n * Right-aligned vertical stack of values. Compose with `DataRow`\n * when a single label has multiple values (e.g., \"Funding: USDC / USDT\n * / Wire\" rendered as three lines stacked under the \"Funding\" label).\n */\nexport function StackedValue({ values }: StackedValueProps) {\n  return (\n    <Stack gap={2} align=\"flex-end\">\n      {values.map((v) => (\n        <Text key={v} size=\"sm\" fw={500} c={fairmintVars.colorTextPrimary} ta=\"right\">\n          {v}\n        </Text>\n      ))}\n    </Stack>\n  );\n}\n\nexport interface RedactedValueProps {\n  /** Width of the placeholder strip in pixels. @default 80 */\n  width?: number;\n}\n\n/**\n * Source-safe placeholder — a fixed-width dotted strip rendered when\n * a value is gated. No real value lives in the DOM, so a pre-auth\n * dev-tools inspection reveals nothing.\n */\nexport function RedactedValue({ width = 80 }: RedactedValueProps = {}) {\n  return (\n    <Box\n      role=\"img\"\n      aria-label=\"Redacted — sign in to view\"\n      style={{\n        height: 14,\n        width,\n        borderRadius: 4,\n        background: `repeating-linear-gradient(135deg, ${fairmintVars.colorBorderDefault} 0 4px, ${fairmintVars.colorBgHover} 4px 8px)`,\n      }}\n    />\n  );\n}\n"],"names":["jsxs","Group","jsx","Text","fairmintVars","Stack","Box"],"mappings":";;;;;;;AAiCO,SAAS,QAAQ,EAAE,OAAO,OAAO,SAAS,SAAuB;AACtE,SACEA,gCAACC,MAAAA,SAAM,SAAQ,iBAAgB,OAAM,cAAa,KAAI,MAAK,MAAK,UAC9D,UAAA;AAAA,IAAAC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGC,MAAAA,aAAa,oBAAoB,OAAO,EAAE,YAAY,EAAA,GACtE,UAAA,MAAA,CACH;AAAA,IACC,UAAU,OACTF,2BAAAA,IAAC,iBAAc,IACb,OAAO,UAAU,WACnBA,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,MAAM;AAAA,QACnB,GAAG,SAASC,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,QACzD,IAAG;AAAA,QACH,OAAO,EAAE,UAAU,EAAA;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,EAAA,GAEJ;AAEJ;AAYO,SAAS,aAAa,EAAE,UAA6B;AAC1D,SACEF,2BAAAA,IAACG,OAAAA,OAAA,EAAM,KAAK,GAAG,OAAM,YAClB,UAAA,OAAO,IAAI,CAAC,MACXH,2BAAAA,IAACC,KAAAA,MAAA,EAAa,MAAK,MAAK,IAAI,KAAK,GAAGC,MAAAA,aAAa,kBAAkB,IAAG,SACnE,UAAA,EAAA,GADQ,CAEX,CACD,EAAA,CACH;AAEJ;AAYO,SAAS,cAAc,EAAE,QAAQ,GAAA,IAA2B,CAAA,GAAI;AACrE,SACEF,2BAAAA;AAAAA,IAACI,OAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA,cAAc;AAAA,QACd,YAAY,qCAAqCF,MAAAA,aAAa,kBAAkB,WAAWA,MAAAA,aAAa,YAAY;AAAA,MAAA;AAAA,IACtH;AAAA,EAAA;AAGN;;;;"}

package/dist/components/generic/DataRow/DataRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataRow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,YAAY,2CAuBrE;AAED,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAUzD;AAED,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAU,EAAE,GAAE,kBAAuB,2CAapE"}
+{"version":3,"file":"DataRow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,YAAY,2CAuBrE;AAED,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAUzD;AAED,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAU,EAAE,GAAE,kBAAuB,2CAapE"}

package/dist/components/generic/DataRow/DataRow.js

@@ -1,18 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { neutralColors } from "../../../theme/index.js";
-import { colors } from "../../../theme/colors.js";
+import { fairmintVars } from "../../../theme/index.js";
 import { Box, Stack } from "../../primitives/layout.js";
 import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
 import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
 function DataRow({ label, value, accent = false }) {
   return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", c: neutralColors[600], style: { flexShrink: 0 }, children: label }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: fairmintVars.colorTextSecondary, style: { flexShrink: 0 }, children: label }),
     value === null ? /* @__PURE__ */ jsx(RedactedValue, {}) : typeof value === "string" ? /* @__PURE__ */ jsx(
       Text,
       {
         size: "sm",
         fw: accent ? 700 : 500,
-        c: accent ? `${colors.success}.8` : neutralColors[900],
+        c: accent ? fairmintVars.colorSuccessText : fairmintVars.colorTextPrimary,
         ta: "right",
         style: { minWidth: 0 },
         children: value
@@ -21,7 +20,7 @@ function DataRow({ label, value, accent = false }) {
   ] });
 }
 function StackedValue({ values }) {
-  return /* @__PURE__ */ jsx(Stack, { gap: 2, align: "flex-end", children: values.map((v) => /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: neutralColors[800], ta: "right", children: v }, v)) });
+  return /* @__PURE__ */ jsx(Stack, { gap: 2, align: "flex-end", children: values.map((v) => /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: fairmintVars.colorTextPrimary, ta: "right", children: v }, v)) });
 }
 function RedactedValue({ width = 80 } = {}) {
   return /* @__PURE__ */ jsx(
@@ -33,7 +32,7 @@ function RedactedValue({ width = 80 } = {}) {
         height: 14,
         width,
         borderRadius: 4,
-        background: `repeating-linear-gradient(135deg, ${neutralColors[200]} 0 4px, ${neutralColors[100]} 4px 8px)`
+        background: `repeating-linear-gradient(135deg, ${fairmintVars.colorBorderDefault} 0 4px, ${fairmintVars.colorBgHover} 4px 8px)`
       }
     }
   );

package/dist/components/generic/DataRow/DataRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataRow.js","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { neutralColors } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface DataRowProps {\n  /** Left-aligned label. */\n  label: string;\n  /**\n   * Right-aligned value.\n   *\n   *   - `string`     — rendered as styled `Text` (accent-aware).\n   *   - `ReactNode`  — rendered as-is. Pass `<StackedValue values={...}/>`\n   *     for a vertical list, or any other JSX (badges, icons, links).\n   *   - `null`       — renders a `<RedactedValue>` placeholder. No real\n   *     value lives in the DOM, so a pre-auth dev-tools inspection\n   *     reveals nothing.\n   */\n  value: ReactNode | null;\n  /**\n   * When true, a string `value` renders in success-green bold weight.\n   * Use for highlighted rows like fees, carry, or \"yes\" answers.\n   */\n  accent?: boolean;\n}\n\n/**\n * One label / value row used by terms panels, profile sections, and\n * any \"definition list\" UX.\n *\n * The `null` → redacted placeholder convention is a security primitive:\n * when content is behind a gate, pass `null` and the placeholder shows\n * a dotted strip without leaking the real value into the DOM.\n */\nexport function DataRow({ label, value, accent = false }: DataRowProps) {\n  return (\n    <Group justify=\"space-between\" align=\"flex-start\" gap=\"md\" wrap=\"nowrap\">\n      <Text size=\"sm\" c={neutralColors[600]} style={{ flexShrink: 0 }}>\n        {label}\n      </Text>\n      {value === null ? (\n        <RedactedValue />\n      ) : typeof value === \"string\" ? (\n        <Text\n          size=\"sm\"\n          fw={accent ? 700 : 500}\n          c={accent ? `${colors.success}.8` : neutralColors[900]}\n          ta=\"right\"\n          style={{ minWidth: 0 }}\n        >\n          {value}\n        </Text>\n      ) : (\n        value\n      )}\n    </Group>\n  );\n}\n\nexport interface StackedValueProps {\n  /** List of strings to render as a vertical, right-aligned stack. */\n  values: ReadonlyArray<string>;\n}\n\n/**\n * Right-aligned vertical stack of values. Compose with `DataRow`\n * when a single label has multiple values (e.g., \"Funding: USDC / USDT\n * / Wire\" rendered as three lines stacked under the \"Funding\" label).\n */\nexport function StackedValue({ values }: StackedValueProps) {\n  return (\n    <Stack gap={2} align=\"flex-end\">\n      {values.map((v) => (\n        <Text key={v} size=\"sm\" fw={500} c={neutralColors[800]} ta=\"right\">\n          {v}\n        </Text>\n      ))}\n    </Stack>\n  );\n}\n\nexport interface RedactedValueProps {\n  /** Width of the placeholder strip in pixels. @default 80 */\n  width?: number;\n}\n\n/**\n * Source-safe placeholder — a fixed-width dotted strip rendered when\n * a value is gated. No real value lives in the DOM, so a pre-auth\n * dev-tools inspection reveals nothing.\n */\nexport function RedactedValue({ width = 80 }: RedactedValueProps = {}) {\n  return (\n    <Box\n      role=\"img\"\n      aria-label=\"Redacted — sign in to view\"\n      style={{\n        height: 14,\n        width,\n        borderRadius: 4,\n        background: `repeating-linear-gradient(135deg, ${neutralColors[200]} 0 4px, ${neutralColors[100]} 4px 8px)`,\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;AAkCO,SAAS,QAAQ,EAAE,OAAO,OAAO,SAAS,SAAuB;AACtE,SACE,qBAAC,SAAM,SAAQ,iBAAgB,OAAM,cAAa,KAAI,MAAK,MAAK,UAC9D,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,cAAc,GAAG,GAAG,OAAO,EAAE,YAAY,EAAA,GACzD,UAAA,MAAA,CACH;AAAA,IACC,UAAU,OACT,oBAAC,iBAAc,IACb,OAAO,UAAU,WACnB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,MAAM;AAAA,QACnB,GAAG,SAAS,GAAG,OAAO,OAAO,OAAO,cAAc,GAAG;AAAA,QACrD,IAAG;AAAA,QACH,OAAO,EAAE,UAAU,EAAA;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,EAAA,GAEJ;AAEJ;AAYO,SAAS,aAAa,EAAE,UAA6B;AAC1D,SACE,oBAAC,OAAA,EAAM,KAAK,GAAG,OAAM,YAClB,UAAA,OAAO,IAAI,CAAC,MACX,oBAAC,MAAA,EAAa,MAAK,MAAK,IAAI,KAAK,GAAG,cAAc,GAAG,GAAG,IAAG,SACxD,UAAA,EAAA,GADQ,CAEX,CACD,EAAA,CACH;AAEJ;AAYO,SAAS,cAAc,EAAE,QAAQ,GAAA,IAA2B,CAAA,GAAI;AACrE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA,cAAc;AAAA,QACd,YAAY,qCAAqC,cAAc,GAAG,CAAC,WAAW,cAAc,GAAG,CAAC;AAAA,MAAA;AAAA,IAClG;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"DataRow.js","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface DataRowProps {\n  /** Left-aligned label. */\n  label: string;\n  /**\n   * Right-aligned value.\n   *\n   *   - `string`     — rendered as styled `Text` (accent-aware).\n   *   - `ReactNode`  — rendered as-is. Pass `<StackedValue values={...}/>`\n   *     for a vertical list, or any other JSX (badges, icons, links).\n   *   - `null`       — renders a `<RedactedValue>` placeholder. No real\n   *     value lives in the DOM, so a pre-auth dev-tools inspection\n   *     reveals nothing.\n   */\n  value: ReactNode | null;\n  /**\n   * When true, a string `value` renders in success-green bold weight.\n   * Use for highlighted rows like fees, carry, or \"yes\" answers.\n   */\n  accent?: boolean;\n}\n\n/**\n * One label / value row used by terms panels, profile sections, and\n * any \"definition list\" UX.\n *\n * The `null` → redacted placeholder convention is a security primitive:\n * when content is behind a gate, pass `null` and the placeholder shows\n * a dotted strip without leaking the real value into the DOM.\n */\nexport function DataRow({ label, value, accent = false }: DataRowProps) {\n  return (\n    <Group justify=\"space-between\" align=\"flex-start\" gap=\"md\" wrap=\"nowrap\">\n      <Text size=\"sm\" c={fairmintVars.colorTextSecondary} style={{ flexShrink: 0 }}>\n        {label}\n      </Text>\n      {value === null ? (\n        <RedactedValue />\n      ) : typeof value === \"string\" ? (\n        <Text\n          size=\"sm\"\n          fw={accent ? 700 : 500}\n          c={accent ? fairmintVars.colorSuccessText : fairmintVars.colorTextPrimary}\n          ta=\"right\"\n          style={{ minWidth: 0 }}\n        >\n          {value}\n        </Text>\n      ) : (\n        value\n      )}\n    </Group>\n  );\n}\n\nexport interface StackedValueProps {\n  /** List of strings to render as a vertical, right-aligned stack. */\n  values: ReadonlyArray<string>;\n}\n\n/**\n * Right-aligned vertical stack of values. Compose with `DataRow`\n * when a single label has multiple values (e.g., \"Funding: USDC / USDT\n * / Wire\" rendered as three lines stacked under the \"Funding\" label).\n */\nexport function StackedValue({ values }: StackedValueProps) {\n  return (\n    <Stack gap={2} align=\"flex-end\">\n      {values.map((v) => (\n        <Text key={v} size=\"sm\" fw={500} c={fairmintVars.colorTextPrimary} ta=\"right\">\n          {v}\n        </Text>\n      ))}\n    </Stack>\n  );\n}\n\nexport interface RedactedValueProps {\n  /** Width of the placeholder strip in pixels. @default 80 */\n  width?: number;\n}\n\n/**\n * Source-safe placeholder — a fixed-width dotted strip rendered when\n * a value is gated. No real value lives in the DOM, so a pre-auth\n * dev-tools inspection reveals nothing.\n */\nexport function RedactedValue({ width = 80 }: RedactedValueProps = {}) {\n  return (\n    <Box\n      role=\"img\"\n      aria-label=\"Redacted — sign in to view\"\n      style={{\n        height: 14,\n        width,\n        borderRadius: 4,\n        background: `repeating-linear-gradient(135deg, ${fairmintVars.colorBorderDefault} 0 4px, ${fairmintVars.colorBgHover} 4px 8px)`,\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAiCO,SAAS,QAAQ,EAAE,OAAO,OAAO,SAAS,SAAuB;AACtE,SACE,qBAAC,SAAM,SAAQ,iBAAgB,OAAM,cAAa,KAAI,MAAK,MAAK,UAC9D,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAAoB,OAAO,EAAE,YAAY,EAAA,GACtE,UAAA,MAAA,CACH;AAAA,IACC,UAAU,OACT,oBAAC,iBAAc,IACb,OAAO,UAAU,WACnB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,MAAM;AAAA,QACnB,GAAG,SAAS,aAAa,mBAAmB,aAAa;AAAA,QACzD,IAAG;AAAA,QACH,OAAO,EAAE,UAAU,EAAA;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,EAAA,GAEJ;AAEJ;AAYO,SAAS,aAAa,EAAE,UAA6B;AAC1D,SACE,oBAAC,OAAA,EAAM,KAAK,GAAG,OAAM,YAClB,UAAA,OAAO,IAAI,CAAC,MACX,oBAAC,MAAA,EAAa,MAAK,MAAK,IAAI,KAAK,GAAG,aAAa,kBAAkB,IAAG,SACnE,UAAA,EAAA,GADQ,CAEX,CACD,EAAA,CACH;AAEJ;AAYO,SAAS,cAAc,EAAE,QAAQ,GAAA,IAA2B,CAAA,GAAI;AACrE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA,cAAc;AAAA,QACd,YAAY,qCAAqC,aAAa,kBAAkB,WAAW,aAAa,YAAY;AAAA,MAAA;AAAA,IACtH;AAAA,EAAA;AAGN;"}